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

Responsive Carousel Plugin With jQuery And CSS3 Flexbox - flexCarousel.js
File Size: 18.9 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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

More features:

  • Navigation arrows.
  • Custom navigation icons.
  • Auto rotates at a given speed.
  • Dynamic carousel height.
  • Compatible with any content types: text, images, videos, etc.

Important note:

This plugin is still under development. Follow this page to get the latest updates

How to use it:

1. Insert the flexCarousel plugin's files into your webpage which has jQuery library loaded.

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

2. By default the plugin uses Font Awesome for the navigation arrows.

<link rel="stylesheet" 

3. Insert your content into the carousel.

<div class="flexCarousel">
  <div class="flexCarousel-container">
    <div class="flexCarousel-slides">
      <div class="flexCarousel-slide">
        Slide 1
      <div class="flexCarousel-slide">
        Slide 2
      <div class="flexCarousel-slide">
        Slide 3

4. Initialize the carousel by calling the function on the top container. That's it.


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

  arrows: true

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

  arrowsOverlay: false

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

  autoplay: false

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

  autoplaySpeed: 5000

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

  height: null

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

  nextArrow: '<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="" 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>',
  prevArrow: '<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="" 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.

  slidesVisible: 1

12. Specify the transition effect. Default: slide.

  transition: 'slide'

13. Enable/disable pagination dots.

  circles: true,
  circlesOverlay: true


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.


  • v0.0.3 release


  • CSS bug fixes


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