Page 1 of 1
Phoca Premiere carousel swiper
Posted: 26 Jan 2019, 20:00
by jrjr
How do I change the color of the < > swiper arrows in the carousel?
Re: Phoca Premiere carousel swiper
Posted: 27 Jan 2019, 00:06
by christine
Hi,
These are background-images (SVG) in swiper.min.css:
Code: Select all
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
Maybe this could help you:
https://idangero.us/swiper/forum/#!/?sw ... on%20color > Change navigation arrow color.
There is an additional answer from an user:
You can just add CSS to override theirs. Make sure you load your CSS after their stylesheet. For example, I provided my own SVG's encoded in the CSS (same as they do it) and simply over rode theirs in my CSS
Kind regards
Christine
Re: Phoca Premiere carousel swiper
Posted: 27 Jan 2019, 03:18
by jrjr
Thanks for the links
I have read and read on this topic but how to change the color evades me.
I have tried these in custom.scss and recompiled but no change. I dont't know how to change svg
.swiper-button-next.swiper-button-white {
color:#000000 !important;
}
.swiper-button-white {
color:#000000 !important;
}
.swiper-button-next {
color:#000000 !important;
}
Re: Phoca Premiere carousel swiper
Posted: 27 Jan 2019, 13:04
by christine
Hi,
you know, it does not belong to phoca template. I Also tried ca. your codes above of course.
Try following to your custom.scss:
Code: Select all
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") !important;
}
.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E") !important;
}
temporary it works.
Kind regards
Christine
Re: Phoca Premiere carousel swiper
Posted: 27 Jan 2019, 15:42
by jrjr
"I Also tried ca. your codes above of course." - What does the ca. mean?
I entered your code from above in my custom.scss and recompiled. It did not change the color of the arrows.
However I had an idea and it worked...
I created my own arrow images and placed them on my server. I then entered the url of that image in your code above and success! My arrows are now black and I am able to change them by editing my own images.
Check it out @
http://site2.lakeshoreleather.com/
.swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("/images/Carousel/swiperarrowPrev.png") !important;
}
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("/images/Carousel/swiperarrowNext.png") !important;
}
I'm not sure what affect this has on site performance, probably takes a hit, but it does work.
Re: Phoca Premiere carousel swiper
Posted: 27 Jan 2019, 16:41
by christine
jrjr wrote: ↑27 Jan 2019, 15:42
"I Also tried ca. your codes above of course." - What does the ca. mean?
sorry, should be: approximately
I entered your code from above in my custom.scss and recompiled. It did not change the color of the arrows.
The Code itself was temporarily working! But:
However I had an idea and it worked...
I created my own arrow images and placed them on my server. I then entered the url of that image in your code above and success!
that's why I sent the link above > see the "additional answer". As I can't provide an image, the only possibility was, to change the code above from: ... 23ffffff to: 23000000 ...
The URL I toke from another thread.
I'm not sure what affect this has on site performance, probably takes a hit, but it does work.
I think, it's OK, as the Code is in the custom.scss. But keep it somewhere
Kind regards
Christine
Re: Phoca Premiere carousel swiper
Posted: 27 Jan 2019, 17:06
by jrjr
Thanks for the help.... again
Mark it solved if you like
Re: Phoca Premiere carousel swiper
Posted: 27 Jan 2019, 17:28
by christine
Thank you for your feedback and infos.
Kind regards
Christine