Stylish Featured Content Slideshow Plugin - desSlideshow
File Size: | 565KB |
---|---|
Views Total: | 2413 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.