Stylish Featured Content Slideshow Plugin - desSlideshow

File Size: 565KB
Views Total: 2405
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Stylish Featured Content Slideshow Plugin - desSlideshow

desSlideshow is a lightweight and easy-to-use jQuery slideshow plugin which allows you to create a stylish slideshow with animated navigation buttons for displaying featured content/images of your website.

How to use it:

1. Include jQuery library and jQuery desSlideshow on your html page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/desSlideshow.js"></script>

2. Markuo Html Structure

<div id="demo" class="desSlideshow">
<div class="switchBigPic">
<div> <a title="" href="#"><img class="pic" src="./images/001.jpg" /></a>
<p><strong>Description Title1</strong><br/>
Description Content1 </p>
</div>
<div><a title="" href="#"><img class="pic" src="./images/002.jpg" /></a> </div>
<div><a title="" href="#"><img class="pic" src="./images/003.jpg" /></a>
<p><strong>Description Title3</strong><br/>
Description Content3 </p>
</div>
<div><a title="" href="#"><img class="pic" src="./images/004.jpg" /></a>
<p><strong>Description Title4</strong><br/>
Description Content4 </p>
</div>
</div>
<ul class="nav">
<li><a href="#">Slideshow1</a></li>
<li><a href="#">Slideshow2</a></li>
<li><a href="#">Slideshow3</a></li>
<li><a href="#">Slideshow4</a></li>
</ul>
</div>

3. The CSS

.desSlideshow {
background-image: url(../images/loading.gif);
background-position: center center;
background-repeat: no-repeat;
}
.desSlideshow .switchBigPic, .desSlideshow .nav {
display: none;
}

4. Call the plugin with options

<script language="javascript" type="text/javascript">
$(function() {
$("#desSlideshow1").desSlideshow({
autoplay: 'enable', // Enable auto play
slideshow_width: '800', // width
slideshow_height: '249',//  height
thumbnail_width: '200', // Thumbnail width
time_Interval: '4000', // Milliseconds
directory: 'images/' , // flash-on.gif and flashtext-bg.jpg directory
});
});
</script>

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.