Zenith – Responsive Slider jQuery Plugin

Zenith is responsive slider jquery plugin that comes in 4 basic layouts and 7 transition animation available . 4-th layout, or slider layout, has some variations of it’s own, producing 3 more pre-defined sub-layouts and unlimited possibilities of styling, editing and creating some of your own variations. You can edit some HTML, and add that markup by passing it’s elements classes or id’s to the options when initializing zenith.

Zenith differs from other responsive slider jquery plugins in dozen ways. It’s unique layouts for showcasing highlights will enhance your product, or app presentation. You can style almost every part by passing your own custom CSS directly into options, without even touching the main style.

FREE WordPress Version

Dependencies
CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
jQuery

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

$('#element').zenith();

General options

These options apply to all layouts. Additional options per specific layout can be found

Option Default Description
layout ‘default’ Select slider layout. Available are: ‘default’, ‘hand’, ‘screen’, ‘slider’
direction ‘horizontal’ Sliding direction – ‘horizontal’, or ‘vertical’
Animation ‘Slide’ Slide transition animation. Animations available: ‘Slide’, ‘Bounce’, ‘Fade’, ‘RotateDown’, ‘RotateUp’, ‘Zoom’, ‘Flip’
background / Slider section background. Accepts any color code.
activeIndex 0 Sets default active slide that will be visible when page loads.
autoplay true Sets autoplay on/off. Values: true, or false
autoplayStop false Stops autoplay when mouse enters slider region. This differs from autoplayPause in a way that if this option is set to true, autoplay will be stopped completely.
autoplayPause true Pause autoplay when mouse enters slider region. After mouse leaves, autoplay continue.
autoplaySpeed 3000 Delay between slides.
slideSpeed 500 Transition duration of each slide.

Default and Hand Layout Options

Option Default Description
circleColor ‘cornsilkblue’ Color of the circle, or square around the highlight icon
iconColor ‘#fffff0’ Color of the highlight icon
activeColor ‘crimson’ Icon Color of the currently active highlight

Default Layout Markup


<section id="highlights" class="clearfix zenith_slider">
                  
  
    <!--The First row-->  
    <div class="row left-row">
      <ul>
          <li class="highlight lhgh" data-index="0">

              <div class="highlight-title">
                <h3>Easily Customized</h3>
                <span class="fa fa-cogs fa-2x" ></span>
              </div><!-- .highlight-title --> 

              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege t dolor. Aenean massa.</p>

          </li><!-- .highlight .lhgh -->

          <li class="highlight lhgh" data-index="1">

              <div class="highlight-title">
                <h3>Crafted with love</h3>
                <span class="fa fa-heart-o fa-2x" ></span>
              </div><!-- .highlight-title --> 

              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege t dolor. Aenean massa.</p>

          </li><!-- .highlight .left-row -->

          <li class="highlight lhgh" data-index="2">

              <div class="highlight-title">
                <h3>User Friendly</h3>
                <span class="fa fa-user fa-2x" ></span>
              </div><!-- .highlight-title --> 

              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege t dolor. Aenean massa.</p>

          </li><!-- .highlight .left-row -->
    
      </ul>
    </div><!-- .row .left-row -->
  
     <div class="highlights-phone col-md-4 col-xs-12 wht">
      
         <div class="phone-holder">

              <div id="fon"></div>

              <div class="hgh-linner hgi" data-index="0">
                  <img src="image"/>     
              </div>

              <div class="hgh-linner hgi" data-index="1">
                  <img src="image"/>     
              </div>

              <div class="hgh-linner hgi" data-index="2">
                  <img src="image"/>     
              </div>
        
          </div>

      </div>

      <!--The Second row-->
      <div class="row col-md-4 col-xs-8 right-row">
         <ul>

            <li class="highlight rhgh" data-index="3">

                <div class="highlight-title">
                  <span class="fa fa-desktop fa-2x" ></span>
                  <h3>Fully Responsive</h3>
                </div><!-- .highlight-title --> 

                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege t dolor. Aenean massa.</p>

              </li><!-- .highlight .left-row -->

              <li class="highlight rhgh" data-index="4">

                <div class="highlight-title">
                  <span class="fa fa-home fa-2x" ></span>
                  <h3>2 Homepage layouts</h3>
                </div><!-- .highlight-title --> 

                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege t dolor. Aenean massa.</p>

              </li><!-- .highlight .left-row -->

              <li class="highlight rhgh" data-index="5">

                <div class="highlight-title">
                  <span class="fa fa-users fa-2x" ></span>
                  <h3>Great Support</h3>
                </div><!-- .highlight-title --> 

                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege t dolor. Aenean massa.</p>

              </li><!-- .highlight .left-row -->
    
        </ul>

      </div><!-- .row .left-row -->
  
