Advance Layer Slider Navigation Arrows - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
December 15, 2022 at 11:06 pm #1376309

erictuvel
Participant

I am using the Advanced Layer slider element on my development homepage and I want to modify the Navigation arrows but I don’t see any settings to change the style of these. Does this have to be done via custom CSS? Do you have some documentation on how to customize the arrows?

I can provide a screenshot if necessary.

December 16, 2022 at 7:09 am #1376351
Nikko
Inactive Moderator
Hi Eric,

There’s no option for layerslider to change the navigation arrows however you can change it via CSS:
```
#top .avia-layerslider .ls-nav-prev {
  background: url(https://website.com/wp-content/uploads/2022/12/previous.png) center center no-repeat;
}

#top .avia-layerslider .ls-nav-next {
  background: url(https://website.com/wp-content/uploads/2022/12/next.png) center center no-repeat;
}
```
Just change the url values, also the default height and width is 60px x 60px.
Hope this helps.

Best regards,
Nikko
December 20, 2022 at 5:47 pm #1376913

erictuvel
Participant

Hi, I tried this and it is displaying BOTH arrows, the one I uploaded and changed via CSS and the default. So now they overlap. Can you please advise?

Also, is there a way to disable the Hover effect of shrinking the arrows when you mouse over the arrow? We don’t like the shrinking/animation effect that compresses the shape of the arrow.

You can see the issue here:

Homepage

December 22, 2022 at 8:49 am #1377072
Nikko
Inactive Moderator
Hi erictuvel,

Please try to add this CSS code as well:
```
#top .avia-layerslider .ls-nav-prev:before, 
#top .avia-layerslider .ls-nav-prev:after, 
#top .avia-layerslider .ls-nav-next:before, 
#top .avia-layerslider .ls-nav-next:after {
    display: none;
}

#top .avia-layerslider .ls-nav-prev:hover, 
#top .avia-layerslider .ls-nav-next:hover {
    transform: scale(1);
}
```
Hope it helps.

Best regards,
Nikko
December 22, 2022 at 7:11 pm #1377140

erictuvel
Participant

Hi,

I just tried that and it doesn’t look correct. Can you please take a look and provide more help. I can provide a screenshot as well but there is not way to upload or place images into the posts here.

Homepage

December 23, 2022 at 8:10 pm #1377268
Mike
Moderator
Hi,
Thank you for the link to your site when I check your slider the arrow background image is 200px square but the space is only 60px so the arrow looks wrong:

please try adding background-size: contain; to your rules like this:
```
#top .avia-layerslider .ls-nav-prev {
  background: url(/wp-content/uploads/2022/12/previous.png) center center no-repeat;
  background-size: contain;
}

#top .avia-layerslider .ls-nav-next {
  background: url(/wp-content/uploads/2022/12/next.png) center center no-repeat;
  background-size: contain;
}
```
After applying the css, please clear your browser cache and check.
This is the expected results:

Best regards,
Mike
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.