fx: 'fade',
pager:
'.nav' ,
slideExpr:
'img' ,
speed:
'fast' ,
pagerAnchorBuilder:
function (idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>' ;
},
pagerAnchorBuilder:
function(idx, el) {
return '<a href="#" title="Slides"></a>';
},
});
});
/* for image with bots has pager */
.nav
{ z-index: 50; position: absolute; bottom:-5px;right: 35px ;float:right;}
.nav
a { height:8px; padding: 3px 9px; background: #cff; text-decoration: none ; display:inline-block; background:url("../../../_layouts/CarouselWebpart/Images/gr.png") no-repeat;}
.nav
a:focus { outline: none; }
.nav
a:last-child{
margin-right:0;
}
.nav
a.activeSlide
{
height:8px; padding: 3px 9px;
background:url("../../../_layouts/CarouselWebpart/Images/bl.png") no-repeat;
}
/* for thumb nail
.nav { z-index: 50; position: absolute; bottom:-24px;right: 35px ;float:right;}
.nav li { width: 50px; float: left; margin: 8px; list-style: none }
.nav a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; }
.nav li.activeSlide a { background: #212121;}
.nav a:focus { outline: none; }
<
div class="slideshow">
<
div class="nav">
</
div>
<img src="Images/firstimg.png" alt="one" />
<img src="Images/fiveimg.png" alt="onfe"/>
<img src="Images/fourimg.png" alt="onte" />
<div class="nav"></div>