A Responsive Carousel slider Plugin in Vanilla JavaScript | CG Carousel

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 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>

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 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>

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) {
    built: function (instance) {
    created: function (instance) {
    moved: function (instance) {


OptionsDescriptionDefault Value
loopInfinite loop of slides.false
autoplayManages auto-changing of slides after a defined time interval.false
autoplaySpeedAutoplay interval in ms.3000
transitionSpeedTransition speed in ms.1000
slidesPerViewNumber of slides per page.1
spacingSpacing between slides in pixel0
breakpointsChange the options for a given breakpoint.{}
resizedIs fired when the breakpoint changes.
builtIs fired after the slider is mounted with the current breakpoint options.
createdIs fired after the slider has been initialized for the first time.
movedIs fired every time the slider changes the position.

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.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…