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

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

12. Specify the transition effect. Default: slide.

$('.flexCarousel').flexCarousel({
  transition: 'slide'
});

13. Enable/disable pagination dots.

$('.flexCarousel').flexCarousel({
  circles: true,
  circlesOverlay: true
});

Changelog:

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.