ini adalah salah satu dari sekian ribu widget yang ada di codecanyon , termasuk para website pendukungnya . dan widget tersebut bukannya free ,
diblog ini saya akan memberikan susunan widget yang ada di codecanyon sesuai kemampuan saya , agar kalian bisa memakainya secara free .
dan sebagian besar kalian bisa simpan di GADGET HTML/JAVASCRIPT.
Royal Slider is easy to use jQuery image gallery and content slider plugin with animated captions, responsive layout and touch support for mobile devices. As navigation you can use thumbnails, tabs or bullets. Use it as image slider, slideshow, HTML content slider, gallery, banner rotator, video gallery, carousel or even presentation. Developed in best practises of HTML5, CSS3 transitions are used for all animations (with fallback).
27,244 Sales
$14
author : Semenov
Created ;10 August 11
Last Update ;24 April 14
High Resolution ;Yes
Compatible Browsers ;IE7, IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome
Files Included ;JavaScript JS, HTML, CSS, Layered PSD .
<div id="homeSlider" class="royalSlider rsDefaultInv">
<div class="rsContent" data-rsDelay="2500" style="background: #FFF;">
<img class="rsImg" src="http://dimsemenov.com/plugins/royal-slider/img/home.jpg" alt="new royalslider" />
<i class="rsTmb">New RoyalSlider</i>
<h1 class="rsABlock rsFirstSlideTitle rsSlideTitle">Professional Image Gallery</h1>
<h2 class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">& RoyalSlider</h2>
</div>
<div class="rsContent">
<a class="rsImg" href="http://dimsemenov.com/plugins/royal-slider/img/previews/home/content-slider.jpg">Content Slider</a>
<h1 class="rsABlock rsFirstSlideTitle rsSlideTitle">Professional Image Gallery</h1>
<h2 class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">& Content Slider</h2>
<a class="example-link" href="http://dimsemenov.com/plugins/royal-slider/"><i class="rsTmb">Content Slider</i>View this example ▸</a>
</div>
<div class="rsContent">
<a class="rsImg" href="http://dimsemenov.com/plugins/royal-slider/img/previews/home/video-gallery.jpg">Video Gallery</a>
<h1 class="rsABlock rsFirstSlideTitle rsSlideTitle">Professional Image Gallery</h1>
<h2 class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">& Video Gallery</h2>
<a class="example-link" href="http://dimsemenov.com/plugins/royal-slider/"><i class="rsTmb">Video Gallery</i>View this example ▸</a>
</div>
<div class="rsContent">
<a class="rsImg" href="http://dimsemenov.com/plugins/royal-slider/img/previews/home/gallery.jpg">Image Gallery</a>
<h1 class="rsABlock rsFirstSlideTitle rsSlideTitle">Professional Image Gallery</h1>
<h2 class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">& Image Gallery</h2>
<a class="example-link" href="http://dimsemenov.com/plugins/royal-slider/"><i class="rsTmb">Image Gallery</i>View this example ▸</a>
</div>
<div class="rsContent">
<a class="rsImg" href="http://dimsemenov.com/plugins/royal-slider/img/previews/home/visible-nearby.jpg">Multi Gallery</a>
<h1 class="rsABlock rsFirstSlideTitle rsSlideTitle">Professional Image Gallery</h1>
<h2 class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">& Multi Gallery</h2>
<a class="example-link" href="http://dimsemenov.com/plugins/royal-slider/"><i class="rsTmb">Multi Gallery</i>View this example ▸</a>
</div>
<div class="rsContent">
<a class="rsImg" href="http://dimsemenov.com/plugins/royal-slider/img/previews/home/animated-blocks.jpg">Animated Blocks</a>
<h1 class="rsABlock rsFirstSlideTitle rsSlideTitle">Professional Image Gallery</h1>
<h2 class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">& Animated Blocks</h2>
<a class="example-link" href="http://dimsemenov.com/plugins/royal-slider/"><i class="rsTmb">Animated Blocks</i>View this example ▸</a>
</div>
<div class="rsContent">
<a class="rsImg" href="http://dimsemenov.com/plugins/royal-slider/img/previews/home/fullwidth.jpg">Full Width Slider</a>
<h1 class="rsABlock rsFirstSlideTitle rsSlideTitle">Professional Image Gallery</h1>
<h2 class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">& Full Width Slider</h2>
<a class="example-link" href="http://dimsemenov.com/plugins/royal-slider/"><i class="rsTmb">Full Width Slider</i>View this example ▸</a>
</div>
<div class="rsContent">
<a class="rsImg" href="http://dimsemenov.com/plugins/royal-slider/img/previews/home/lightbox.jpg">Slider in Lightbox</a>
<h1 class="rsABlock rsFirstSlideTitle rsSlideTitle">Professional Image Gallery</h1>
<h2 class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">& Slider in Lightbox</h2>
<a class="example-link" href="http:http://dimsemenov.com/plugins/royal-slider/"><i class="rsTmb">Slider in Lightbox</i>View this example ▸</a>
</div>
<div class="rsContent">
<a class="rsImg" href="http://dimsemenov.com/plugins/royal-slider/img/previews/home/simple-vertical.jpg">Vertical Slider</a>
<h1 class="rsABlock rsFirstSlideTitle rsSlideTitle">Professional Image Gallery</h1>
<h2 class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">& Vertical Slider</h2>
<a class="example-link" href="http://dimsemenov.com/plugins/royal-slider/"><i class="rsTmb">Vertical Slider</i>View this example ▸</a>
</div>
<div class="rsContent">
<a class="rsImg" href="http://dimsemenov.com/plugins/royal-slider/img/previews/home/gallery-fade.jpg">Vertical Gallery</a>
<h1 class="rsABlock rsFirstSlideTitle rsSlideTitle">Professional Image Gallery</h1>
<h2 class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">& Vertical Gallery</h2>
<a class="example-link" href="http://dimsemenov.com/plugins/royal-slider/"><i class="rsTmb">Vertical Gallery</i>View this example ▸</a>
</div>
<div class="rsContent">
<a class="rsImg" href="http://dimsemenov.com/plugins/royal-slider/img/previews/home/slider-in-laptop.jpg">In laptop</a>
<h1 class="rsABlock rsFirstSlideTitle rsSlideTitle">Professional Image Gallery</h1>
<h2 class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">& In laptop</h2>
<a class="example-link" href="http://dimsemenov.com/plugins/royal-slider/"><i class="rsTmb">In laptop</i>View this example ▸</a>
</div>
<div class="rsContent">
<a class="rsImg" href="http://dimsemenov.com/plugins/royal-slider/img/previews/home/deeplinking.jpg">Deep linking</a>
<h1 class="rsABlock rsFirstSlideTitle rsSlideTitle">Professional Image Gallery</h1>
<h2 class="rsABlock rsSecondSlideTitle rsSlideTitle" data-delay="350">& Deep linking</h2>
<a class="example-link" href="http://dimsemenov.com/plugins/royal-slider/"><i class="rsTmb">Deep linking</i>View this example ▸</a>
</div>
</div>
<link href="http://dimsemenov.com/plugins/royal-slider/royalslider/royalslider.css" rel="stylesheet"/>
<link href="http://dimsemenov.com/plugins/royal-slider/royalslider/skins/default-inverted/rs-default-inverted.css?v=1.0.4" rel="stylesheet"/>
<style type="text/css">
#homeSlider {
font-weight:bold;
width:880px;margin:10px auto;}
#homeSlider .rsThumbsHor {
height: 44px;
padding: 0;
}
.rsDefaultInv,
.rsDefaultInv .rsOverflow,
.rsDefaultInv .rsSlide,
.rsDefaultInv .rsVideoFrameHolder,
.rsDefaultInv .rsThumbs {
background:#000;color:#fff;
}
.rsDefaultInv .rsThumb.rsNavSelected {
background: #fff;
color: #000;
}
#homeSlider .example-link {
padding: 5px 12px 6px;
background: #FFF;
position: absolute;
color: #000;
right: 12px;
bottom: 12px;
text-decoration: none;
font-weight: normal;
}
#homeSlider .example-link:hover {
text-decoration: none;
background: #009ec3;
color: #FFF;
}
.rsWebkit3d .example-link {
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
}
#homeSlider .rsThumb {
width: 172px;
height: 44px;
cursor: pointer;
}
#homeSlider .rsTmb {
text-align: center;
margin-top: 11px;
font-weight: bold;
}
#homeSlider .rsThumb i {
font-style: normal;
font-weight: bold;
}
.rsSlideTitle, #homeSlider h2, #homeSlider h1{
font-size: 24px;
padding: 11px 13px 14px;
background: #009ec3;
background: rgba(0,183,234,0.6);
color: #FFF;
font-weight: normal;
margin: 0;
line-height: 21px;
}
.rsFirstSlideTitle {
left:6%;
top: 54px;
}
.rsSecondSlideTitle {
left:6%;
top: 104px;
}
@media screen and (min-width: 0px) and (max-width: 960px) {
.rsSlideTitle {
font-size: 18px;
padding: 10px 12px 12px;
}
.rsFirstSlideTitle {
left: 8%;
top: 54px;
}
.rsSecondSlideTitle {
left: 8%;
top: 99px;
}
#homeSlider .rsThumb {
font-size: 12px;
width: 115px;
height: 44px;
cursor: pointer;
}
#homeSlider .rsTmb {
margin-top: 12px;
}
}
@media screen and (min-width: 0px) and (max-width: 500px) {
.royalSlider {
height: 300px !important;
}
.rsSlideTitle {
font-size: 14px;
padding: 8px 10px 8px;
}
.rsFirstSlideTitle {
left: 24px;
top: 24px;
}
.rsSecondSlideTitle {
left: 24px;
top: 63px;
}
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://dimsemenov.com/plugins/royal-slider/royalslider/jquery.royalslider.min.js?v=9.3.5"></script>
<script>
jQuery(document).ready(function($) {
var opts = {
controlNavigation:'thumbnails',
imageScaleMode: 'fill',
arrowsNav: false,
arrowsNavHideOnTouch: true,
fullscreen: false,
loop: false,
thumbs: {
firstMargin: false,
paddingBottom: 0
},
autoPlay: {
enabled: true,
delay: 2000
},
numImagesToPreload: 3,
thumbsFirstMargin: false,
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 600,
keyboardNavEnabled: true,
navigateByClick: true,
fadeinLoadedSlide: true
};
if(!$.browser.webkit) {
opts.imgWidth = 707;
opts.imgHeight = 397;
}
var sliderJQ = $('#homeSlider').royalSlider(opts);
});
</script>
themforest ; DEMO
0 Comments:
Posting Komentar