d
Topic
Posts:
7
November 23, 2012

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

i
Replies
Posts:
2
December 12, 2012

How do you add the slideshow arrows?

Conny Shopify Merchant parsnipsandpears.co.uk
Posts:
14
December 12, 2012

Neat, I'd be interested in seeing the code for this. :) 

http://slightlyeccentric.com | http://twitter.com/theodddreamer
Posts:
7
Last edited December 20, 2012

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! 

David Build A Business Competitor www.piecesofthere.com
Posts:
11
June 13, 2013

Did anyone ever figure out how to add arrows when slideshow is hovered?

Log in or sign up for an account to reply.

This thread has been closed! You will not be able to reply.