Mobile-compatible Image Carousel In jQuery - boishakhCarousel

The boishakhCarousel helps web developers to quickly create a responsive, mobile-compatible, auto-sliding carousel from a group of images.

More features:

• Drag to switch between images.
• Allows setting the number of images to show per slide.
• Auto rotation with pause on hover.
• Custom prev/next navigation.

How to use it:

1. Insert images into the boishakh carousel.

<div class="boishakh-carousel">
  <div class="bc-content">
    <div class="bc-item">
      <img src="https://picsum.photos/600/450?image=815" alt="">
    </div>
    <div class="bc-item">
      <img src="https://picsum.photos/600/450?image=817" alt="">
    </div>
    <div class="bc-item">
      <img src="https://picsum.photos/600/450?image=822" alt="">
    </div>
    <div class="bc-item">
      <img src="https://picsum.photos/600/450?image=823" alt="">
    </div>
    <div class="bc-item">
      <img src="https://picsum.photos/600/450?image=826" alt="">
    </div>
    <div class="bc-item">
      <img src="https://picsum.photos/600/450?image=821" alt="">
    </div>
  </div>
</div>

2. Include jQuery JavaScript library and the boishakh-carousel.js script on the webpage when needed.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/boishakh-carousel.js"></script>

3. Initialize the boishakh carousel and done.

$('.boishakh-carousel').boishakhCarousel();

4. The example CSS for the boishakh carousel.

.boishakh-carousel {
  position: relative;
}

.bc-item{
    background: blue;
    float: left;
    overflow: hidden;
}

.bc-container {
  width: 960px;
  overflow: hidden;
  margin: auto;
}

.bc-content {
  width: 4000px;
  transition: .6s;
}

.prev {
  position: absolute;
  top: 40%;
  left: 0;
  background: rgba(0,0,0,.5);
  color: white;
  padding: 14px 18px;
  cursor: pointer;
}

.next {
  position: absolute;
  top: 40%;
  right: 0;
  background: rgba(0,0,0,.5);
  color: white;
  padding: 14px 18px;
  cursor: pointer;
}

img {
  width: 100%;
  height: auto;
}

5. Specify how many images to show per slide.

$('.boishakh-carousel').boishakhCarousel({

  // default: 2
  items: 3, 

  // space between images
  margin: 2
  
});

6. Enable/disable the auto rotation.

$('.boishakh-carousel').boishakhCarousel({

  // pause on hover
  pauseOnHover: true,
  
  // enable autoplay. default: false
  autoPlay: true

});

7. Customize the background color of the boishakh carousel.

$('.boishakh-carousel').boishakhCarousel({

  background: '#ffffff'

});

8. Customize the label text for the next/prev buttons.

$('.boishakh-carousel').boishakhCarousel({

  prev: 'Before',
  next: 'After'

});

---

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