A simple jQuery plugin to easily create bootstrap carousels
You need to just download the zip file and extract it, then include wslider.js or wslider.min.js file into your html file and you are ready to go.
To use this plugin you must include bootstrap (bootstrap.css and bootstrap.js) and jQuery (jquery.js) files into your project.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wslider demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
Follow the following steps to use this plugin
<script src="wslider.js"></script>
<div id="wslider"></div>
3. Create a JSON array containing urls of images for your slider and pass it to wslider in order to intialize wslider plugin.
Below is the example of how to use plugin with minimum options
<script type="text/javascript">
$(document).ready(function(){
var slides=
[
{
image:'slide1.jpg'
},
{
image:'slide2.jpg'
}
];
$('#slider').wslider({slides:slides});
});
</script>
Here is an example with all option
<script type="text/javascript">
$(document).ready(function(){
var slides=
[
{
image:'slide1.jpg',
alt:'wslide 1',
title:'Slide 01',
description:'This is slide no 01'
},
{
image:'slide2.jpg',
alt:'wslide 2',
title:'Slide 02',
description:'This is slide no 02'
},
];
$('#slider').wslider(
{
slides:slides,
next_text:'Next Slide',
previous_text:'Prev Slide',
interval:3000,
pause_on_hover:true,
cycle:true
});
});
</script>
slides(array) - array containing urls of images to show in slider
image(string) - url of image to display in slider
alt(string) - alternate text for image [optional]
title(string) - heading or title of slide [optional]
description(string) - sub heading or details about slide [optional]
next_text(string) - text to display for next slide control [optional]
previous_text(string) - text to display for previous slide control [optional]
interval(number) - number of milliseconds after which slide change [optional]
pause_on_hover(boolean) - whether the slider should pause on mouse hover or not [optional]
cycle(boolean) - whether the slider should go through all slides continuously, or stop at the last slide [optional]
defaultSetting={
slides:[],
next_text:'Next',
previous_text:'Previous',
interval:5000,
pause_on_hover:'hover',
cycle:true
}
- Mohammad Wasim - (https://github.com/mwasim164)
This project is licensed under the MIT License - see the LICENSE file for details
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent