Responsive Carousel Plugin With JavaScript And CSS3 Flexbox - flexCarousel.js

flexCarousel.js is a simple, lightweight, jQuery Vanilla JavaScript plugin which allows you to create fully responsive any content carousels with CSS3 flexbox.

More features:

• SVG Navigation arrows.
• Auto rotates at a given speed.
• Dynamic carousel height.
• Infinite loop.
• Mobile-friendly.
• Semantic markup.
• Compatible with any content types: text, images, videos, etc.
• With no dependencies.

Important note:

This plugin has dropped jQuery dependency since v1.0.0.

How to use it:

1. Install & download the plugin with NPM.

# NPM
$ npm install flexcarouseljs --save

2. Insert the flexCarousel plugin's files into your webpage.

<link rel="stylesheet" href="dist/flexCarousel.min.css" />
<script src="dist/flexCarousel.min.js"></script>

3. Insert your content into the carousel.

<div class="myCarousel">
  <ul>
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
    <li>Slide 4</li>
    <li>Slide 5</li>
  </ul>
</div>

4. Create a new flexCarousel instance and done.

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

5. Determines whether a previous and next arrow should be shown on the carousel so that the user can change the active slide.

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

6. Determines whether the arrows overlay onto the active slide or have their own wrapping elements.

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

7. Determine whether the active slide changes to the next slide on a time delay.

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

8. Determine how long the active slide will stay active for before transitioning to the next slide.

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

9. Define whether a fixed height to be added to the .flexCarousel parent element.

const carousel = new flexCarousel('.myCarousel',{
      height: null
});

10. Defines the HTML code for the element which changes the active slide to the next/prev slide when clicked on.

const carousel = new flexCarousel('.myCarousel',{
      nextButton: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-right" class="svg-inline--fa fa-angle-right fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>',
      prevButton: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="angle-left" class="svg-inline--fa fa-angle-left fa-w-8" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"></path></svg>'
});

11. Specify the number of slides to show at a time.

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

12. Specify the transition effect. Default: slide or none.

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

13. Enable/disable pagination dots.

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

14. Determine how many slides to move at a time.

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

15. Enable/disable the infinite scrolling effect.

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

16. Set the initial slide to show on load. Default: the first slide.

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

17. Define options for specific breakpoints.

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

18. Determine how many slides to move 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 () => {
  // breakpoints changes
});

Changelog:

v1.2.0 (2020-09-09)

• Accessibility improvements.
• New variables added for styling.
• Fixed a bug where an additional Webpack loader is required.

v1.1.0 (2020-08-15)

• Autoplay now uses Page Visiblity API
• Keyboard support added for changing pages
• Autoplay is paused when the carousel is focused
• Events are now added to add logic when needed

v1.0.0 (2019-09-28)

• Removed jQuery dependency
• Full re-write of carousel plugin in vanilla JavaScript
• New options available
• New and improved documentation built with VuePress
• Improved semantics and accessibility

v0.3.0 (2019-09-13)

• Improve styling for disabled buttons
• Remove currentPage 0

v0.2.1 (2019-04-10)

• Added image and caption support for the picture tag
• /dist/ will now be included in the npm package
• Improved accessibility through HTML markup
• Sass variables that can be overridden to style carousels

v0.2.0 (2019-03-23)

• Added circles and circlesOverlay options for carousel navigation
• Full switch to ECMAScript 6
• Fixes an issue where all div tags inside .fc-slides will have the fc-slide class

v0.1.0 (2019-03-17)

• Remove arrows if enabled and if the amount of slides visible is the same as the total amount of slides.
• The first slide element is the first slide to be shown instead of the second slide element.
• Fixes an issue where multiple carousels will conflict with each other if on the same page.
• Fixes a height issue when the arrowsOverlay option is set to true.
• Smaller HTML structure needed for the carousel component.
• Improved documentation site built with Jekyll.
• Add styling for videos.
• Simpler markup needed for images and image captions with data-caption attribute.
• Remove Font Awesome dependency.
• Upload to npm.

2018-12-29

• v0.0.3 release

2018-11-20

• CSS bug fixes

2018-11-12

• v0.0.2: Added slidesVisible option

---

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