DEV Community

Cover image for Auto Sliding Carousel with Javascript
Shubham Tiwari
Shubham Tiwari

Posted on

Auto Sliding Carousel with Javascript

Hello everyone, in this tutorial, I'll show you how to use HTML, CSS, and Javascript to make a basic auto-sliding carousel. I'll outline all the logics and provide the complete code for the Codepen example.

Let's get started...

Overview

HTML -

<div class="carousel-container">
  <div class="carousel_items">
    <div class="carousel_item item1">
      <p class="carousel_text">Image 1</p>
    </div>
    <div class="carousel_item item2">
      <p class="carousel_text">Image 2</p>
    </div>
    <div class="carousel_item item3">
      <p class="carousel_text">Image 3</p>
    </div>
    <div class="carousel_item item4">
      <p class="carousel_text">Image 4</p>
    </div>
    <div class="carousel_item item5">
      <p class="carousel_text">Image 5</p>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • I've placed the carousel pieces with some text inside the main container, which will be shown at the bottom centre.

CSS - The CSS is compiled from SASS.

* {
  margin: 0;
  padding: 0;
}

.carousel_items {
  display: flex;
  wrap: nowrap;
  overflow: hidden;
}
.carousel_item {
  position: relative;
  min-width: 100%;
  height: 100vh;
  transition: all 0.5s linear;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.carousel_text {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%);
  padding: 0.5rem 1rem;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  text-shadow: 1px 1px black;
  font-size: calc(1.5rem + 0.3vw);
  font-weight: bolder;
}

.item1 {
  background-image: url("https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
}
.item2 {
  background-image: url("https://images.unsplash.com/photo-1501862700950-18382cd41497?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=519&q=80");
}
.item3 {
  background-image: url("https://images.unsplash.com/photo-1536697246787-1f7ae568d89a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzR8fHNwYWNlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
}
.item4 {
  background-image: url("https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8QUl8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60");
}
.item5 {
  background-image: url("https://images.unsplash.com/photo-1673901736622-c3f06b08511f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80");
}
Enter fullscreen mode Exit fullscreen mode
  • We created a flexible container, then we set the container's wrap value to nowrap to arrange the carousel items in a single row, with overflow hidden hiding the remaining items in the row. * When the carousel item's min-width is set to 100%, the other items will be hidden and will occupy the entire width. In order to position the carousel text at the bottom center, I adjusted its position to absolute with relative to carousel items.
  • Set a different background picture for each carousel item by using the item-* class name for each item independently.

Javascript -

const carouselItems = document.querySelectorAll(".carousel_item"); 
let i = 1;

setInterval(() => {
// Accessing All the carousel Items
 Array.from(carouselItems).forEach((item,index) => {

   if(i < carouselItems.length){
    item.style.transform = `translateX(-${i*100}%)`
   }
  })


  if(i < carouselItems.length){
    i++;
  }
  else{
    i=0;
  }
},2000)
Enter fullscreen mode Exit fullscreen mode
  • Using setInterval, the condition is run every two seconds. If the value of i is fewer than the number of carousel items, then all of the carousel items should be moved 100% to the left.
  • Increase the value of i by one if it is less than the number of items on the carousel. In the event that it exceeds the number of carousel elements, set the value of i to 0.

THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me with some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/css-iswherehas-and-not-2afd

https://dev.to/shubhamtiwari909/theme-changer-with-html-and-css-only-4144

https://dev.to/shubhamtiwari909/swiperjs-3802

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (0)