JS:Snippets — Carousel/Slider using plain HTML, CSS and JS
Tags: javascript, html, css, carousel
Published: 2020-06-05 12:01:30

Hey guys! Welcome back to my JS series blogs. Please do check out my previous blog on Stack Data Structure implementation in js  from below card.

{% link https://dev.to/saravanakumarputta/js-ds-stack-data-structure-in-javascript-26ki %}

In this write up we are going to see how to build the carousel/slider using the plain HTML, CSS, and Javascript. The simplest one!

##What is Carousel/Slider?

The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. Content Source from Bootstrap.

##How are we gonna build?

* We will have the Carousel container which holds the slides with previous and next icon.
* We will implement the function to show the slide one at a time.
* We will add the previous and next functionality to the carousel.

##Carousel HTML & CSS
```html

<div class="carouselContainer">
   <div class="carouselImgs slide1">
     <h1>Slide1</h1>
   </div>
   <div class="carouselImgs slide2">
     <h1>Slide2</h1>
   </div>
   <div class="carouselImgs slide3">
     <h1>Slide3</h1>
   </div>
   <div class="carouselImgs slide4">
     <h1>Slide4</h1>
   </div>
   <span class="prev" id="prev"> < </span>
   <span class="next" id="next"> > </span>
</div>
```
##Styles

```
.carouselContainer {
  width: 60%;
  height: 60%;
  margin: 0 auto;
  position: relative;
  background-color: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
}
.carouselImgs {
  width: 100%;
  height: 100%;
  animation: fade 1.5s;
  display: none;
  padding: 20px;
  text-align: center;
  align-items: center;
  justify-items: center;
  justify-content: center;
}
.prev, .next {
  position: absolute;
  top: 49%;
  cursor: pointer
}
.prev { left: 10px; }
.next { right: 10px; }
.slide1 { background-color: #d8e2dc; }
.slide2 { background-color: #577399; }
.slide3 { background-color: #bdd5ea; }
.slide4 { background-color: #f7f7ff; }
//animation css for carousel children
@keyframes fade {
  from { opacity: 0.4; }
  to { opacity: 1; }
}
```

##Function: Show

```javascript
var currentSlide = 1;
function showSlide(slideIndex) {
const slides = document.getElementsByClassName('carouselImgs');
 if (slideIndex > slides.length) { currentSlide = 1 }
 if (slideIndex < 1) { currentSlide = slides.length }
 for (var i = 0; i < slides.length; i++) {
  slides[i].style.display = 'none'
 }
 slides[currentSlide - 1].style.display = 'flex'
}
```

* f the slideIndex exceeds the slides count we need to reset the currentSlide to 1.
* If the slideIndex becomes zero or lesser, reset the currentSlide to slides length.
* This resetting makes the previous and next actions to iterate through the existing slides like infinite.

##Function: previous
```javascript
function previousSlide() {
  showSlide(currentSlide -= 1);
}
```

##Function: next
```javascript
function nextSlide() {
  showSlide(currentSlide += 1);
}
```

##Codepen

{% codepen https://codepen.io/saravanakumar2701/pen/zYrxJPm %}

#####GitHub Page for demo [here](https://saravanakumarputta.github.io/js-snippets-carousel-slider/index.html)



###For full code, please go to the below GitHub repo:
{% github saravanakumarputta/js-snippets-carousel-slider %}

###What are the more features that can be added?
* Automatic slide show based on the interval.
* Can disable the previous/next when the limit is reached.
* Images to the slides.
* Different animations on slide transition.

#####Credits: I learned from web.dev Instagram handle