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

carousel plugin jquery, bootstrap carousel, carousel slider plugin, slick slider, responsive carousel plugin, fully responsive and flexible jquery carousel plugin

How to make use of 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 navigation 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 a round border for the slide.

<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. Configure the circular 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 will work 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());
    }
};);

Options

Fully Responsive Carousel Plugin In Vanilla JavaScript, CG Carousel Plugin/Github

See Demo And Download

Official Website(ClaudiaPascualGea): Click Here

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