<html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SKDSlider - Full Width Jquery Slider - Jquery Responsive Full Width Slider - Full Screen Slider- Simple Jquery Slider</title>
<meta name="description" content="A jquery light weight image slideshow plugin. Full width and fully responsive simple image slider with fade in and fade out effect.">
<meta name="keywords" content="jquery slideshow, full width slideshow, simple slideshow, simple image slider, responsive slider, full width responsive slider">
<meta name="robots" content="index, follow">
<meta name="copyright" content="Samir Das">
<meta name="language" content="EN">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="src/skdslider.js"></script>
<link href="src/skdslider.css" rel="stylesheet">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#demo').skdslider({'delay':5000, 'fadeSpeed': 2000,'showNextPrev':true,'showPlayButton':true,'autoStart':false});
});
</script>
<style type="text/css">
.demo-code{ background-color:#ffffff; border:1px solid #333333; display:block; padding:10px;}
</style>
</head>
<body>
<h3>SKDSlider Full Width Image Slider Demo</h3>
<div id="demo" class="skdslider">
<ul>
<li>
<img src="http://farm8.staticflickr.com/7417/9246367517_fc77006826_z.jpg" />
<!--Slider Description example-->
<div class="slide-desc">
<h2>Slider Title 1</h2>
<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
</div>
</li>
<li><img src="http://farm6.staticflickr.com/5544/9380930967_7eb2b286df_o.jpg" />
<div class="slide-desc">
<h2>Slider Title 2</h2>
<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
</div>
</li>
<li><img src="http://farm6.staticflickr.com/5322/9577229681_81b0e7eb26_z.jpg" />
<!--NO Description Here-->
</li>
<li><img src="http://farm3.staticflickr.com/2840/9575429924_b4cfc7da7b_z.jpg" />
<div class="slide-desc">
<h2>Slider Title 4</h2>
<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
</div>
</li>
<li><img src="http://farm4.staticflickr.com/3759/9328648916_ef1d56c140_z.jpg" /></li>
<li><img src="http://farm8.staticflickr.com/7404/9462739474_6086035b42_z.jpg" />
<div class="slide-desc">
<h2>Slider Title 6</h2>
<p>Demo description here. Demo description here. Demo description here. Demo description here. Demo description here. <a class="more" href="#">more</a></p>
</div>
</li>
</ul>
</div>
<h3>How to use?</h3>
<span class="demo-code"> $('#demo').skdslider({'delay':5000, 'fadeSpeed': 2000});</span>
<h3>Available Options</h3>
<p>
<table width="560" border="0" cellspacing="2" cellpadding="4">
<tr>
<td><strong>Option</strong></td>
<td><strong>Description</strong></td>
</tr>
<tr>
<td>delay</td>
<td>Delay duration between two slides in micro seconds. Example: 5000</td>
</tr>
<tr>
<td>fadeSpeed</td>
<td>Fading Speed in micro seconds. Example: 2000</td>
</tr>
<tr>
<td>showNav</td>
<td>true/false - Default value is true. It will show/hide navigation icon</td>
</tr>
<tr>
<td>numericNav</td>
<td>true/false - Default value is false. If true, navigation will be numeric</td>
</tr>
<tr>
<td>autoStart</td>
<td>true/false - Default value is true. Automatically start slideshow</td>
</tr>
<tr>
<td>showNextPrev</td>
<td>true/false - Default value is false. Either it will show next/prev button or not</td>
</tr>
<tr>
<td>showPlayButton</td>
<td>true/false - Default value is false. Either it will show play/pause button or not</td>
</tr>
</table>
</p>
<h3>Download SkdSlider</h3>
<p><a href="http://dandywebsolution.com/blog/download/skdslider.zip">Click here to download SKDSlider</a></p>
<p><strong>Thanks :)</strong></p>
</body>
</html>
/* CSS Document */
body{ margin:0; padding:0;}
.skdslider{
height: 519px;
position: relative;
}
.skdslider ul.slides{ margin:0; padding:0; list-style-type:none;}
.skdslider ul.slides li
{
height: 519px;
left: 0;
position: absolute;
top: 0;
display: none;
width:100%;
}
.skdslider ul.slides li img{
width: 100%;
height:100%;
border:0;
}
.skdslider .slide-navs {
bottom: 20px;
left: 50%;
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
}
.skdslider .slide-navs li {
float: left;
background: url("image/slide-bg.png") no-repeat scroll 0 0 transparent;
height:12px;
width:12px;
margin-right:4px;
cursor:pointer;
}
.skdslider .slide-navs li.current-slide {
background: url("image/slide-bg-active.png") no-repeat scroll 0 0 transparent;
}
.skdslider .slide-desc {
background: url("image/slide_desc.png") repeat scroll 0 0 transparent;
left: 0;
padding: 6px 25px 10px 85px;
position: absolute;
top: 327px;
width: 50%;
}
.skdslider .slide-desc > h2 {
color: #CFDB0C;
font-family: 'Oswald';
font-size: 25px;
margin-bottom: 10px;
margin-top: 10px;
text-transform: uppercase;
}
.skdslider .slide-desc > p {
color: #FFFFFF;
font-family: 'Oswald';
font-size: 16px;
line-height: 20px;
margin-top: 5px;
}
.skdslider .slide-desc > p a.more {
color:#990000;
font-size:20px;
float: right;
height: 18px;
width: 22px;
text-decoration:none;
}
.skdslider .slide-desc > p a.more:hover {
text-decoration:underline;
}
.skdslider a.prev{
background: url("image/left.png") no-repeat scroll 0 0 transparent;
width:35px;
height:35px;
display:block;
cursor:pointer;
position:absolute;
top:44%;
left:2%;
}
.skdslider a.next{
background: url("image/right.png") no-repeat scroll 0 0 transparent;
width:35px;
height:35px;
display:block;
cursor:pointer;
position:absolute;
top:44%;
right:2%;
}
.skdslider a.prev:hover{
}
.skdslider a.next:hover{
}
.skdslider a.play{
background: url("image/play.png") no-repeat scroll center center #e1e1e1;
width:35px;
height:35px;
display:none;
cursor:pointer;
position:absolute;
top:44%;
left:48%;
}
.skdslider a.pause{
background: url("image/pause.png") no-repeat scroll center center #e1e1e1;
width:35px;
height:35px;
display:none;
cursor:pointer;
position:absolute;
top:44%;
left:48%;
}/* =========================================================
// SKD Slider
// Datum: 2013-02-14
// Author: Samir Kumar Das
// Mail: cse.samir@gmail.com
// Web: http://dandywebsolution.com/skdslider
* $('#demo').skdslider({'delay':5000, 'fadeSpeed': 2000});
*
// ========================================================= */
(function($){
$.skdslider = function(container,options){
// settings
var config = {
'delay': 5000,
'fadeSpeed': 2000,
'showNav':true,
'autoStart':true,
'showNextPrev':true,
'numericNav':true,
'showPlayButton':false
};
if ( options ){$.extend(config, options);}
// variables
var element=$(container);
element.find('ul').addClass('slides');
var slides = element.find('ul.slides li');
var targetSlide=0;
config.currentSlide=0;
config.currentState='pause';
$.skdslider.createNav(element,slides, config);
slides.eq(targetSlide).show();
if (config.autoStart==true){
config.currentState='play';
config.interval=setTimeout(function() {
$.skdslider.playSlide(element,slides, config);
}, config.delay);
}
};
$.skdslider.createNav=function(element,slides,config){
var slideSet ='<ul class="slide-navs">';
for(i=0;i<slides.length;i++){
var slideContent='';
if(config.numericNav==true) slideContent=(i+1);
if(i==0)
slideSet+='<li class="current-slide slide-nav-'+i+'"><a>'+slideContent+'</a></li>';
else
slideSet+='<li class="slide-nav-'+i+'"><a>'+slideContent+'</a></li>';
}
slideSet+='</ul>';
if (config.showNav==true){
element.append(slideSet);
var nav_width=element.find('.slide-navs')[0].offsetWidth;
nav_width=parseInt((nav_width/2));
nav_width=(-1)*nav_width;
element.find('.slide-navs').css('margin-left',nav_width);
// Slide marker clicked
element.find('.slide-navs li').click(function(){
index = element.find('.slide-navs li').index(this);
targetSlide = index;
clearTimeout(config.interval);
$.skdslider.playSlide(element,slides, config,targetSlide);
return false;
});
}
if (config.showNextPrev==true){
var nextPrevButton ='<a class="prev"></a>';
nextPrevButton +='<a class="next"></a>';
element.append(nextPrevButton);
element.find('a.prev').click(function(){
if(config.currentSlide==0)targetSlide = (slides.length-1);
else targetSlide = (config.currentSlide-1);
clearTimeout(config.interval);
$.skdslider.playSlide(element,slides, config,targetSlide);
return true;
});
element.find('a.next').click(function(){
if((config.currentSlide+1)==slides.length)targetSlide = 0;
else targetSlide = (config.currentSlide+1);
clearTimeout(config.interval);
$.skdslider.playSlide(element,slides, config,targetSlide);
return false;
});
}
if (config.showPlayButton==true){
var playPause =(config.currentState=='play' || config.autoStart==true)?'<a class="play-control pause"></a>':'<a class="play-control play"></a>';
element.append(playPause);
element.hover(function(){element.find('a.play-control').css('display','block');},function(){element.find('a.play-control').css('display','none');});
element.find('a.play-control').click(function(){
if(config.currentState=='play')
{
clearTimeout(config.interval);
config.currentState='pause';
$(this).addClass('play');
$(this).removeClass('pause');
}
else
{
config.currentState='play';
config.autoStart=true;
$(this).addClass('pause');
$(this).removeClass('play');
if((config.currentSlide+1)==slides.length)targetSlide = 0;
else targetSlide = (config.currentSlide+1);
clearTimeout(config.interval);
$.skdslider.playSlide(element,slides, config,targetSlide);
}
return false;
});
}
};
$.skdslider.playSlide=function(element,slides,config,targetSlide){
element.find('.slide-navs li').removeClass('current-slide');
slides.eq(config.currentSlide).fadeOut(config.fadeSpeed);
if(typeof (targetSlide)=='undefined'){
targetSlide = ( config.currentSlide+1 == slides.length ) ? 0 : config.currentSlide+1;
}
element.find('.slide-navs li').eq(targetSlide).addClass('current-slide');
slides.eq(targetSlide).fadeIn(config.fadeSpeed, function() {
$.skdslider.removeIEFilter($(this)[0]);
});
config.currentSlide=targetSlide;
if (config.autoStart==true && config.currentState=='play'){
config.interval=setTimeout((function() {
$.skdslider.playSlide(element,slides, config);
}), config.delay);
}
};
$.skdslider.removeIEFilter=function(elm){
if(elm.style.removeAttribute){
elm.style.removeAttribute('filter');
}
}
$.fn.skdslider = function(options){
return this.each(function(){
(new $.skdslider(this,options));
});
};
})(jQuery);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.