6 months ago
Slideshow arrows on hover [The New Standard] This post is outdated
Hello!
Using the new standard theme I recently added arrows to the slideshow that only appear on hover, while at the same time pausing the autoslide. If anyone is interested in the code just write an answer and I'll post it!
Have in mind that I'm quite novice in the area of javascript, so my solution probably won't be the most elegant.
Demo: https://slideshowtest1337.myshopify.com
password: deapre
/Markus
Posts:
How do you add the slideshow arrows?
Posts:
Neat, I'd be interested in seeing the code for this. :)
Posts:
My way of doing this isn't necessarily the best way, or even a good way, but anyway here goes.
1. First of you must add the <div>s to the slideshow for the slide-prev/next and arrows. In index.liquid at row 9, inside the slideshowdiv add the following.
http://pastie.org/5558397
2. Then you must add this code to your shop.js at row 343 (assuming you haven't changed the file), which is after the initiation of the slideshow.
http://pastie.org/5558310
3. And last you must change some css. Add this code below to your css for the div's and then make the final edits for margin, padding etc. I used images for the boxes and arrows but if one prefers one could just use css instead.
http://pastie.org/5558373
I hope this makes any sense!