Hi,
For a m
obile site, I'm looking for a smooth infinite looping carousel with clickable thumbnails.
Currently, one page is displaying five books with a description of their content.
On the top of the page, are clickable thumbnails of the covers, inside a scrollable <div> element.
When a visitor clicks on a thumbnail, he jumps to the details (using # anchors).
On a smartphone, the scrollable div can display above 3 covers, so that there is a risk that the visitor misses the two last ones. Hence the idea to smoothly move the thumbnails horizontally, so that all covers are displayed, and seamless looping to the beginning.
The closest demo from the kind of carousel I'm looking for is this pure CSS one:
https://css-tricks.com/infinite-all-css-scrolling-slideshow/
However it uses a background containing all thumbnails, whilst what I'm looking at is some code where I can output the pictures automatically using the Ditto snippet.
Furthermore,
the pictures must allow jumping to page sections when clicked and the picture container should
still allow manual scrolling.
The page is already calling jQuery.
Does someone have some lightweight code to suggest, either pure CSS or using jQuery?
Thanks.
