Having a bit of trouble with BTS Slider

Code Feedback
1

Can someone please tell me how to get my image slider to show all the images instead of skipping the last three or four and starting over again? Thanks!

2

You could add alternate (animation-direction) to your animation shorthand rule. That should make it go back-and-forth. More about animation direction if that’s what you wanted - you might need JavaScript otherwise.

3

My problem is that I have eight slides. But only about five will show. Why is it doing that?

4 
@keyframes animate {
  0% {
    left: 0;
  }
  
  20% {
    left: 0;
  }
  
  25% {
    left: -100%;
  }
  
  45% {
    left: -100%;
  }
  
  50% {
    left: -200%;
  }
  
  70% {
    left: -200%;
  }
  
  75% {
    left: -300%;
  }
  
  95% {
    left: -300%;
  }
  
  100% {
    left: -400%;
  }
}

I am only seeing 5 percentage values in your keyframes.

1 Like
5

Ohhh, let me see…

6

Could you please tell how to fix the percentage values? I’m a little confused on how to do it with eight slides.

7

You would need to adjust your timing, but you should ultimately have 8 breakpoints that go from 0%, -100%, -200%, -300%, -400%, -500%, -600%, -700%.

1 Like
8

Comment out the overflow property on .container and see where the remaining div lies.
What I discovered: the calculation on .slider is not right (500%) is not enough. you should do 800% while each .slide takes 20% .
Also I would say you should not use float; use flexbox. That’s way more easier. And do what @nhcarrigan said

1 Like
9

When I change it from 500% to 800%, it just gets longer in width.

10

My head is dizzy and I just made a mess. Please tell me how to fix it. :grimacing:

11

See how I adjusted it. But you would probably need to do some Mathematics to get the keyframes to work at the same interval - I am trying to come up with a calculation.

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

.container .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 800%;
  display: flex;
  height: 100%;
  animation: animate 20s linear infinite;
  animation-direction: normal;
}

.container .slider .slide {
  position: relative;
  width: 20%;
  height: 100%;
/*   float: left; */
}

.container .slider .slide .caption {
  position: absolute;
  bottom: 60px;
  left: 60px;
  right: 60px;
  padding: 30px;
  background: rgba(0, 0, 0, .5);
  box-sizing: border-box;
  transition: .5s;
}

.container .slider .slide .caption h2 {
  margin: 0 0 20px;
  padding: 0;
  color: #fff;
  font-size: 48px;
  transition: .5s;
}

.container .slider .slide .caption p {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 18px;
  transition: .5s;
}

.container .slider .slide.slide1 {
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSJEQLxQpeY_3TXva0gXm5hhOLd7DklZ2s3eA&usqp=CAU);
  background-size: cover;
  background-position: center;
}

.container .slider .slide.slide2 {
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRm_F23z6TEq3CjtqA4Y3GDgLt6TiwHnt_h5A&usqp=CAU);
  background-size: cover;
  background-position: center;
}

.container .slider .slide.slide3 {
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRKDZu1nvFckkB-I7sTJ9pmWnsCqL0lNCf6pQ&usqp=CAU);
  background-size: cover;
  background-position: center;
}

.container .slider .slide.slide4 {
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSmezaOiotA6xjfZHLbPKZVtkjzHG0iFen0pQ&usqp=CAU);
  background-size: cover;
  background-position: center;
}

.container .slider .slide.slide5 {
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS9W4i6aHxM7GtgJsn6FCX04Oo4H9mSwNxWsg&usqp=CAU);
  background-size: cover;
  background-position: center;
}

.container .slider .slide.slide6 {
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSSjy0YB8NXtkItHkj2n_RLOZXLnfB4g5epeQ&usqp=CAU);
  background-size: cover;
  background-position: center;
}

.container .slider .slide.slide7 {
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSkbH_19xDE8udfyzzhIuK4GXkdvOP9K18n6w&usqp=CAU);
  background-size: cover;
  background-position: center;
}

.container .slider .slide.slide8 {
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSkbH_19xDE8udfyzzhIuK4GXkdvOP9K18n6w&usqp=CAU);
  background-size: cover;
  background-position: center;
}

@keyframes animate {
  0% {
    left: 0;
  }
  
  10% {
    left: 0;
  }
  
  15% {
    left: -100%
  }
  
  20% {
    left: -100%;
  }
  
  25% {
    left: -200%;
  }
  
  30% {
    left: -200%
  }
  
  35% {
    left: -300%;
  }
  
  45% {
    left: -300%;
  }
  
  55% {
    left: -400%;
  }
  
  60% {
    left: -400%;
  }
  
  65% {
    left: -500%;
  }
  
  70% {
    left: -500%;
  }
  
  75% {
    left: -600%;
  }
  
  80% {
    left: -600%;
  }
  
  85% {
    left: -700%;
  }
  
  100% {
    left: -700%;
  }
}

@media (max-width: 768px) {
  .container .slider .slide .caption {
    bottom: 20px;
    left: 20px;
    right: 20px;
    padding: 20px;
  }

 .container .slider .slide .caption h2 {
    margin: 0 0 10px;
    font-size: 30px;
 }

 .container .slider .slide .caption p {
    font-size: 16px;
 }
}
12

Set your .slider to width 800%, and your .slide to width 12.5% :smiley:

2 Likes
13

Thank you so much! :slightly_smiling_face: :slightly_smiling_face: :slightly_smiling_face: :heart: :heart: :heart: :+1: :+1: :+1:

14

Perfect! Thank you! Thank you! :grinning: :grinning: :grinning: :heart: :heart: :heart: :+1: :+1: :+1:

I didn’t realize this would be such a pain in the butt. :sweat_smile:

1 Like