jQuery responsive slider plugin that comes in 4 basic layouts. The fourth layout, or slider layout, has some differences of its own, resulting in 3 predefined sub-layouts and unlimited possibilities for designing, editing, and creating some of your own.

professional jquery content slider plugin, content slider jquery, jquery slider plugin, thumbnail slider jquery responsive, multiple image slider jquery example, simple jquery slider

Features:

• 4 built-in layouts for any device: default, hand, screen, slider.
• Full response and support for touch events.
• CSS3 animation based on animate.css.
• Autoplay with a pause on scroll.
• Dots numbering, arrows/thumbnails navigate.
• Lots of customization options and callbacks.

How to make use of it:

1. Load style.css for basic styles and layouts.

<link rel="stylesheet" href="css/style.css">

2. Load animate.css for CSS3 animations between slides.

<link rel="stylesheet" href="animate.min.css">

3. HTML.

<div id="demo" class="tf_slider">       
    
  <div class="tf_container">
      <div class="tf_slide">Item 1</div>  
      <div class="tf_slide">Item 2</div> 
      <div class="tf_slide">Item 3</div> 
      <div class="tf_slide">Item 4</div> 
      <div class="tf_slide">Item 5</div> 
      ...
 
      <span id="left"></span>
      <span id="right"></span>
      <div id="bullet-navs"></div>
  </div>    

</div>

4. Include the jQuery library and jQuery Zenith.js plug-in at the bottom of the webpage.

<script src="jquery.min.js"></script>
<script src="js/zenith.js"></script>

5. Configure the plugin to create a responsive full-screen content slider.

$('#demo').zenith({
  layout: 'slider', 
  fullWidth: true
});

6. Default plugin options.

// ‘default’, ‘hand’, ‘screen’, ‘slider’
layout      : 'default',

// ‘horizontal’, or ‘vertical’
direction   : 'horizontal',

// Side transition animation. 
// ‘Slide’, ‘Bounce’, ‘Fade’, ‘RotateDown’, ‘RotateUp’, ‘Zoom’, ‘Flip’
animation   : 'Slide',

// Slider section background. Accepts any color code.
background  : '',

// Default active slide
activeIndex : 0,

// Color of the circle, or square around the highlight icon
circleColor : 'cornsilkblue',

// Color of the highlight icon
iconColor   : '#fffff0',

// Icon Color of the currently active highlight
activeColor : 'crimson',

// Sets autoplay on/off.
autoplay    : true,

// Stops autoplay when mouse enters slider region.
autoplayStop : false,

// Pause autoplay when mouse enters slider region.
autoplayPause: true,

// Delay between slides.
autoplaySpeed: 3000,

// Transition duration of each slide.
slideSpeed  : 500,

// Show bullets navigation
bullets     : true,

// Bullets color
bulletsColor: '#f7f7f7',

// Active bullet color
bulletsAC   : 'cornflowerblue',

// Show/hide navigation arrows.
arrows      : true,

// Define your own markup
markup      : ['.tf_container', '.tf_slide'],

// Width of the slider
width       : '65%',

// Height of the slider
height      : '320px',

// Top-Bottom margin between zenith section and other sections.
margin      : '60px',

// Set slider to full width.
fullWidth   : false,

// Choose between some predefined slider container styles: ‘shadow’, ‘border’, ‘frame’
style       : 'shadow',

// Add your custom styles
customStyle : [],

// Change default bullets navigation with your custom markup. 
customNavs  : ['#bullet-navs', 'li'],

// Position of the bullets pagination.
navPosition : 'bottom',

// Show/hide Thumbs navigation background.
thumbsBG    : true,

// Size of the thumb images on different screen sizes
thumbsSize  : {
  xsmall: 45,
  small: 65, 
  medium: 92,
  large : 108,
  xlarge: 128
},

// Set navigation thumbs to be fixed in the slider
fixedThumbs : true

7. Events.

prevSlide   : function(){},
nextSlide   : function(){},
firstSlide  : function(){},
lastSlide   : function(){}, 
animationEnd: function(){},

responsive customizable jquery content slider, zenith-slider Plugin/Github, jquery slider free download

See Demo And Download

Official Website(zutigrm): Click Here

This superior jQuery/javascript plugin is developed by zutigrm. For extra advanced usage, please go to the official website.