Fully Responsive Carousel Plugin In Vanilla JavaScript – CG Carousel

Preview:

Description:

CG Carousel is an easy-to-implement, fully responsive, continuous-looping carousel plugin written in vanilla JavaScript.

How to use it:

1. Include the CG Carousel plugin’s JavaScript and Stylesheet on the page.

<link rel="stylesheet" href="./src/styles.css" />
<script src="./src/index.js"></script>

2. Add slides and optional nav buttons to the carousel.

<div class="cg-carousel">
  <div class="cg-carousel__container" id="js-carousel-example">
    <div class="cg-carousel__slide js-carousel__slide">Slide 1</div>
    <div class="cg-carousel__slide js-carousel__slide">Slide 2</div>
    <div class="cg-carousel__slide js-carousel__slide">Slide 3</div>
    <div class="cg-carousel__slide js-carousel__slide">Slide 4</div>
  </div>
  <div class="cg-carousel__btns">
    <div class="cg-carousel__btn" id="js-carousel__prev-example">Prev</div>
    <div class="cg-carousel__btn" id="js-carousel__next-example">Next</div>
  </div>
</div>

3. If you want to make the slide rounded borders…

<div class="cg-carousel">
  <div class="cg-carousel__container" id="js-carousel-example">
    <div class="cg-carousel__slide cg-carousel__slide-rounded js-carousel__slide">Slide 1</div>
    <div class="cg-carousel__slide cg-carousel__slide-rounded js-carousel__slide">Slide 2</div>
    <div class="cg-carousel__slide cg-carousel__slide-rounded js-carousel__slide">Slide 3</div>
    <div class="cg-carousel__slide cg-carousel__slide-rounded js-carousel__slide">Slide 4</div>
  </div>
  <div class="cg-carousel__btns">
    <div class="cg-carousel__btn" id="js-carousel__prev-example">Prev</div>
    <div class="cg-carousel__btn" id="js-carousel__next-example">Next</div>
  </div>
</div>

4. Initialize the carousel plugin with default options.

const myCarousel = new CgCarousel('#js-carousel-example');

5. Enable the navigation buttons.

// Next Button
const nextButton = document.getElementById('js-carousel__next-example');
nextButton.addEventListener('click', () => myCarousel.next());
// Prev Button
const prevButton = document.getElementById('js-carousel__prev-example');
prevButton.addEventListener('click', () => myCarousel.prev());

6. Possible plugin options to customize the carousel.

const myCarousel = new CgCarousel('#js-carousel-example',{
      // enable/disable infinite loop
      loop: false,
      // enable/disable autoplay
      autoplay: false,
      // autoplay interval in ms
      autoplaySpeed: 3000,
      // transition speed in ms
      transitionSpeed: 1000,
      // how many slides per view
      slidesPerView: 1,
      // space between sldies
      spacing: 0
      
});

7. Determine how the carousel works on different screen sizes.

const myCarousel = new CgCarousel('#js-carousel-example',{
      breakpoints: {
        768: {
          // options here
        },
        1024: {
          // options here
        }
      }
});

8. Event handlers.

const myCarousel = new CgCarousel('#js-carousel-example',{
      // options here
},{
    resized: function (instance) {
      console.log(instance.getSlides());
    },
    built: function (instance) {
      console.log(instance.getSlides());
    },
    created: function (instance) {
      console.log(instance.getSlides());
    },
    moved: function (instance) {
      console.log(instance.getCurrentIndex());
    }
};);