Auto Sliding Carousel with Javascript

#html #css #javascript #webdev

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>

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");
}

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)

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