This jQuery image slider plugin uses unobstrusive javascript to transform a block of simple HTML markup into a georgous elegant slider, which can be completely customized using HTML5 data attributes. The markup is valid HTML5 and SEO optimzied, with all content always being available to search engines. When using this plugin, your page layout will be consistent even if javascript has been disabled.
This slider includes a smooth and powerful Ken Burns effect which is completely configurable and compatible with all major browsers (including ie7 to ie9, Firefox Chrome, Opera, Safari) and mobile platforms like iphone / ipad. If the Ken Burns effect is not your thing, that’s OK because the “Estro” slider also includes a 2-way “Swipe” mode with configurable transitions.

CSS::

<style type="text/css">
.peKenBurns {
width:700px;position:relative;margin:20px auto;
height:400px;
}
</style>

<!--Themes Skins-->
<link rel="stylesheet" href="http://pixelentity.com/previews/components/estro/js/pe.kenburns/themes/default/skin.min.css" />

Ket:

- Teks yang berwarnah biru diatas adalah SKIN themes untuk Slidernya, jadi sobat bisa menggantinya! dan dibawah ini ada 2 lagi pilihan skins untuk slidernya.okay... :D

SKIN SLIDER :

1. Neutral Light.

<link rel="stylesheet" href="http://pixelentity.com/previews/components/estro/js/pe.kenburns/themes/neutral_light/skin.min.css" />

2. Organic.

<link rel="stylesheet" href="http://pixelentity.com/previews/components/estro/js/pe.kenburns/themes/organic/skin.min.css" />

SCRIPT::

<!-- import jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="http://pixelentity.com/previews/components/estro/js/pe.kenburns/jquery.pixelentity.kenburnsSlider.min.js"></script>
   
<script>
jQuery(function($){
$(".peKenBurns").peKenburnsSlider({externalFont:true})
})
// for google fonts, handle captions sizing only after fonts are loaded
jQuery(window).load(function() {
$(".peKenBurns").each(function() {
$(this).data("peKenburnsSlider").fontsLoaded()
})
})
</script>

HTML::

<div id="annotation">
<div id="wrapper" class="container_16">

<!--start peKenBurns slider-->
<div class="peKenBurns peNoJs" data-autopause="image" data-thumb="enabled" data-mode="kb" data-controls="always" data-shadow="enabled" data-logo="enabled">

<div class="peKb_active" data-delay="5" data-thumb="http://pixelentity.com/previews/components/estro/img/thumbs/kb_01.jpg">
<img src="http://pixelentity.com/previews/components/estro/img/kb_01.jpg" alt="Banner Image 1" />
<h1>HI &amp; WELCOME TO THE "ESTRO" SLIDER</h1>
</div>

<!-- lazy loading active -->
<div data-delay="5" data-thumb="http://pixelentity.com/previews/components/estro/img/thumbs/kb_00.jpg">
<a class="video hd autoplay loop skiptonext" href="http://vimeo.com/7809605"><img src="img/blank.png" data-src="http://pixelentity.com/previews/components/estro/img/kb_00.jpg" alt="Banner Image 1" /></a>
<h1>A KICK-ASS JQUERY PLUGIN WITH KEN BURNS &amp; 2-WAY SWIPE TRANSITIONS</h1>
</div>

<!-- lazy loading active -->
<div data-delay="5" data-thumb="http://pixelentity.com/previews/components/estro/img/thumbs/kb_02.jpg">
<img src="http://pixelentity.com/previews/components/estro/img/blank.png" data-src="http://pixelentity.com/previews/components/estro/img/kb_02.jpg" alt="Banner Image 1" />
<h1>FINE TUNED, SLEEK &amp; SMOOTH, THIS SLIDER WILL IMPRESS YOUR VISITORS</h1>
</div>

<!-- lazy loading active -->
<div data-delay="5" data-thumb="http://pixelentity.com/previews/components/estro/img/thumbs/kb_03.jpg">
<img src="http://pixelentity.com/previews/components/estro/img/blank.png" data-src="http://pixelentity.com/previews/components/estro/img/kb_03.jpg" alt="Banner Image 1" />
<h1>SUPPORTS ANIMATED CAPTIONS, YOUTUBE &amp; VIMEO VIDEO, SINGLE PAGE MULTI-USE</h1>
</div>

<!-- lazy loading active -->
<div data-delay="5" data-thumb="http://pixelentity.com/previews/components/estro/img/thumbs/kb_04.jpg">
<a class="video hd autoplay loop skiptonext" href="http://www.youtube.com/watch?v=lZOnrN4x0Zk"><img src="http://pixelentity.com/previews/components/estro/img/blank.png" data-src="http://pixelentity.com/previews/components/estro/img/kb_04.jpg" alt="Banner Image 1" /></a>
<h1>CHOOSE FROM MULTIPLE SKINS TO SUIT YOUR OWN STYLE</h1>
</div>

<!-- lazy loading active -->
<div data-delay="5" data-thumb="http://pixelentity.com/previews/components/estro/img/thumbs/kb_05.jpg">
<img src="http://pixelentity.com/previews/components/estro/img/blank.png" data-src="http://pixelentity.com/previews/components/estro/img/kb_05.jpg" alt="Banner Image 1" />
<h1>BONUS MINIMAL THUMBNAIL MODE WITH KEN BURNS ROLLOVER EFFECT </h1>
</div>

<!-- lazy loading active -->
<div data-delay="5" data-thumb="http://pixelentity.com/previews/components/estro/img/thumbs/kb_06.jpg">
<img src="http://pixelentity.com/previews/components/estro/img/blank.png" data-src="http://pixelentity.com/previews/components/estro/img/kb_06.jpg" alt="Banner Image 1" />
<h1>GORGEOUS ANIMATED TIMER INTEGRATED INTO THE CURRENT SLIDE BUTTON</h1>
</div>

</div>
<!--end peKenBurns slider -->

</div>
</div>
<!--end slider grid-->

Example  Estro Slider Swipe With jQuery Plugin.!



Please rate this article: