The full width image slider jQuery plug-in
In other tutorials related to carousels or sliders, I have covered different along with Bootstrap’s carousel for horizontal, vertical etc content sliding. Apart from that multiple items carousel and Bootstrap lightbox are also covered.
In this tutorial, I am going to use a jQuery slider that can slide full-width images. The plug-in name is jQuery-Full-Width-Image-Slider, developed by Joe Bonham.
This full-width jQuery slider is a light-weight, only 8Kb JS file and fully responsive. It allows adding caption or text information for each slide that adjusts according to the screen size. In smaller screens, the text information will move to the bottom of the slide while in large screen it appears in about the middle of the image.
Go to the linked page for downloading the plug-in’s JS and other required files or see the following section for live demos and setting up guide.
A demo of image slider in jQuery
In this demo, four images are used for sliding.
Online demo and code
The required CSS files in the <head> section:
<link rel=”stylesheet” href=”css/full-width-slider/demo.css?=2″>
<link rel=”stylesheet” href=”css/full-width-slider/slider.min.css?=3″>
The JS file above the </body> tag:
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script src=”js/full-width-slider/slider.js”></script>
The markup used in the demo:
<div class="wrapper"> <h1>A demo of Full Width Responsive Slider</h1> <div class="full-width"> <div class="inner"> <div class="slide"> <div>The text information of the slide comes here</div> <img src="images/slider-image-1.jpg" height="400"> </div> <div class="slide"> <div>The text information of the slide comes here</div> <img src="images/slider-image-2.jpg" width="1020" height="400"> </div> <div class="slide"> <div>The text information of the slide comes here</div> <img src="images/banana.jpg" width="1020" height="400"> </div> <div class="slide"> <div>The text information of the slide comes here</div> <img src="images/strawberries.jpg" width="1020" height="400"> </div> </div> <div class="controls"> <a href="#" class="left">←</a> <a href="#" class="right">→</a> </div> <div class="slide-nav"></div> </div> </div>
The script requires only initiating the plug-in by using the fullWidth method:
<script>
$('.full-width').fullWidth()
</script>
Get the complete code including the markup, jQuery etc. from the demo page.
A demo of changing the arrows with faster sliding
You may use different codes for the arrows used for moving next and previous. In above example, the following codes were used for next and previous:
← for left
→ for right
In this example, < is used for left while > is used for moving right.
For managing the speed of sliding; to make it slow or fast, you may use the delay and transition options. The delay is for starting the next slide or gap between two slides. The transition option specifies how long it should take for next slide to take full space. Have a look at the demo as using both of these options:
See online demo and code
In the markup section, only arrows for right and left are changed while the other code remains the same. The following script is used in the demo with delay and transition options:
<script>
$(".full-width").fullWidth({
delay : 1500,
transition : 500
});
</script>
Get the complete code from the demo page.