jQuery Plugins › jQuery Slider Plugins › jQuery ezContentSlider

Flexible and Robust jQuery Content Slider Plugin - ezContentSlider

File Size: 55.4 KB
Views Total: 988
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE7+, FireFox, Opera, Safari#Carousel#Responsive
Flexible and Robust jQuery Content Slider Plugin - ezContentSlider

ezContentSlider is a jQuery plugin for creating a responsive, flexible and fully customizable content slider with a thumbnail carousel on your website.

Features:

  • Lots of options to customize the slider.
  • Fully responsive for both desktop and mobile devices.
  • Allows to add social share links for each slide.
  • A control bar allows you to play, pause, enlarge the slider.
  • Fullscreen mode.
  • Easy to install and setup.

Basic Usage:

1. Include the Bootstrap's CSS, Font Awesome and jQuery ezContentSlider plugin's CSS in the head section of your web page.

<link href="css/ezcontent-slider-js.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">	
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

2. Include the JQuery library and the jQuery ezContentSlider plugin in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.ezContentSlider.js"></script>

3. Create a content slider with image captions, thumbnails, control bar and image loaders as follows.

<div id="demo" class="ezcs-content-slider">

<!-- Main wrapper  -->
<div class="ezcs-main-wrapper">
  <span class="ezcs-main-prev" title="Previous Image"></span>
  <span class="ezcs-main-next" title="Next Image"></span>
  <div class="ezcs-main-slides">
  <ul>
  <li>
  <span class="ezcs-caption-reg ezcs-display-reg">1 - This is the caption for the regular sized image.</span>
  <span class="ezcs-caption-full ezcs-display-full">1 - The caption for the full screen can be different.</span>
  <span class="ezcs-share-reg ezcs-display-reg"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <span class="ezcs-share-full ezcs-display-full"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <a href="#" class="ezcs-the-slides">
    <img class="ezcs-display-reg" src="1.jpg" title="Reg - One"  alt="Reg - One" />
    <img class="ezcs-display-full" src="1-lrg.jpg" title="Large - One"  alt="Large - One" />
  </a>
  </li>
  <li>
  <span class="ezcs-caption-reg ezcs-display-reg">2 - Captions can contain a links.</span>
  <span class="ezcs-caption-full ezcs-display-full">2 - This is the caption for full screen.</span>
  <span class="ezcs-share-reg ezcs-display-reg"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <span class="ezcs-share-full ezcs-display-full"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <a href="#" class="ezcs-the-slides">
    <img class="ezcs-display-reg" src="2.jpg" title="Reg - Two"  alt="Reg - Two" />
    <img class="ezcs-display-full" src="2-lrg.jpg" title="Large - Two"  alt="Large - Two" />
  </a>
  </li>
  <li>
  <span class="ezcs-caption-reg ezcs-display-reg">3 - This is the caption for the regular sized image.</span>
  <span class="ezcs-caption-full ezcs-display-full">3 - This is the caption for the full screen.</span>
  <span class="ezcs-share-reg ezcs-display-reg"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <span class="ezcs-share-full ezcs-display-full"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <a href="#" class="ezcs-the-slides">
    <img class="ezcs-display-reg" src="3.jpg" title="Reg - Three" alt="Reg - Three"  />
    <img class="ezcs-display-full" src="3-lrg.jpg" title="Large - Three" alt="Large - Three"  />
  </a>
  </li>
  <li>
  <span class="ezcs-caption-reg ezcs-display-reg">4 - This is the caption for the regular sized image.</span>
  <span class="ezcs-caption-full ezcs-display-full">4 - This is the caption for the full screen.</span>
  <span class="ezcs-share-reg ezcs-display-reg"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <span class="ezcs-share-full ezcs-display-full"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <a href="#" class="ezcs-the-slides">
    <img class="ezcs-display-reg" src="4.jpg"  alt="Reg - Four" title="Reg - Four" />
    <img class="ezcs-display-full" src="4-lrg.jpg" alt="Large - Four" title="Large - Four" />
  </a>
  </li>
  <li>
  <span class="ezcs-caption-reg ezcs-display-reg">5 - This is the caption for the regular sized image.</span>
  <span class="ezcs-caption-full ezcs-display-full">5 - This is the caption for the full screen.</span>
  <span class="ezcs-share-reg ezcs-display-reg"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <span class="ezcs-share-full ezcs-display-full"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <a href="#" class="ezcs-the-slides">
    <img class="ezcs-display-reg" src="5.jpg"  alt="Reg - Five" title="Reg - Five" />
    <img class="ezcs-display-full" src="5-lrg.jpg" alt="Large - Five" title="Large - Five" />
  </a>
  </li>  
  <li>
  <span class="ezcs-caption-reg ezcs-display-reg">6 - This is the caption for the regular sized image.</span>
  <span class="ezcs-caption-full ezcs-display-full">6 - This is the caption for the full screen.</span>
  <span class="ezcs-share-reg ezcs-display-reg"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <span class="ezcs-share-full ezcs-display-full"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <a href="#" class="ezcs-the-slides">
    <img class="ezcs-display-reg" src="6.jpg"  alt="Reg - Six" title="Reg - Six" />
    <img class="ezcs-display-full" src="6-lrg.jpg"  alt="Full - Six" title="Full - Six" />
  </a>
  </li>
  <li>
  <span class="ezcs-caption-reg ezcs-display-reg">7 - This is the caption for the regular sized image.</span>
  <span class="ezcs-caption-full ezcs-display-full">7 - This is the caption for the full screen.</span>
  <span class="ezcs-share-reg ezcs-display-reg"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <span class="ezcs-share-full ezcs-display-full"><i class="fa fa-pinterest fa-fw"></i> <i class="fa fa-facebook-square fa-fw"></i> <i class="fa fa-twitter-square fa-fw"></i></span>
  <a href="#" class="ezcs-the-slides">
    <img class="ezcs-display-reg" src="7.jpg"  alt="Reg - Seven" title="Reg - Seven" />
    <img class="ezcs-display-full" src="7-lrg.jpg"  alt="Full - Seven" title="Full - Seven" />
  </a>
  </li>
  </ul>
