CODEWITHSUNDEEP
htmlcss
Noamaan Mulla
Noamaan Mulla

Reputation: 77

Image carousel in css not working properly

I'm making a carousel of a website but I'm having problem with the width. I want each image to take full width of the viewport but the last image is appearing below the first image. Even the slider animation is not sliding the images properly, by sliding extra content on the right. Any help would be appreciated

/*carousel container*/

.carousel {
  overflow: hidden;
}


/*figure tag containing carousel*/

.carousel figure {
  position: relative;
  width: 600vw;
  animation: 25s slider infinite;
}


/*carousel images*/

.carousel figure img {
  width: 100vw;
}


/*animations for carousel*/

@keyframes slider {
  0% {
    left: 0vw;
  }
  14% {
    left: 0vw;
  }
  15% {
    left: -100vw;
  }
  29% {
    left: -100vw;
  }
  30% {
    left: -200vw;
  }
  44% {
    left: -200vw;
  }
  45% {
    left: -300vw;
  }
  59% {
    left: -300vw;
  }
  60% {
    left: -400vw;
  }
  74% {
    left: -400vw;
  }
  75% {
    left: -500vw;
  }
  90% {
    left: -500vw;
  }
  100% {
    left: 0vw;
  }
}
<div class="carousel">
  <figure>
    <img src="https://rukminim1.flixcart.com/flap/1688/280/image/a341a61df77a5715.jpg?q=50">
    <img src="https://rukminim1.flixcart.com/flap/1688/280/image/971922653b729a9e.jpg?q=50">
    <img src="https://rukminim1.flixcart.com/flap/1688/280/image/4075d3bac7ced1e9.jpg?q=50">
    <img src="https://rukminim1.flixcart.com/flap/1688/280/image/411e38f49c1486b4.jpg?q=50">
    <img src="https://rukminim1.flixcart.com/flap/1688/280/image/8c30d1a38636e9fa.jpg?q=50">
    <img src="https://rukminim1.flixcart.com/flap/1688/280/image/ce435d49852d2b8c.jpg?q=50">
  </figure>
</div>

Upvotes: 1

Views: 604

Answers (1)

s.kuznetsov
s.kuznetsov

Reputation: 15213

The problem was with the default parameters of the figure tag, which set the spacing between the images. In order to override these rules, add the display: flex and these other rules to the .carousel figure selector.

It should look like this:

.carousel figure {
  position: relative;
  width: 600vw;
  animation: 25s slider infinite;

  display: flex;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

or like this:

.carousel figure {
  position: relative;
  width: 600vw;
  animation: 25s slider infinite;

  display: flex;
  margin: 0;
}


/*carousel container*/

.carousel {
  overflow: hidden;
}


/*figure tag containing carousel*/

.carousel figure {
  position: relative;
  width: 600vw;
  animation: 25s slider infinite;
  
  display: flex;
  margin: 0;
}


/*carousel images*/

.carousel figure img {
  width: 100vw;
}


/*animations for carousel*/

@keyframes slider {
  0% {
    left: 0vw;
  }
  14% {
    left: 0vw;
  }
  15% {
    left: -100vw;
  }
  29% {
    left: -100vw;
  }
  30% {
    left: -200vw;
  }
  44% {
    left: -200vw;
  }
  45% {
    left: -300vw;
  }
  59% {
    left: -300vw;
  }
  60% {
    left: -400vw;
  }
  74% {
    left: -400vw;
  }
  75% {
    left: -500vw;
  }
  90% {
    left: -500vw;
  }
  100% {
    left: 0vw;
  }
}
<div class="carousel">
  <figure>
    <img src="https://rukminim1.flixcart.com/flap/1688/280/image/a341a61df77a5715.jpg?q=50">
    <img src="https://rukminim1.flixcart.com/flap/1688/280/image/971922653b729a9e.jpg?q=50">
    <img src="https://rukminim1.flixcart.com/flap/1688/280/image/4075d3bac7ced1e9.jpg?q=50">
    <img src="https://rukminim1.flixcart.com/flap/1688/280/image/411e38f49c1486b4.jpg?q=50">
    <img src="https://rukminim1.flixcart.com/flap/1688/280/image/8c30d1a38636e9fa.jpg?q=50">
    <img src="https://rukminim1.flixcart.com/flap/1688/280/image/ce435d49852d2b8c.jpg?q=50">
  </figure>
</div>

Upvotes: 1

Related Questions