Slider Show Library is a slider javascript library for creating responsive carousels with animated counters and description text.

slider with number indicator plugin, slider slide count source code, slider custom paging example, automatic image slider in html css javascript, javascript image slider

How to make use of it:

1. Download and unzip the package and load the JavaScript slider.js into the document.

<script src="src/js/slider.js"></script>

2. Add images with description text and current/total values to the slider.

<div class="sliders" id="sliders">
  <div class="slider active">
    <div class="numbertext">1 / 3</div>
    <img src="src/img/1.jpg" width="100%">
    <div class="text">Slide one</div>
  </div>
  <div class="slider">
    <div class="numbertext">2 / 3</div>
    <img src="src/img/2.jpg" width="100%">
    <div class="text">Slide two</div>
  </div>
  <div class="slider">
    <div class="numbertext">3 / 3</div>
    <img src="src/img/3.jpg" width="100%">
    <div class="text">Slide three</div>
  </div>
</div>

3. Initialize the circular scroll bar.

new slider({
    el : document.querySelector('#sliders'),
    slideClass : 'slider',
})

4. Customize the autorun interval.

new slider({
    el : document.querySelector('#sliders'),
    slideClass : 'slider',
    auto : 5000
})

5. Callback function.

new slider({
    el : document.querySelector('#sliders'),
    slideClass : 'slider',
    auto : 5000,
    currentSlider : (slider) => {},
})

6. The main styles of circular display.

.sliders {
  max-width: 750px;
  position: relative;
  margin: auto;
}

.slider img{
  border-radius: 10px;
  height: 400px;
}

.slider {
  display: none;
  margin-top: 100px;
}

.slider.active {
  display: block;
}

.prev , .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 22px;
  transition: 0.5s ease;
  border-radius: 5px;
}

.next {
  right: 5px;
}

.prev {
  left: 5px;
}

.prev:hover, .next:hover {
  background-color: #fff;
  color: #000;
}

.text {
  color: #eeeeee;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  animation-name: text;
  animation-duration:3s;
}

.numbertext {
  color: #f2f2f2;
  font-size: 16px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
  left : 0;
  background-color: #00000080;
  border-radius: 10px 0 10px 0;
  animation-name: rotate;
  animation-duration:3s;
}

.dots {
  text-align: center;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 4px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 .dot:hover {
  background-color: #717171;
  transform: scale(.9 , .9);
  transition: .2s;
}

.dot.active {
  background-color: #717171;
  transform: scale(1.3 , 1.3);
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes text {
  0% {
    bottom: 10px;
  }

  25% {
    bottom: 0;
  }

  50% {
    bottom: 10px;
  }

  75% {
    bottom: 0;
  }

  100% {
    bottom: 10px;
  }
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg);
    border-radius: 10px 0 10px 0;
  }

  25% {
    transform: rotateX(180deg);
    border-radius: 0 10px 0 10px;
  }

  50% {
    transform: rotateX(0deg);
    border-radius: 10px 0 10px 0;
  }

  75% {
    transform: rotateX(180deg);
    border-radius: 0 10px 0 10px;
  }

  100% {
    transform: rotateX(0deg);
    border-radius: 10px 0 10px 0;
  }
}

@media (max-width: 368px) {

  .sliders {
    max-width: 85%;
  }

  .slider img {
    height: 250px;
  }

  .text {
    font-size: 1.5rem;
  }
}

@media (min-width: 368px) {
  .sliders {
    max-width: 70%;
  }

  .slider img {
    height: 300px;
  }

  .text {
    font-size: 1.7rem;
  }
}

@media (min-width: 1360px) {
  .sliders {
    max-width: 50%;
  }

  .slider img {
    height: 400px;
  }

  .text {
    font-size: 2rem;
  }
}

Responsive Slider With Counter And Description Text, Slider Show Library Plugin/Github

See Demo And Download

Official Website(matintohidi): Click Here

This superior jQuery/javascript plugin is developed by matintohidi. For extra Advanced usage, please go to the official website.