Phoca Premiere carousel swiper

[jrjr]

How do I change the color of the < > swiper arrows in the carousel?

[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

[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;
}

[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

[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.

[christine]

"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

[jrjr]

Thanks for the help.... again
Mark it solved if you like

[christine]

Thank you for your feedback and infos.

Kind regards
Christine