carousel

In this example below you will see how to do a carousel with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by liberroi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright liberroi ©
  • HTML
  • CSS
  • JavaScript
    <div class="wrapper">
  <div class="carousel">
    <div class="bar-y"></div>
    <div class="alt-y">PhotoGallery</div>
    <img class="y" src="http://www.thewildernessociety.com/wp-content/uploads/2017/01/Madikwe_photo_hide.jpg" alt="">
    <img class="y" src="https://www.ormsdirect.co.za/blog/wp-content/uploads/2015/02/12-Laurent-Baheux-High-Contrast-Wildlife-Photography-on-Orms-Connect-Photography-Blog-SouthAfrica.jpg" alt="">
    <img class="y" src="https://hdwallsource.com/img/2014/6/africa-wallpaper-24455-25122-hd-wallpapers.jpg" alt="">
    <img class="y" src="https://www.walldevil.com/wallpapers/w02/793172-africa-animals-baby-animals-cubs-lions-mother.jpg" alt="">
    <img class="y" src="http://www.reuun.com/data/out/62/402972416-hd-africa-wallpapers.jpg" alt="">
    <img class="y" src="http://www.thewildernessociety.com/wp-content/uploads/2017/01/Madikwe_photo_hide.jpg" alt="">
  </div>
  <div class="carouselx">
    <div class="bar-x"></div>
    <div class="alt-x">PhotoGallery</div>
    <img class="x" src="http://www.thewildernessociety.com/wp-content/uploads/2017/01/Madikwe_photo_hide.jpg" alt="">
    <img class="x" src="https://www.ormsdirect.co.za/blog/wp-content/uploads/2015/02/12-Laurent-Baheux-High-Contrast-Wildlife-Photography-on-Orms-Connect-Photography-Blog-SouthAfrica.jpg" alt="">
    <img class="x" src="https://hdwallsource.com/img/2014/6/africa-wallpaper-24455-25122-hd-wallpapers.jpg" alt="">
    <img class="x" src="https://www.walldevil.com/wallpapers/w02/793172-africa-animals-baby-animals-cubs-lions-mother.jpg" alt="">
    <img class="x" src="http://www.reuun.com/data/out/62/402972416-hd-africa-wallpapers.jpg" alt="">
    <img class="x" src="http://www.thewildernessociety.com/wp-content/uploads/2017/01/Madikwe_photo_hide.jpg" alt="">
  </div>
</div>  

/*Downloaded from https://www.codeseek.co/liberroi/carousel-rYmGRg */
    @keyframes carousel {
  0%, 5% {
    transform: translatey(-11px);
  }
  20%, 25% {
    transform: translatey(-311px);
  }
  40%, 45% {
    transform: translatey(-611px);
  }
  60%, 65% {
    transform: translatey(-911px);
  }
  80%, 85% {
    transform: translatey(-1211px);
  }  
  95%, 100% {
    transform: translatey(-1511px);
  }
}

@keyframes carouselx {
  0%, 5% {
    transform: translatex(-1px);
  }
  20%, 25% {
    transform: translatex(-495px);
  }
  40%, 45% {
    transform: translatex(-989px);
  }
  60%, 65% {
    transform: translatex(-1483px);
  }
  80%, 85% {
    transform: translatex(-1977px);
  }  
  95%, 100% {
    transform: translatex(-2471px);
  }
}

@keyframes alt {
  0% {
    width: 0px;
  }
  100% {
    width: 110px;
  }
}

@keyframes bar {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
}

body {
  margin: 0;
}

div.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  flex-wrap: wrap;
  position: relative;
}

div.carousel, div.carouselx {
  margin-top: 100px;
  margin-left: 100px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  width: 500px;
  height: 300px;
  border: 4px solid black;
  background-color: white;
  box-sizing: border-box;
  position: relative;
}

div.carouselx {
  flex-wrap: nowrap;
}

div.carousel:hover img {
  animation-play-state: paused;
}

div.carousel:hover div.bar-y {
  animation-play-state: paused;
}

div.carousel:hover div.alt-y {
  display: block;
}

div.carouselx:hover img {
  animation-play-state: paused;
}

div.carouselx:hover div.bar-x {
  animation-play-state: paused;
}

div.carouselx:hover div.alt-x {
  display: block;
}

img.y {
  width: 100%;
  height: 300px;
  margin: 0 auto;
  animation: carousel 10s infinite;
}

img.x {
  width: 100%;
  height: 300px;
  margin: 0px 1px;
  animation: carouselx 10s infinite;
}

div.alt-y, div.alt-x {
  float: left;
  width: 110px;
  height: 30px;
  overflow: hidden;
  background-color: white;
  padding: 5px;
  position: relative;
  top: 235px;
  left: -1px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid black;
  display: none;
  animation: alt 2s linear;
  z-index: 15;
}

div.bar-y, div.bar-x {
  width: 100%;
  height: 5px;
  background-color: darkgray;
  z-index: 5;
  animation: bar 10s infinite;
  position: absolute;
}


/*Downloaded from https://www.codeseek.co/liberroi/carousel-rYmGRg */
    

Comments