</section><!--Highlights close-->	

Hand Layout Markup


<section id="something" class="hand zenith_slider">

        <div class="row">

            <div class="highlights">

                <ul>

                  <li class="highlight lhgh" data-index="0">

                      <div class="highlight-title">
                        <h3>Easily Customized</h3>
                        <span class="fa fa-cogs fa-2x" ></span>
                      </div><!-- .highlight-title --> 

                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege t dolor. Aenean massa.</p>

                  </li><!-- .highlight .left-row -->

                  <li class="highlight lhgh" data-index="1">

                      <div class="highlight-title">
                        <h3>Crafted with love</h3>
                        <span class="fa fa-heart-o fa-2x" ></span>
                      </div><!-- .highlight-title --> 

                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege t dolor. Aenean massa.</p>

                  </li><!-- .highlight .left-row -->

                  <li class="highlight lhgh" data-index="2">

                      <div class="highlight-title">
                        <h3>User Friendly</h3>
                        <span class="fa fa-user fa-2x" ></span>
                      </div><!-- .highlight-title --> 

                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula ege t dolor. Aenean massa.</p>

                  </li><!-- .highlight .left-row -->
                  
                </ul>

            </div>

            <div class="phone-hand">

                <div id="inner-screen">  

                   <div class="hgi" data-index="0">
                     <img src="image"/>
                   </div>

                   <div class="hgi" data-index="1">
                     <img src="image"/>   
                   </div>

                   <div class="hgi" data-index="2">
                    <img src="image"/>
                   </div>

                </div>

            </div>    

        </div>

    </section>	

Screen Layout Options

Option Default Description
bullets true Show bullets navigation
bulletsColor ‘#f7f7f7’ Navigation bullets color
bulletsAC ‘cornflowerblue’ Active bullet color
arrows true Show/hide navigation arrows. Options: true, or false

Screen Layout Markup


<section id="some-id" class="tf_slider">
       
           
      <div id="mac-book">

            <div class="ratio"></div>

            <div id="mac-screen">

                <div class="hgh-linner hgi" data-index="0">
                    <img src="image"/>    
                </div>
                
                <div class="hgh-linner hgi" data-index="1">
                    <img src="image"/>    
                </div>

                <div class="hgh-linner hgi" data-index="2">
                    <img src="image"/>    
                </div>

                <span id="left"></span>
                <span id="right"></span>

                <div id="bullet-navs"></div>

            </div>

      </div>
  
  
</section><!--Highlights close-->
	

Slider Layout Options

