Responsive Content Slider jQuery Plugin | Zenith.js

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


  • 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>


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.

  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.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…