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&byline=0&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&wmode=opaque&autohide=1&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&byline=0&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 -->
Posting Komentar