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.
FW Slider features
- No html required
- No jquery reqiuired
- Works on all browser
- mobile responsive
- Availible for Free and OpenSource
FP SLIDER is licensed under the MIT license.
You can donate as small as $5 paypal
this is an open source project please support us for keeping us running
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>
mail me at
You can donate as small as $5 paypal
this is an open source project please support us for keeping us running
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent