swiper

Open full view…

Change navigation arrow color?

cdrjones
Mon, 16 Jul 2018 19:39:36 GMT

When adding navigation using the `swiper-button-next` and `swiper-button-prev` classes from the demos, is there any way to change the color of the arrows generated? If not, is there an easy way to replace the auto-generated arrows with my own navigation elements? Using custom classes doesn't properly position the navigation arrows. Using the default classes on my own elements produces doubled navigation.

gho5t7m
Sat, 21 Jul 2018 04:44:33 GMT

You can choose for swiper navigation your own classes with your design by: *SWIPER OPTIONS:* navigation: { nextEl: content.find('.your-next-class'), prevEl: content.find('.your-prev-class'), }, *CSS:* .your-next-class{ it's time to work miracles } .your-prev-class{ it's time to work miracles }

chriscorrigan
Thu, 04 Oct 2018 19:46:59 GMT

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.