Custom Thumbnail Pagination on SlidesJS:

description.md

Custom Thumbnails on Slidesjs Pagination

Out of the box, SlidesJS does not provide the ability to add custom pagination. Although I love slides (it's my go-to for simple sliders), on a recent project I needed to ability to have small thumbnails for pagination.

With the simple addition of two attributes to the images and code the loaded callback for Slides, thumbnail pagination is possible (and simple).

A Pen by Kopepasah on CodePen.

License.

index.html

<div id="slides-wrap">
	<div id="slides">
		<img src="http://placehold.it/600x400" data-image-index="0" data-image-thumb="http://placehold.it/80x80">
		<img src="http://placehold.it/600x400" data-image-index="1" data-image-thumb="http://placehold.it/80x80">
		<img src="http://placehold.it/600x400" data-image-index="2" data-image-thumb="http://placehold.it/80x80">
		<img src="http://placehold.it/600x400" data-image-index="3" data-image-thumb="http://placehold.it/80x80">
		<img src="http://placehold.it/600x400" data-image-index="4" data-image-thumb="http://placehold.it/80x80">
	</div>
</div>

loaded.js

$( '.slidesjs-pagination-item' ).each( function( index, element ) {
	var target = $( element ).find( 'a' ),
		src    = $( '#slides [data-image-index=' + index + ']' ).data( 'image-thumb' );

	$( target ).html( '<img src="' + src + '" alt="" />' );
});

script.js

(function( $ ) {
	$( "#slides" ).slidesjs({
		width:  600,
		height: 400,
		navigation: {
			active: false,
		},
		callback: {
			loaded: function(number) {
				$( '.slidesjs-pagination-item' ).each( function( index, element ) {
					var target = $( element ).find( 'a' ),
						src    = $( '#slides [data-image-index=' + index + ']' ).data( 'image-thumb' );

					$( target ).html( '<img src="' + src + '" alt="" />' );
				});
			},
		},
	});
})( jQuery );