Slide Example 1:

<div id="Slide1" class="Auto_Widget"  data-widget-type="Switchable" data-widget-config="{autoplay:true,effect:'scrollx',duration:1000,
interval:4000,activeClass:'active',circular:false,eventType:'click'}"> 
	<ol class="switchable-content">
		<li><img alt="" src="assets/01.jpg"/></li>
		<li><img alt="" src="assets/02.jpg"/></li>
		<li><img alt="" src="assets/03.jpg"/></li>
		<li><img alt="" src="assets/04.jpg"/></li>
		<li><img alt="" src="assets/05.jpg"/></li>   
	</ol>
	<ul class="switchable-triggerBox">
			<li class="active">1</li>
			<li class="">2</li>
			<li class="">3</li>
			<li class="">4</li>
			<li class="">5</li>
	</ul>
</div>

#Slide1 { position: relative; width: 540px; height: 290px; border: 1px solid #6ce26c; overflow: hidden; }
#Slide1 .switchable-triggerBox { position: absolute; bottom: 5px; right: 5px; z-index: 99; }
#Slide1 .switchable-triggerBox li {
        float: left;
        width: 16px;
        height: 16px;
        line-height: 16px;
        margin-left: 3px;
        background-color: #cffcd4;
        border: 1px solid #6ce26c;
        color: #00e31b;
        text-align: center;
        cursor: pointer;
    }
#Slide1 .switchable-triggerBox li.active {
        color: #FFF;
        background-color: #96e496;
        font-weight: bold;
    }
#Slide1 .switchable-content li { height: 290px; width: 540px; overflow: hidden; }
    /* for countdown plugin */
#Slide1 .switchable-triggerBox li,
#Slide1 .content {
        position: relative;
    }
#Slide1 .mask {
        position: absolute;
        right: 0;
        width: 18px;
        height: 18px;
        background-color: #FF9415;
        visibility: hidden
    }
#Slide1 .active .mask {
        visibility: visible
    }