Responsive Full Page Image Carousel Plugin For jQuery

File Size: 14.9 KB
Views Total: 9335
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Full Page Image Carousel Plugin For jQuery

A lightweight, responsive jQuery slideshow plugin that creates a full page image slider/carousel with CSS3 transitions and infinite loop support.

More features:

  • Keeps images have the same height.
  • Auto center the images as you resize the window.
  • Keyboard, arrows and dots navigation.
  • CSS3 based transition effect.
  • Image caption supported.
  • Cross browser.

How to use it:

1. Include the jQuery Full Width Image Slider plugin's stylesheet in the head section of the document.

<link rel="stylesheet" href="slider.css">

2. Include the jQuery library together with jQuery Full Width Image Slider plugin's javascript at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="slider.js"></script>

3. Markup Html structure for the image carousel.

<div class="full-width">
<div class="inner">

<div class="slide">
<div> Caption 1 </div>
<img src="1.jpg" width="1020" height="400"> 
</div>

<div class="slide">
<div> Caption 2 </div>
<img src="2.jpg" width="1020" height="400"> 
</div>

<div class="slide">
<div> Caption 3 </div>
<img src="3.jpg" width="1020" height="400"> 
</div>

...


</div>
<div class="controls"> <a href="#" class="left">&lt;</a> <a href="#" class="right">&gt;</a> </div>
<div class="slide-nav"></div>
</div>

4. Default settings.

// maximum height of slider, px
maxHeight   :   450, 

// minimum height of slider, px
minHeight   :   375, 

// delay between slides, ms
delay       :   5000, 

// transition speed, ms
transition  :   1000, 

// maximum font size, px
maxFont     :   36, 

// minimum font size, px
minFont     :   24 

Change log:

2015-08-31

  • Minor improvements

2015-03-21

  • Fixed some general issues with the slider in newer browsers

This awesome jQuery plugin is developed by JoeBonham. For more Advanced Usages, please check the demo page or visit the official website.