Barebone Crossfading Carousel/Slider In jQuery - BBSlider

A minimal, barebone jQuery slider/carousel plugin that provides an automatic, infinite, smooth crossfading transition effect between slides.

How to use it:

1. Code the HTML structure for the slider.

<div class="bb-slider slider-example">
  <div class="slide bb-slide one">Slide 1</div>
  <div class="slide bb-slide two">Slide 2</div>
  <div class="slide bb-slide three">Slide 3</div>
  <div class="bb-dots">
      <span class="bb-dot"></span>
      <span class="bb-dot"></span>
      <span class="bb-dot"></span>
  </div>
</div>

2. Download and load the jQuery bare-bone-slider plugin in the document.

<link rel="stylesheet" href="/path/to/dist/bare-bone-slider.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/bare-bone-slider.min.js"></script>

3. Attach the function to the top container to create a basic carousel.

$(".slider-example").BBSlider();

4. Apply your own background images to the slides. OPTIONAL.

.slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center center;
}

.one {
  background-color: green;
  background-image: url(1.jpg);
}

.two {
  background-color: tomato;
  background-image: url(2.jpg);
}

.three {
  background-color: teal;
  background-image: url(3.jpg);
}

4. Intialize the plugin as an infinite-looping carousel.

$(".slider-example").BBSlider({
  autoPlay: false
});

5. Config the duration of the animation. Default: 3000ms.

$(".slider-example").BBSlider({
  slideDuration: 5000
});

6. Default CSS classes.

$(".slider-example").BBSlider({
  dotClass: "bb-dot",
  slideClass: "bb-slide",
  activeClass: "bb-active"
});

---

This awesome jQuery plugin is developed by bimendra. For more Advanced Usages, please check the demo page or visit the official website.