What is Fliderjs, And How Can You Make a Free Carousel Slider in JS?

Introduction

fliderjs is a javascript npm package for making a lightweight carousel slider. It includes multiple features for developers to make a simple slider in only a minute.

This package provides many flexibilities for creating different sliders. In contrast to other slider builders, it provides several different methods for assigning CSS styles and all other cool stuff. You can make a professional slider in the minimum amount of time and yet make it better if you so desire.

Before showing you how to make an elegant and creative slider in JS, let's look at the structure of this library.

The Structure of the fliderjs Package

There are three directories and three files. On your preferred page, you need to call two files:

flider.js and flider_style.css.

the structure of the fliderjs package

The core of this package is the flider.js file. This file imports all modules and javascript styles. Then it builds all the necessary elements for the slider.

All the components of the library are in the modules folder. Take a look at the structure of this folder.

the structure of the module directory

There are three folders. event handling is the most significant module in this directory. It is responsible for the handling of all processes in the slider. The dots handling is responsible for producing the dots option depending on the numbers of your slides.

Finally, error handling is responsible for error management and freezing the page when the slider seems to have an issue.

I'm going to show you how you can easily make a slider through this library. You can find the package fliderjs on the npm page of fliderjs.

• First of all, install the latest version of fliderjs using this command: npm install fliderjs
• Next, include the following jQuery and CSS styles in the header tag of your preferred page:

<script type="text/javascript" src="./fliderjs/jquery/jquery.min.js"></script>

<link rel="stylesheet" href="./fliderjs/style/css/flider_style.css">

• Finally, in the body tag, import "fliderjs/flider.js" as follows:

<script type="module">

        import {fliderjs} from "./fliderjs/flider.js";

</script>

• Just remember to define HTML empty tag like this and name it what you want:

<div id="flider"><div>

• Now you can define and customize your slider using these options:

import {fliderjs} from "./fliderjs/flider.js";

/* Load main function  */

fliderjs( {

    area: [1000,500], /* container option ( string:"full" or array:[x%,y%] )  */
    id: "flider", /* define parent element id  */
    pics: ["1.jpg","2.jpg","3.jpg","4.jpg"], /*  names of the pictures you want to put as an array  */
    src_pics: "pics/", /*  src_pics is the path to your pictures directory ex: pics/  */
    duration: 2000,  /* in milliseconds */
    infinite: true,  /* infinite state: true or false , default is true */
    slideToshow: 1,  /* numbers of slide you want to show */
    auto: true,   /* auto state: true , false  */
    auto_delay: 2000, /* in milliseconds */
    auto_duration:  3000,  /* in milliseconds */
    auto_direction: "right", /* "left" direction or "right" direction as string*/
    dots: true,  /* true or false */

    optional:{
        
        arrows: true, /* true , false , "hover", "pale" */
    
        css:{"arrow-left":{"background":"","border-radius":"8px","margin-left":"20px","padding":"1% 1%"}, // arrow left style
            "arrow-right":{"border-radius":"8px","margin-right":"20px","padding":"1% 1%"}, // arrow right style 
            "container":{"border-radius":"48% 52% 51% 49% / 29% 29% 71% 71% "}, // container of slider style

        }
                }
});

And here you are:

Why Do I Use fliderjs?

• Because it is a lightweight library. It merely has a 120 KB size and a minimal dependence. The only dependency it has is the newest version of jQuery.

• Most slider builders are focused on ease of use and simplicity but do not offer many options. This library contains huge options for future development alongside simplicity.

• It includes dynamic styling, which means you may give not only a predefined style to the slider but also customize every element of it, including the container of the slider, photos of slides, buttons, dots, etc.

  
  

I hope you enjoy it.