</div>

<!-- Image loader  -->
<div class="ezcs-loader"></div>
<div class="ezcs-clear"></div>

<!-- Controls  -->
<div class="ezcs-controls-wrapper">
  <span id="ezcs-control-switch-show" class="ezcs-control-switch" title="Hide controls"></span>
  <span id="ezcs-control-switch-hide" class="ezcs-control-switch" title="Show controls" style="display:none"></span>
  <div class="ezcs-controls-switch-wrapper"> <!-- these elements will toggle as a group when the switch control is clicked -->
  <span id="ezcs-control-thumbs-show" class="ezcs-control-thumbs" title="Hide thumbnail carousel"></span>
  <span id="ezcs-control-thumbs-hide" class=" ezcs-control-thumbs" title="Show thumbnail carousel"  style="display:none"></span>
  <span id="ezcs-control-caption-show" class="ezcs-control-caption" title="Hide captions"></span>
  <span id="ezcs-control-caption-hide" class="ezcs-control-caption" title="Show captions" style="display:none"></span>
  <span id="ezcs-control-share-show" class="ezcs-control-share" title="Hide share options"></span>
  <span id="ezcs-control-share-hide" class="ezcs-control-share" title="Show share options" style="display:none"></span>
  <span id="ezcs-control-display-full" class="ezcs-control-display" title="Return to Normal" style="display:none"></span>
  <span id="ezcs-control-display-small" class="ezcs-control-display" title="Expand to fullscreen"></span>
  <span id="ezcs-control-play-play" class="ezcs-control-play" title="Pause" style="display:none"></span>
  <span id="ezcs-control-play-pause" class="ezcs-control-play" title="Play"></span>  
  </div>  
</div>
</div> 

<!-- Thumbnail carousel  -->
<div class="ezcs-carousel-wrapper">
  <span class="ezcs-carousel-group-prev" title="Previous page"></span>
  <span class="ezcs-carousel-group-next" title="Next page"></span>
  <div class="ezcs-carousel-pages-wrapper">
  <ul class="ezcs-paging-list">
    <li><img src="1-thumb.jpg" alt="ezWebDevTools - ezContentSlider - FunPixPlus - Img 1 thumb" /></li>
    <li><img src="2-thumb.jpg" alt="ezWebDevTools - ezContentSlider - FunPixPlus - Img 2 thumb" /></li>
    <li><img src="3-thumb.jpg" alt="ezWebDevTools - ezContentSlider - FunPixPlus - Img 3 thumb" /></li>
    <li><img src="4-thumb.jpg" alt="ezWebDevTools - ezContentSlider - FunPixPlus - Img 4 thumb" /></li>
    <li><img src="5-thumb.jpg" alt="ezWebDevTools - ezContentSlider - FunPixPlus - Img 5 thumb" /></li>
    <li><img src="6-thumb.jpg" alt="ezWebDevTools - ezContentSlider - FunPixPlus - Img 6 thumb" /></li>
    <li><img src="7-thumb.jpg" alt="ezWebDevTools - ezContentSlider - FunPixPlus - Img 7 thumb" /></li>
  </ul>
  </div>
</div>
</div>

4. Initialize the content slider with default settings.

