Slide Example 3:

Dom code:

<div id="Slide3" class="Auto_Widget" data-widget-type="Switchable" data-widget-config ="{autoplay:true,effect:'scrolly',
		duration:1000,interval:4000,activeClass:'active',circular:false,eventType:'mouse',lazyDataType:'img'}">
    <ul class="switchable-content">
        <li class=""><img alt="" src="assets/01.jpg"/></li>
        <li class="hidden "><img alt="" src="assets/02.jpg"/></li>
        <li class="hidden "><img alt="" src="assets/03.jpg"/></li>
        <li class="hidden "><img alt="" img-lazyload="assets/04.jpg" src="assets/loading.gif"/></li>
		<li class="hidden "><img alt="" img-lazyload="assets/05.jpg" src="assets/loading.gif"/></li>      
    </ul>
	<ul class="switchable-triggerBox">
		<li class="active"><img alt="" src="assets/01.jpg" width="134" height="52" /></li>
		<li class=""><img alt="" src="assets/02.jpg" width="134" height="52" /></li>
		<li class=""><img alt="" src="assets/03.jpg" width="134" height="52" /></li>
		<li class=""><img alt="" src="assets/04.jpg" width="134" height="52" /></li>
		<li class="last"><img alt="" src="assets/05.jpg" width="134" height="56" /></li>
	</ul>
</div>

Css code:

#Slide3 { position: relative; width: 680px; height: 290px; overflow: hidden; border:1px solid #000000;}
#Slide3 .switchable-triggerBox { position: absolute; top: 1px; right: 1px; z-index: 99;width:138px; }
#Slide3 .switchable-triggerBox li {
        float: left;
        width: 134px;
        height: 52px;
        line-height: 32px;
        margin-bottom: 1px;
        background-color: #000000;
        color: #ffffff;
        text-align: center;
        cursor: pointer;
		border:2px solid #cccccc

    }
#Slide3 .switchable-triggerBox li.last{
		margin:0; 
		height:56px;
	} 
#Slide3 .switchable-triggerBox li.active {
        color: #FFF;
        background-color: #505050;
        font-weight: bold;
		border-color:#f60;

    }
#Slide3 .switchable-content li { height: 290px; width: 680px; overflow: hidden; }
    /* for countdown plugin */
#Slide3 .switchable-triggerBox li,
#Slide3 .content {
        position: relative;
    }
#Slide3 .mask {
        position: absolute;
        right: 0;
        width: 18px;
        height: 18px;
        background-color: #FF9415;
        visibility: hidden
    }
#Slide3 .active .mask {
        visibility: visible
    }