Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

More options:

• SVG Navigation arrows.
• Auto rotates at a given pace.
• Dynamic carousel top.
• Infinite loop.
• Mobile-friendly.
• Semantic markup.
• Compatible with any content material sorts: textual content, photographs, videos, and many others.
• With no dependencies.

How to make use of it:

Install & download the plugin with NPM.

# NPM
$ npm install flexcarouseljs --save

Create a brand new flexCarousel instance and completed it.

const carousel = new flexCarousel('.myCarousel');

Determines whether or not an earlier and subsequent arrow must be proven on the carousel in order that the person can change the energetic slide.

const carousel = new flexCarousel('.myCarousel',{
      appendArrows: this.selector,
      arrows: true
});

Determines whether or not the arrows overlay onto the energetic slide.

const carousel = new flexCarousel('.myCarousel',{
      arrowsOverlay: false
});

Determine whether or not the energetic slide modifications to the subsequent slide on a time delay.

const carousel = new flexCarousel('.myCarousel',{
      autoplay: false
});

Determine how lengthy the energetic slide will keep energetic earlier than transitioning to the subsequent slide.

const carousel = new flexCarousel('.myCarousel',{
      autoplaySpeed: 5000
});

Define whether or not a set-top is to be added to the .flexCarousel mum or dad component.

const carousel = new flexCarousel('.myCarousel',);

Defines the HTML code for the component which modifications the energetic slide to the subsequent/prev slides when clicked on.

const carousel = new flexCarousel('.myCarousel',
      nextButton: '',
      prevButton: ''
);

Specify the variety of slides to indicate at a time.

const carousel = new flexCarousel('.myCarousel',{
      slidesPerPage: 1
});

Specify the transition impact.

const carousel = new flexCarousel('.myCarousel',{
      transition: 'slide',
      transitionSpeed: 250
});

Enable/disable pagination dots.

const carousel = new flexCarousel('.myCarousel',{
      circles: true,
      circlesOverlay: true
});

Determine what number of slides to maneuver at a time.

const carousel = new flexCarousel('.myCarousel',{
      slidesScrolling: 1
});

Enable/disable the infinite scrolling impact.

const carousel = new flexCarousel('.myCarousel',{
      infinite: true
});

Set the initial slide to indicate load.

const carousel = new flexCarousel('.myCarousel', initialPage: 0 );

Define choices for particular breakpoints.

const carousel = new flexCarousel('.myCarousel',{
      responsive: [
        {
          breakpoint: 992,
          options: {
            // options here
          }
        },
        {
          breakpoint: 468,
          options: {
            // options here
          }
        }
    ],
});

Determine what number of slides to maneuver at a time.

carousel.selector.addEventListener('pageChanged', function () => {
  console.log(`You're viewing page index: $carousel.currentPage`);
});

carousel.selector.addEventListener('pageChanging', function () => 
  // changing
);

carousel.selector.addEventListener('breakpoint', function () => );

Most Popular Plugins, Responsive Carousel Plugin With CSS3 Flexbox, ResponsiveForm, Modern Web Design

See Demo And Download