$( '#slider' ).sliderPro({
width: 1920,
height: 1080,
arrows: true,
buttons: false,
waitForLayers: true,
thumbnailWidth: 200,
thumbnailHeight: 100,
thumbnailPointer: true,
autoplay: false,
autoScaleLayers: false,
breakpoints: {
1024: {
thumbnailWidth: 120,
thumbnailHeight: 60
},
768: {
thumbnailWidth: 100,
thumbnailHeight: 50
}
}
});
<div id="slider" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide"><img class="img-responsive" src="images/slide1.jpg" data-thumb="images/slide1.jpg" /></div>
<div class="sp-slide"><img class="img-responsive" src="images/slide2.jpg" data-thumb="images/slide2.jpg" /></div>
<div class="sp-slide"><img class="img-responsive" src="images/slide3.jpg" data-thumb="images/slide3.jpg" /></div>
<div class="sp-slide"><img class="img-responsive" src="images/slide4.jpg" data-thumb="images/slide4.jpg" /></div>
<div class="sp-slide"><img class="img-responsive" src="images/slide5.jpg" data-thumb="images/slide5.jpg" /></div>
<div class="sp-slide"><img class="img-responsive" src="images/slide6.jpg" data-thumb="images/slide6.jpg" /></div>
<div class="sp-slide"><img class="img-responsive" src="images/slide7.jpg" data-thumb="images/slide7.jpg" /></div>
<div class="sp-slide"><img class="img-responsive" src="images/slide8.jpg" data-thumb="images/slide8.jpg" /></div>
<div class="sp-slide"><img class="img-responsive" src="images/slide9.jpg" data-thumb="images/slide9.jpg" /></div>
<div class="sp-slide"><img class="img-responsive" src="images/slide10.jpg" data-thumb="images/slide10.jpg" /></div>
</div>
<div class="sp-thumbnails">
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img src="images/slide1.jpg" />
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img src="images/slide2.jpg" />
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img src="images/slide3.jpg" />
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img src="images/slide4.jpg" />
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img src="images/slide5.jpg" />
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img src="images/slide6.jpg" />
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img src="images/slide7.jpg" />
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img src="images/slide8.jpg" />
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img src="images/slide9.jpg" />
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
<img src="images/slide10.jpg" />
</div>
</div>
</div>
</div>
