d
Topic
Posts:
4
10 months ago

Scroll down arrow over hero slide-show images

hello,

I'd like to add a simple 'down arrow head' to my hero slide show carousel in the Brooklyn theme. 

My users aren't scrolling and I need to let them see that they can. 

Please can you help me do this. 

Marc

i
Replies
Posts:
3
2 months ago

Same question here. Anything?

Posts:
3
9 days ago

yes, this would be helpful --- I would like this too

tim Member trezoro.co
Posts:
1570
9 days ago

Hi guys,

paste this code to the bottom of the theme.scss.liquid Asset:

/* --tim: add an animated down arrow to the bottom of slideshow */
div#shopify-section-slideshow:before {
    content: "\21e3";
    position: absolute;
    display: block;
    z-index: 34560;
    bottom: 20px;
    left: 48%;
    font-size: 2em;
    border-radius: 1em;
    font-weight: bold;
  
    border: 3px solid gray;
    padding: 0.1em 0.1em 0;
    
    animation-name: color_change;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes color_change {
    0%  { color: gray;  bottom:20px;}
    10% { color: black; bottom:10px;}
    20% { color: gray;  bottom:20px;}
    100%{ color: gray;  bottom:20px;}
}

 

Want me to tweak a theme for you? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)