PARADIGM Slider With jQuery Plugin

Paradigm Slider jQuery Touchable Plugin – The premium way of using a slider in your website.
A combination of Parallax Effect, state-of-the-art Slider and Text Animations defines this slider.
Customize this slider with just a little HTML and CSS to your very needs. Give each slider a parallax caption to transport your message.

Touch swipe for iOS and Android mobile devices is of course included. So it works on every modern browser (including IE7 /8) and on mobile devices.

Excample PARADIGM Slider Klik here,,

SCRIPT::

<!-- get jQuery from the google apis -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>

<!-- jQuery Paradigm Slider  -->
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/js/jquery.cssAnimate.mini.js"></script>
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/js/jquery.waitforimages.js"></script>
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/js/jquery.touchwipe.min.js"></script>
<script type="text/javascript" src="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/js/jquery.themepunch.paradigm.js"></script>

<script type="text/javascript">
   
    $(document).ready(function() {
     $.noConflict();              
    
     jQuery('#slider-light').paradigm(
      {         
       width:900,
       height:300,
       thumbWidth:90,
       thumbHeight:50,
       thumbAmount:6,      
       thumbSpaces:4,
       thumbPadding:4,
       thumbStyle:"thumb",
       thumbVideoIcon:"on",
       bulletXOffset:0,
       bulletYOffset:0,
       shadow:'true',
       parallaxX:500,
       parallaxY:10,
       captionParallaxX:-40,
       captionParallaxY:2,
       touchenabled:'on',
       timer:5     
      });

jQuery('#slider-dark').paradigm(
      {         
       width:700,
       height:300,
       thumbWidth:120,
       thumbHeight:80,
       thumbAmount:5,      
       thumbSpaces:0,
       thumbPadding:4,
       thumbStyle:"bullet",
       thumbVideoIcon:"on",
       bulletXOffset:0,
       bulletYOffset:0,
       shadow:'true',
       parallaxX:0,
       parallaxY:0,
       captionParallaxX:0,
       captionParallaxY:0,
       touchenabled:'on',
       timer:4     
      });

   });
</script>

CSS Light Style::

<style type="text/css">
#slider-light{
 margin-left:auto;
 margin-right:auto;
 position:relative;
 width:918px;
 height:300px;
}

#slider-light ul >li{
 display:none;
}

.caption_black-light{
 font-family: 'PT Sans Narrow', sans-serif;
 font-size:25px;
 color:#fff;
 background-color:#000;
 padding:5px;
 position:absolute;
 -moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 padding-left: 10px;
 padding-right: 10px;
}

.caption_blue-light{
 font-family: 'PT Sans Narrow', sans-serif;
 font-size:25px;
 color:#fff;
 background-color:#00b4ff;
 padding:5px;
 position:absolute;
 -moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 padding-left: 10px;
 padding-right: 10px;
}

.caption_green-light{
 font-family: 'PT Sans Narrow', sans-serif;
 font-size:25px;
 color:#fff;
 background-color:#445626;
 padding:5px;
 position:absolute;
 -moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 padding-left: 10px;
 padding-right: 10px;
}

.caption_orange-light{
 font-family: 'PT Sans Narrow', sans-serif;
 font-size:25px;
 color:#fff;
 background-color:#c54a00;
 padding:5px;
 position:absolute;
 -moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 padding-left: 10px;
 padding-right: 10px;
}

.caption_red-light{
 font-family: 'PT Sans Narrow', sans-serif;
 font-size:25px;
 color:#fff;
 background-color:#c4302b;
 padding:5px;
 position:absolute;
 -moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 padding-left: 10px;
 padding-right: 10px;
}

.caption_white-light{
 font-family: 'PT Sans Narrow', sans-serif;
 font-size:25px;
 color:#000;
 background-color:#fff;
 padding:5px;
 position:absolute;
 -moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 padding-left: 10px;
 padding-right: 10px;
}

.caption_white-light a:link, .caption_white-light a:visited {
 text-decoration: none;
 color: #000;
}

.caption_white-light a:hover {
 text-decoration: none;
 cursor: pointer;
 color: #555;
}

.smallcap-light{
 font-size:18px;
}

.largecap-light{
 font-size:32px;
}

.imagecap-light{position:absolute;}

.nobg-light{
 background: none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
 text-shadow: #000 0px -1px 1px;
}
</style>

<link rel="stylesheet" type="text/css" href="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/css/settings.css" media="screen" />

CSS Dark Style::

<style type="text/css">
#slider-dark{
 margin-left:auto;
 margin-right:auto;
 position:relative;
 width:700px;
 height:300px;
}

