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

Responsive Carousel Plugin With jQuery And CSS3 Flexbox - flexCarousel.js
File Size: 18.7 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: '<i class="fas fa-angle-right"></i>',
  prevArrow: '<i class="fas fa-angle-left"></i>'

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

  slidesVisible: 1



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