Hit enter after type your search item
Home / jQuery / jQuery full width slider / carousel for images: 2 demos

jQuery full width slider / carousel for images: 2 demos

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.

jQuery slider responsive

See 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:


 

 

 

The script requires only initiating the plug-in by using the fullWidth method:


 

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:

&larr;  for left

&rarr; for right

In this example, &lt; is used for left while &gt; 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:

jQuery slider delay

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:


 

Get the complete code from the demo page.

This div height required for enabling the sticky sidebar