Extremely Simple jQuery Slidershow Plugin - Dot Slider

Dot Slider is a simple and easy-to-use jQuery plugin that make it easier to create a clean image slideshow with pagination buttons.

How to use it:

1. Include jQuery library and jQuery Dot Slider on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/webwidget_slideshow_dot.js"></script>

2. The Html

<div id="demo1" class="webwidget_slideshow_dot">
<ul>
<li><a href="link1" title="Sky"><img src="images/slideshow_large_1.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
<li><a href="link2" title="Sea"><img src="images/slideshow_large_2.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
<li><a href="link3" title="Flower"><img src="images/slideshow_large_3.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
<li><a href="link4" title="Treelink4"><img src="images/slideshow_large_4.jpg" width="407" height="301" alt="slideshow_large"/></a></li>
</ul>
<div style="clear: both"></div>
</div>

3. The CSS

.webwidget_slideshow_dot {
padding: 0px;
margin: 0px;
position: relative;
font-family: Arial, Sans-Serif;
font-size: 13px;
}
.webwidget_slideshow_dot a {
text-decoration: none;
}
.webwidget_slideshow_dot a:hover {
text-decoration: underline;
}
.webwidget_slideshow_dot .slides_box {
padding: 0px;
margin: 0px;
overflow: hidden;
position: absolute;
}
.webwidget_slideshow_dot .title_thumb_box {
width: 100%;
position: absolute;
bottom: 0px;
}
.webwidget_slideshow_dot .title_thumb_box .title_box {
padding: 5px;
}
.webwidget_slideshow_dot .title_thumb_box .thumb_box {
text-align: center;
height: 25px;
}
.webwidget_slideshow_dot .title_thumb_box .thumb_box span {
margin-right: 5px;
margin-left: 5px;
}
.webwidget_slideshow_dot .title_thumb_box .thumb_box span img {
cursor: pointer;
}
.webwidget_slideshow_dot img {
padding: 0px;
margin: 0px;
border: none;
}
.webwidget_slideshow_dot ul {
padding: 0px;
margin: 0px;
position: absolute;
list-style: none;
}
.webwidget_slideshow_dot ul li {
padding: 0px;
margin: 0px;
float: left;
}
.webwidget_slideshow_dot ul li a {
display: block;
}

4. Call the plugin with options

<script language="javascript" type="text/javascript">
$(function() {
    $("#demo1").webwidget_slideshow_dot({
        slideshow_time_interval: '5000',
        slideshow_window_width: '200',
        slideshow_window_height: '200',
        slideshow_title_color: '#17CCCC',
        soldeshow_foreColor: '#000',
        directory: 'images/' // Icon image directory
    });
});
</script>

5. Options

• slideshow_time_interval: Image interval time (millisecond)
• slideshow_window_width: Slideshow window width(px)
• slideshow_window_height: Slideshow window height(px)
• slideshow_title_color: Title color
• directory: Icon image directory

---

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