BestBudds BestBudds - 1 month ago 18
CSS Question

Scroll x with div

I want to make some slider on my own way but it seems something is bad:

I have:

<div class="slider">
<div class="img first"></div>
<div class="img second"></div>
<div class="img third"></div>
</div>

.slider{width: 100%; max-height: 100%; overflow: hidden;}
//I don't want to see scrolls
.img{width: 100%; height: 100%; float: left;}
.first{background: red;}
.second{background: blue;}
.third{background: green;}


Basically what I want is to have this:

100% 100% 100%
+-------+--------+-------+
+-------+
| 100% |
|first | second third
+-------+
+------------------------+


The problem is that my divs go one under another.. Is it problem with the float: left?

Answer

From what your code is explaining to me above it looks like each slide of your slider is going to be an image. If so, I recommend altering your slider to the following code below:

CODE SNIPPET:

.slider {
  width: 100%;
  max-width: 960px;
  overflow: hidden;
}

.slider figure img {
  width: 25%;
  float: left;
  height: auto;
}

.slider figure {
  width: 400%;
  position: relative;
  margin: 0;
  padding: 0;
  animation: 10s slide infinite;
  -webkit-animation: 10s slide infinite;
}

@-webkit-keyframes slide {
  0% {
    left: 0%;
  }
  16% {
    left: 0%;
  }
  33% {
    left: -100%;
  }
  49% {
    left: -100%;
  }
  66% {
    left: -200%;
  }
  82% {
    left: -200%;
  }
  100% {
    left: -300%;
  }
}
<div class="slider">
  <figure>
    <img src="https://i.ytimg.com/vi/mxbzT3uYXxE/maxresdefault.jpg">
    <img src="http://cdn.playbuzz.com/cdn/1af8dfed-eacb-4228-8219-8781715daa2d/115aad8d-8eee-45e4-b439-450602e843fd.jpg">
    <img src="http://www.majorspoilers.com/wp-content/uploads/2011/08/MSC6.jpg">
    <img src="http://static.srcdn.com/wp-content/uploads/franklin-richards.jpg">
  </figure>
</div>

Rather than having a specific DIV each time to call your img class, we can instead just use the actual img tag. Along with that, in this method I've used the keyframes css to control the slide images positioning.

Should you really want to control this with div content, you could simply wrap the images in your div and alter the class .slider figure img to .slider figure divto include other types of content.

I hope that this helps you in your endeavours.