CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Smokey
Smokey

Reputation: 110

Have image side by side without scrollbar

I'm working on a Roulette site, i just can't get the roulette animation to work. I have an image for the roulette but i need the image to disappear after a certain amount of % and that the image loops around to the left.

This is how it kind of needs to look like (it doesn't end at the end of the border, and doesn't loop around to the left thought.):

$("#right").click(function () {
    $("#one").css("left", "200px");
    $("#two").css("left", "200px");
    $("#three").css("left", "200px");
    $("#four").css("left", "200px");
    $("#five").css("left", "200px");
    $("#six").css("left", "200px");

});

$("#left").click(function () {
    $("#one").css("left", "0px");
});
section {
    width: 80%;
    height: 50px;
    border: 5px solid black;
    margin: auto;
    padding: 7px;
    z-index: 1;
    transition: left 2s ease;
}

div#one {
    width: 15%;
    height: 50px;
    background: black;
    float: left;
    z-index: -1;
    left: 0px;
    position: relative;
    transition: left 2s ease;
    loop: true;
}

div#six {
    width: 15%;
    height: 50px;
    margin-left: 5px;
    background: red;
    float: left;
    z-index: -1;
    left: 0px;
    position: relative;
    transition: left 2s ease;
    loop: true;
}

div#five {
    width: 15%;
    height: 50px;
    background: black;
    float: left;
    margin-left: 5px;
    z-index: -1;
    left: 0px;
    position: relative;
    transition: left 2s ease;
}

div#two {
    width: 15%;
    height: 50px;
    margin-left: 5px;
    background: red;
    float: left;
    z-index: -1;
    left: 0px;
    position: relative;
    transition: left 2s ease;
}

div#three {
    width: 15%;
    height: 50px;
    margin-left: 5px;
    background: black;
    float: left;
    z-index: -1;
    left: 0px;
    position: relative;
    transition: left 2s ease;
}

div#four {
    width: 15%;
    height: 50px;
    margin-left: 5px;
    background: red;
    float: left;
    z-index: -1;
    left: 0px;
    position: relative;
    transition: left 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="five"></div>
    <div id="six"></div>
    <div id="seven"></div>
    <div id="eight"></div>
</section>

<button id="right">
    left: 100px;
</button>

And this is what i want it to look like, but the border has to end near the end of the screen, and the image has to be invisible outside the border, and loop around:

div.numbers {
    display: inline-flex;
    border: 4px solid gray;
}

div.numbers img {
    margin-right: 5px;
}
<section>
  <div class="numbers">
    <img src="https://image.ibb.co/jrnaVG/cases.png">
    <img src="https://image.ibb.co/jrnaVG/cases.png">
    <img src="https://image.ibb.co/jrnaVG/cases.png">
  </div>
</section>

so once i click on a button it should do the transition left 500px, and loop the image around to the left so the image keeps going to the right until the image is 500px further, and it should be invisible outside the border.

Thanks alot for the help!

Upvotes: 3

Views: 188

Answers (2)

James Hill
James Hill

Reputation: 61832

You're really close to hiding the scrolled content. You just need to hide the overflow in section with overflow: hidden;

$("#right").click(function() {
  $("#one").css("left", "200px");
  $("#two").css("left", "200px");
  $("#three").css("left", "200px");
  $("#four").css("left", "200px");
  $("#five").css("left", "200px");
  $("#six").css("left", "200px");

});

$("#left").click(function() {
  $("#one").css("left", "0px");
});
section {
  width: 80%;
  height: 50px;
  border: 5px solid black;
  margin: auto;
  padding: 7px;
  z-index: 1;
  transition: left 2s ease;
  overflow: hidden;
}

div#one {
  width: 15%;
  height: 50px;
  background: black;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
  transition: left 2s ease;
  loop: true;
}

div#six {
  width: 15%;
  height: 50px;
  margin-left: 5px;
  background: red;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
  transition: left 2s ease;
  loop: true;
}

div#five {
  width: 15%;
  height: 50px;
  background: black;
  float: left;
  margin-left: 5px;
  z-index: -1;
  left: 0px;
  position: relative;
  transition: left 2s ease;
}

div#two {
  width: 15%;
  height: 50px;
  margin-left: 5px;
  background: red;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
  transition: left 2s ease;
}

div#three {
  width: 15%;
  height: 50px;
  margin-left: 5px;
  background: black;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
  transition: left 2s ease;
}

div#four {
  width: 15%;
  height: 50px;
  margin-left: 5px;
  background: red;
  float: left;
  z-index: -1;
  left: 0px;
  position: relative;
  transition: left 2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="five"></div>
  <div id="six"></div>
  <div id="seven"></div>
  <div id="eight"></div>
</section>

<button id="right">
left: 100px;
</button>

Upvotes: 2

Emil Kidi
Emil Kidi

Reputation: 49

The parent element needs { overflow-y: hidden; } in your css code

Upvotes: 0

Related Questions