#slider-dark ul >li{
 display:none;
}

.caption_black-dark{
 font-family: 'PT Sans Narrow', sans-serif;
 font-size:25px;
 color:#fff;
 background-color:#000;
 padding:5px;
 position:absolute;
 -moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 padding-left: 10px;
 padding-right: 10px;
}

.caption_white-dark{
 font-family: 'PT Sans Narrow', sans-serif;
 font-size:25px;
 color:#000;
 background-color:#fff;
 padding:5px;
 position:absolute;
 -moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 padding-left: 10px;
 padding-right: 10px;
}

.caption_grey-dark{
 font-family: 'PT Sans Narrow', sans-serif;
 font-size:25px;
 color:#fff;
 background-color:#333;
 padding:5px;
 position:absolute;
 -moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 padding-left: 10px;
 padding-right: 10px;
}

.caption_brown-dark{
 font-family: 'PT Sans Narrow', sans-serif;
 font-size:25px;
 color:#000;
 background-color:#601A00;
 padding:5px;
 position:absolute;
 -moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 padding-left: 10px;
 padding-right: 10px;
}

.caption_pink-dark{
 font-family: 'PT Sans Narrow', sans-serif;
 font-size:25px;
 color:#fff;
 background-color:#00CCD3;
 padding:5px;
 position:absolute;
 -moz-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 -webkit-box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.75);
 padding-left: 10px;
 padding-right: 10px;
}

.smallcap-dark{
 font-size:18px;
}

.largecap-dark{
 font-size:32px;
}


.nobg-dark{
 background: none;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
 text-shadow: #000 0px -1px 1px;
}
</style>

<link rel="stylesheet" type="text/css" href="http://www.themepunch.com/codecanyon/paradigm/paradigm-plugin/css/settings.css" media="screen" />

HTML Light Style::

<div id="slider-light" class="light" style="margin:30px auto;">

<ul>       
<!-- THE 1. SLIDE -->
<li data-transition="fade"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide1.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb1.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb1_bw.jpg"/>
<div class="creative_layer">
<div class="caption_blue-light fadeup" style="top:170px;left:50px;">Welcome to PARADIGM</div>               
<div class="caption_black-light smallcap-light faderight" style="top:213px;left:90px">The highly customizable slider solution</div>         
</div></li>

<!-- THE 2. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/vimeo.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb_vimeo.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb_vimeo_bw.jpg"/>
<div class="video_pradigm">
<div class="video_paradigm_wrap">
<iframe class="video_clip" src="http://player.vimeo.com/video/24456787?title=0&amp;byline=0&amp;portrait=0" width="534" height="300" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<h2>Vimeo Video Support</h2>
<p>
Themepunch creates beautiful and elegant termplates, themes and components that suit your clients needs.
</p>
<p>
<strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.
</p>
<a class="buttonlight" href="#">Visit Website</a>
<div id="close"></div>
</div>
</div>
<div class="creative_layer">
<div class="caption_blue-light fadeleft" style="top:120px;left:590px;">Vimeo Video</div>    
<div class="caption_white-light faderight" style="top:120px;left:722px;">Support</div>
<div class="caption_black-light smallcap-light fadeup" style="top:163px;left:590px;">Click the play button</div>        
</div></li>

<!-- THE 3. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide2.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb2.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb2_bw.jpg"/>
<div class="creative_layer">
<div class="caption_green-light fadedown" style="top:80px;left:550px;">Some of Paradigm's Options:</div>               
<div class="caption_black-light smallcap-light fadeleft" style="top:123px;left:550px">Image and thumbs fully resizable</div>
<div class="caption_black-light smallcap-light fadeleft" style="top:157px;left:550px">Optional parallax effect</div>
<div class="caption_black-light smallcap-light fadeleft" style="top:191px;left:550px">iPhone & Android touch enabled</div>        
</div></li>

<!-- THE 4. SLIDE -->
<li data-transition="fade"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide3.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb3.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb3_bw.jpg"/>
<div class="creative_layer">
<div class="caption_orange-light fadeup" style="top:210px;left:200px;">Captions can be positioned freely</div>
<div class="caption_white-light fadedown" style="top:210px;left:513px;"><a href="#">Example URL-link</a></div>          
</div></li>