Option Default Description
bullets true Show bullets navigation
bulletsColor ‘#f7f7f7’ Navigation bullets color
bulletsAC ‘cornflowerblue’ Active bullet color
arrows true Show/hide navigation arrows. Args: true, or false
markup [‘.tf_container’, ‘.tf_slide’] You can define your own markup – container class, or id, and slide class or id. You must follow same structure<container>
<slide>
<slide>
</container>
If you want to keep default one, just skip this option when initializing zenith.
width ‘65%’ Width of the slider, can be set in px, em, or %.
height ‘320px’ Height of the slider, can be set in px, em, or %.
margin ’60px’ Top-Bottom margin between zenith section and other sections.
fullWidth false Set slider to full width. Args: true, false. (if you want to fill the visible screen set height option to ‘100%’ and fullWidth to true)
style ‘shadow’ Choose between some predefined slider container styles: ‘shadow’, ‘border’, ‘frame’
customStyle [] Add your custom styles, styling the slider directly without editing master css file. Just add array of css values for specific elements. Example:
customStyle: [
'.tf_slider{margin-top: 82px}',
'.tf_slide p{padding: 15px; color: #999}',
'p img{border: 1px solid #ddd;
width: 92px; height: 92px}'
]
customNavs [‘#bullet-navs’, ‘li’] Here you can change default bullets navigation with your custom markup. It must follow simple structure:
<container>
<element>
<element>
</container>

You can add thumbs, tabs, or new bullets. Containing element can be allmost anything, a <div>, <ul>, <ol>, <span>, etc. More on this can be found in the Tips and trics section.
navPosition ‘bottom’ Position of the bullets navigation. in horizontal direction available args: ‘bottom’, ‘top’, and for vertical direction: ‘left’, ‘right’
thumbsBG true Show/hide Thumbs navigation background. Args: true, false
thumbsSize
    {
        xsmall: 45,
        small: 65, 
        medium: 92,
        large : 108,
        xlarge: 128
    }
Size of the thumb images on different screen sizes: xsmall – for up to 480px screens (mobile phones), small – for up to 960px screen (tablets and some large smartphones), medium – for up to 1200px (netbooks, desktop), large – for 1600px monitors, and xlarge for 1920px screens and larger.
fixedThumbs true Set navigation thumbs to be fixed in the slider, or to appear to it’s positon when mouse enters slider region.

Slider Markup


	 <section id="s" class="clearfix 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> 
                <div class="tf_slide">Item 6</div> 
                <div class="tf_slide">Item 7</div> 
           
                <span id="left"></span>
                <span id="right"></span>

                <div id="bullet-navs"></div>

            </div>    

    </section><!--Highlights close-->

Tips & Tricks

Slider with thumbs

HTML markup

Instead of <div id=”bullet-navs”> add:


<div id="tf_thumbs" class="">
        <div class="tf_thumb"><img src="images/1.jpg"/></div>
        <div class="tf_thumb"><img src="images/2.jpg"/></div>
        <div class="tf_thumb"><img src="images/3.jpg"/></div>
        <div class="tf_thumb"><img src="images/4.jpg"/></div>
        <div class="tf_thumb"><img src="images/5.jpg"/></div>
</div>
	
Initialize

<script type="text/javascript">
      $('#d').zenith({layout: 'slider', customNavs: ['#tf_thumbs', '.tf_thumb']});

</script>
Slider with tabs

Replace #bullet-navs container (like with thumbs) with: #tf_tabs and elements with .tf_tab. Then like in the example above initialize slider by passing customNavs option and adding some custom styling to the tabs along with thumbsSize:


customNavs: ['#tf_tabs', '.tf_tab'], 
customStyle: [
       '#tf_tabs{ margin-top: 40px; bottom: auto}', 
       '.tf_tab{display: inline-block; padding: 10px 3%; font-size: 1.15em; border: 2px solid #444; m5px}', 
       '.tf_tab.active{border-color: indianred}', 
       '#d .tf_container .tf_slide{padding-top: 95px}', 
       '.tf_tab:hover{cursor: pointer}'
],
thumbsSize: {
       xsmall : 'auto',
       small : 'auto',
       medium : 'auto',
       large : 'auto',
       xlarge : 'auto'
},	

Callback Functions


    prevSlide   : function(){}
    nextSlide   : function(){}
    firstSlide  : function(){}
    lastSlide   : function(){}
    animationEnd: function(){}
Function Description
prevSlide Fires when >>previous<< slide is triggered.
nextSlide Fires when >>next<< slide is triggered.
firstSlide Fires when first slide is reached.
lastSlide Fires when last slide is reached.
animationEnd Fires when current slide finishes it’s transition.

Example Usage


$('#slider').zenith({
    prevSlide   : function(){
	    alert('returned to previous slide')
	},
    nextSlide   : function(){
    	alert('advanced to the next slide')
    }	
});
Thank You

Your download should start in few seconds. If it doesn't start, click this link to download it manualy: Download

If you like my freebie give me some support by recommending it and following new updates.

Downloads
You May Also Like
styleswitcher

Ultimate Styleswitcher Framework

rain-jquery-plugin

Responsive Off-Canvas Navigation

alpha-jquery

Alpha Testimonials – Responsive Testimonials jQuery Plugin

turbotabs

TurboTabs – Responsive Tabs jQuery Plugin

8 comments on “Zenith – Responsive Slider jQuery Plugin

Leave a Comment

Your email adress will not be published. All fields are required

HTML is not allowed