$(document).ready(function() {
$('#demo').ezContentSlider(;
});

5. Default settings for the plugin.

  • startIndex : 0 : note: The index of the first side is 0 not 1
  • loaderSelector : '.ezcs-loader'
  • controlsSwitchWrapperClass : '.ezcs-controls-switch-wrapper' : what wraps all the controls 'cept the switch control? this is toggled by the switch click
  • controlsSwitchFadeDuration : 200 : fancy a fade on the switch toggle?
  • controlsSwitchClass : '.ezcs-control-switch'
  • controlsThumbsClass : '.ezcs-control-thumbs'
  • controlsCaptionClass : '.ezcs-control-caption'
  • controlsShareClass : '.ezcs-control-share'
  • controlsDisplayClass : '.ezcs-control-display'
  • controlsPlayClass : '.ezcs-control-play'
  • carouselUse : true : true, else any other value will be considered false (i.e., you must be explicit about wanting the carousel)
  • carouselPageSelectedClassName : 'ezcs-selected' : Note: This setting is simply the class name, the leading period (.) should NOT be included.
  • carouselWrapperSelector : '.ezcs-carousel-wrapper'
  • carouselPagesWrapperSelector : '.ezcs-carousel-pages-wrapper'
  • carouselGroupNextSelector : '.ezcs-carousel-group-next'
  • carouselGroupPrevSelector : '.ezcs-carousel-group-prev'
  • carouselGroupPageOverlap : 0 : how many pages (read: thumbnails) from the current group being displayed will be "overlapped" into the next / prev group to be diaplayed? Overlapping can make it easier for user to follow the group paging. 
  • carouselGroupPagingEffect : 'slide' : 'fade', else any other value defaults to 'slide'
  • carouselGroupPagingDuration : 250 : The duration of the .fadeOut() / .fadeIn() when paging from one group to the next.
  • carouselSlideEasing : 'swing' : if carouselGroupPagingEffect : 'slide' then use this easing -> 'swing' else any other value defaults to 'linear'. 
  • carouselPageWidthInt : 68 : just the integer (w/out the px). img width + borders + margins + paddings. you have to do the math yourself (so the plugin doesn't have invest overhead to do so).
  • carouselPageClickStopsPlayAuto : true
  • mainNextSelector : '.ezcs-main-next'
  • mainPrevSelector : '.ezcs-main-prev'
  • mainNextPrevClickStopsPlayAuto : true
  • mainFullImgRatioDataAttr : 'ezscfullimgratio' : note: data- will be prefixed to this string to create a data attr
  • mainFullImgWidthDataAttr : 'ezscfullimgwidth' : note: data- will be prefixed to this string to create a data attr
  • mainFullImgHeightDataAttr : 'ezscfullimgheight' : note: data- will be prefixed to this string to create a data attr
  • mainFullImgSrcDataAttr : 'ezscfullimgsrc' : 'ezscfullimgsrc' : note: data- will be prefixed to this string to create a data attr
  • mainFullImgLazyLoad : true: true = use the normal image, stretch it to large, then "lazy load" the large image, and once that's loaded replace the normal with the large
  • slidesMainSelector : '.ezcs-main-slides'
  • slidesWrapperClass : '.ezcs-the-slides'
  • slidesMainEffect : 'slide': 'fade' else any other value defaults to 'slide'. note: the main slide effect does not necessarily have to match the carousel
  • slidesMainFadeOutDuration : 300 :  
  • slidesMainFadeInDuration : 300 :  
  • slidesPerSlideDuration : 200 : what "speed" is the slide. should not be greater than playAutoDuration (duh?), and as such there's no code to check this. it's on you. 
  • slidesPerSlideEasing : 'swing' : 'swing' else any other value defaults to 'linear'. if slidesMainEffect : 'slide' then use this easing
  • captionRegClass : '.ezcs-caption-reg'
  • captionFullClass : '.ezcs-caption-full'
  • captionIsShow : true: note: if false then it's up to you to sort out the markup. that is remove the control or flip-flop the display:none
  • shareRegClass : '.ezcs-share-reg'
  • shareFullClass : '.ezcs-share-full'
  • shareIsShow : true: note: if false then it's up to you to sort out the markup...
  • displayRegClass : '.ezcs-display-reg'
  • displayFullClass : '.ezcs-display-full'
  • displayFullCloseWithEscape : true
  • displayFullStyle : 'fill' : 'fit' else any other value defaults to 'fill'. note: 'fit' will not oversize the image to fill the screen
  • displayFullFillCenterImg : true : center the full screen image based on window size and image size
  • displayFullImgWidth100PercentClassName : 'ezcs-width-100-percent': Note: This setting is simply the class name, the leading period (.) should NOT be included.
  • displayFullImgHeight100PercentClassName : 'ezcs-height-100-percent' : Note: This setting is simply the class name, the leading period (.) should NOT be included.
  •  fullToThisAddClassName : 'ezcs-status-fullscreen' : Note: Just the class name, the leading period (.) should NOT be included. This value is used in an addClass(). Also, update CSS if you change this.
  • displayIsReg : true : true = start in regular mode. false = full screen. note: if you have muliple sliders on a page a want full, use the options for one of the sliders.  
  • playAutoPlaying: false
  • playAutoDuration : 2000 : if slidesMainEffect : 'fade' then this value should be greater than slidesMainFadeOutDuration + slidesMainFadeInDuration.
  • playContinuous : true : true = when you get to the end, loop back to the start again. false = stop at the end. 

Change log:

v0.3.9 (2014-07-28)

  • tweaks associated with adding lazy load

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