Another little change from just CSS

I have recently been investigating the 'Swiper' slideshow to see if any improvements can be made, and have come up with a way of altering the pagination contrrols so that you do not see all the slides rush by between the current slide and the newly selected slide.

You can see the improvement in the above demonstration where you can select any slide using the pagination buttons and that slide will be the next visible slide.

This works in any direction.

I have also added a caption for each slide which scrolls into view shortly after the slide. Again this works in any direction.

Finally, I have added a stop/start button for the auto slideshow.

This is all done by using the Swiper controls but adding my own slideshow method in the background which is controlled using the Swiper on: {slideChange: function() {

In order to stop multiple slide selections, when the slide show is animating, I have also added a routine that covers the controls with a transparent <div> so that they are not selectable.