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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="src/flexCarousel.js"></script>

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

<link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" 
      integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" 
      crossorigin="anonymous">

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>
      <div class="flexCarousel-slide">
        Slide 2
      </div>
      <div class="flexCarousel-slide">
        Slide 3
      </div>
      ...
    </div>
  </div>
</div>

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

$('.flexCarousel').flexCarousel();

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.

$('.flexCarousel').flexCarousel({
  arrows: true
});

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

$('.flexCarousel').flexCarousel({
  arrowsOverlay: false
});

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

$('.flexCarousel').flexCarousel({
  autoplay: false
});

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

$('.flexCarousel').flexCarousel({
  autoplaySpeed: 5000
});

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

$('.flexCarousel').flexCarousel({
  height: null
});

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

$('.flexCarousel').flexCarousel({
  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.

$('.flexCarousel').flexCarousel({
  slidesVisible: 1
});

Changelog:

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.