<!-- THE 5. SLIDE -->
<li data-transition="fade"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/youtube.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb_youtube.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb_youtube_bw.jpg"/>
<div class="video_pradigm">
<div class="video_paradigm_wrap">
<iframe class="video_clip" src="http://www.youtube.com/embed/kjX-8kQmakk?hd=1&amp;wmode=opaque&amp;autohide=1&amp;showinfo=0" height="300" width="534" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<h2>Youtube Video Support</h2>
<p>
Themepunch creates beautiful and elegant termplates, themes and components that suit your clients needs.
</p>
<p>
<strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.
</p>
<a class="buttonlight" href="#">More Info</a>
<div id="close"></div>
</div>
</div>
<div class="creative_layer">
<div class="caption_red-light fadeleft" style="top:120px;left:580px;"><a href="#">Youtube Video</a></div>    
<div class="caption_white-light faderight" style="top:120px;left:728px;">Support</div>       
</div></li>

<!-- THE 6. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide4.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb4.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb4_bw.jpg"/>
<div class="creative_layer"> 
<div class="caption_black-light nobg-light largecap-light fadeleft" style="top:60px;left:530px;">Text with no background</div> 
</div></li>

<!-- THE 7. SLIDE -->
<li data-transition="fade"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide5.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb5.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb5_bw.jpg"/>
<div class="creative_layer">
<div class="caption_blue-light fadeleft" style="top:220px;left:550px;">We hope you enjoy this slider</div>       
</div></li>

<!-- THE 8. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide6.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb6.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb6_bw.jpg"/>
<div class="creative_layer">
<div class="caption_green-light faderight" style="top:220px;left:550px;">Make sure to follow us on envato</div>
</div></li>
</ul>

</div>  <!-- THE END OF THE BANNER EXMAPLE LIGHT -->

HTML Dark Style::

<div id="slider-dark" class="dark" style="margin:30px auto;">

<ul>
<!-- THE 1. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide1_v2.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb1_v2.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb1_v2_blur.jpg"/>
<div class="creative_layer">            
<div class="caption_black-dark largecap-dark fadeleft" style="top:170px;left:70px">PARADIGM</div>
<div class="caption_black-dark smallcap-dark faderight" style="top:220px;left:100px">by Themepunch</div>             
</div></li>

<!-- THE 2. SLIDE -->
<li data-transition="fade"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide2_v2.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb2_v2.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb2_v2_blur.jpg"/>
<div class="creative_layer">
<div class="caption_black-dark smallcap-dark nobg-dark faderight" style="top:250px;left:400px">Example setups included in the download</div>      
</div></li>

<!-- THE 3. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide3_v2.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb3_v2.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb3_v2_blur.jpg"/>
<div class="creative_layer">
<div class="imagecap-light faderight" style="top:150px;left:50px"><img src="http://www.themepunch.com/codecanyon/paradigm/images/premiumbadge.png" width="170" height="126" alt=""/></div>
<div class="caption_grey-dark faderight" style="top:120px;left:30px">Caption image support</div>       
</div></li>

<!-- THE 4. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/vimeo.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb_vimeo.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb_vimeo_bw.jpg"/>
<div class="video_pradigm">
<div class="video_paradigm_wrap">
<iframe class="video_clip" src="http://player.vimeo.com/video/24456787?title=0&amp;byline=0&amp;portrait=0" width="434" height="300" frameborder="0" webkitAllowFullScreen allowFullScreen></iframe>
<h2>Vimeo Video Support</h2>
<p>
Themepunch creates beautiful and elegant termplates, themes and components that suit your clients needs.
</p>
<p>
<strong>Lorem ipsum</strong> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy <strong>eirmod tempor</strong>.
</p>
<a class="buttonlight" href="#">Visit Website</a>
<div id="close"></div>
</div>
</div>
<div class="creative_layer">
<div class="caption_pink-dark fadeleft" style="top:120px;left:478px;">Vimeo Video</div>    
<div class="caption_brown-dark faderight" style="top:120px;left:610px;">Support</div>
<div class="caption_black-dark smallcap-dark fadeup" style="top:163px;left:552px;">Click the play button</div>        
</div></li>

<!-- THE 5. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide4_v2.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb4_v2.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb4_v2_blur.jpg"/>
<div class="creative_layer">
</div></li>

<!-- THE 6. SLIDE -->
<li data-transition="slide"><img src="http://www.themepunch.com/codecanyon/paradigm/images/slides/slide5_v2.jpg" data-thumb="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb5_v2.jpg" data-thumb_bw="http://www.themepunch.com/codecanyon/paradigm/images/thumbs/thumb5_v2_blur.jpg"/>
<div class="creative_layer">
<div class="caption_white-dark fadeup" style="top:230px;left:250px;">Follow us on uttakracker15</div>                     
</div></li>
</ul>

</div> <!-- THE END OF THE BANNER EXMAPLE DARK -->

Please rate this article: