Responsive Carousel Slider With JavaScript And CSS3 – flexcards.js

Category: Javascript , Slider | April 9, 2023
Views Total:332 views
Official Page:Go to website
Last Update:April 9, 2023


Responsive Carousel Slider With JavaScript And CSS3 – flexcards.js


flexcards.js is a responsive, easy-to-use carousel slider to present images or HTML content with a seamless user experience.

Built on top of Vanilla JavaScript, CSS3 transitions, and CSS Flexbox model.

How to use it:

1. Download the package and include the main JavaScript flexcards.js on the page.

<script src="./dist/flexcards.js"></script>

2. Add your content to the carousel slider. Note that the library supports either article or img tags as displayed below:

<!-- Article Carousel -->
<div id="flexcards" class="article">
    <h1>First Item</h1>
    <h1>Second Item</h1>
    <h1>Third Item</h1>
    <h1>Last Item</h1>
<!-- Image Carousel -->
<div id="flexcards" class="images">
  <img src="1.jpg" alt="Landscape">
  <img src="2.jpg" alt="Landscape">
  <img src="3.jpg" alt="Landscape">
  <img src="N.jpg" alt="Landscape">

3. Initialize the flexcards.js.

// Article Carousel
const flexcards = new FlexCards("#flexcards.article");
// Image Carousel
const flexcards2 = new FlexCards("#flexcards.images", { 
      components: "images" 
  // options here

4. Available options to customize the carousel slider.

  // path to the navigation arrows
  arrowUrl: "/path/to/arrows.png",
  // apply a filter to the arrows
  colorized: true,
  // dots | numbers |
  indexType: "numbers",
  // primary color of the carousel
  theme: "#444",
  // shows a countdown timer on the top
  timer: true,


v2.2.8 (04/09/2023)

  • Bugfixes

You Might Be Interested In:

Leave a Reply