Responsive Customizable jQuery Content Slider Plugin - Zenith.js

File Size: 4.69 MB
Views Total: 1754
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Customizable jQuery Content Slider Plugin - Zenith.js

Zenith.js is a full featured jQuery slider plugin which enables you to create a responsive, mobile-friendly and fully customizable content slider for your website / web app.

Features:

  • 4 built-in layouts for any devices: default, hand, screen, slider.
  • Fully responsive and touch events support.
  • CSS3 animations based on animate.css.
  • Autoplay with pause on hover.
  • Dots pagination, and arrows / thumbnails navigation.
  • Lots of customization options and callbacks.

Basic usage:

1. Load the style.css for basic styles & layouts.

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

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

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

3. The 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 jQuery library and the jQuery Zenith.js plugin at the bottom of the web page.

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

5. Initialize the plugin to generate a responsive fullscreen 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(){},

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