This is my first post on stackoverflow 🙂
What I have is:
http://codepen.io/vicfdes/pen/VYXZYL/
<div class="image-container" style="background: url('http://placehold.it/250/ccc/000/&text=back') no-repeat center;">
<img src="http://placehold.it/250/333/ccc/&text=front" alt="" id="" class="cs-img-front"/>
</div>
The above HTML code is the format for the thumbnails (That I currently have, I can change that)
I am using the background image in the div as I want that Image to be visible on hover. This part is working as you can see on codepen.
What I need to do is, when a user clicks the thumb, the Image (cs-slider-left-img) needs to be replaced with the img of the thumb and the (cs-slider-right-img) needs to be replaced with the image in the background of the div.
Also need a way (logic) to make the two orange arrow buttons work (for the cs-slider), such that It moves to the next/prev images wrt to the current image(thumb).
Pls refer codepen to see where these 2 images are.
Also the thumbs will be dynamically generated based on how many posts are under that category (WordPress) so there is no way I can know how many thumbs would be there, so I would need a generic function that would work with any number of thumbs.
Thanks Mates
