FW Slider

FW slider is hussle free and easy to use slider with powerful features. fully customisable css and compatible with ‘animate.css’ and custom css can be used also.

live Demo

Build Status Documentation Status

FW Slider features

Licensing

FP SLIDER is licensed under the MIT license.

MIT License

You can donate as small as $5 paypal

this is an open source project please support us for keeping us running

how to use

Create a div tag with and id

<div class="section" id="fw-slider">
        
</div>

Inclide the main.css file in your page

<link rel="stylesheet" href="../css/main.css"/>

Include the fw-slider.js file in your page

<script src="../js/fw-slider.js"></script>

then make a fw slider

<script>

let FWSlider = new FW_Slider();
FWSlider.init({
  elementId: "fw-slider",
  dots: true,
  infinite: false,
  speed: 5000,
  slidesToShow: 4,
  slidesToScroll: 1,
  slidesCount:4,
  controls:true,
  slides:[
    { 
      name: '',
      title: 'First slide',
      description: 'lorem ipsum suet doler.',
      image: '../docs/images/2.jpg',
      color:'#ccc',
      enterAnimationClass:'animated zoomIn',
      exitAnimationClass:'animated slideOutUp',
      layers:[
        { name:'1',
          left:100,
          top:100,
          width:100,
          height:100,
          animation:'fade',
          animationStart:100,
          animationDuration:100,
          content: `<h1>text1</h1>`,
        },
        { name: '1',
          left:100,
          top:100,
          width:100,
          height:100,
          animation: 'fade',
          animationStart:200,
          animationDuration:100,  
          content: `<h1>text2</h1>`,
        }
      ]
    },
    { 
      name:'',
      title:'Second slide',
      description:'lorem ipsum suet doler.',
      image: '../docs/images/2.jpg',
      color:'#ccc',
      enterAnimationClass:'animated zoomIn',
      exitAnimationClass:'animated rollOut',
      layers:[],
    },
    { 
      name:'',
      title:'Third slide',
      description:'lorem ipsum suet doler.',
      image: '../docs/images/3.jpg',
      color:'#ccc',
      enterAnimationClass:'animated zoomIn',
      exitAnimationClass:'animated slideOutRight',
      layers:[],
    },
    { 
      name: '',
      title: 'Fouth slide',
      description: 'lorem ipsum suet doler.',
      image: '../docs/images/2.jpg',
      color:'#ccc',
      enterAnimationClass:'animated zoomIn',
      exitAnimationClass:'animated slideOutUp',
      layers:[
        { name:'1',
          left:100,
          top:100,
          width:100,
          height:100,
          animation:'fade',
          animationStart:100,
          animationDuration:100,
          content: `<h1>text1</h1>`,
        },
        { name: '1',
          left:100,
          top:100,
          width:100,
          height:100,
          animation: 'fade',
          animationStart:200,
          animationDuration:100,  
          content: `<h1>text2</h1>`,
        }
      ]
    },
  ],
  
});
FWSlider.start();

</script>

contribute

mail me at

sidd5sci@gmail.com

You can donate as small as $5 paypal

this is an open source project please support us for keeping us running