Swiperjs de Prev/Next Buttonları Nasıl Değiştirlir ?

Alper Bayram
Mar 27, 2022

--

Herkese merhaba bu yazı da Carousel/Slider oluşturmak için kullanılan swiperjs paketindeki ileri ve geri buttonlarını css ile değiştireceğiz.

Defaul olarak Carousel ileri/geri butonları aşağıdaki gibi gözükmektedir.

İlk olarak dört adet fotograf seçtim ve slider içerisine aşağıdaki gibi yerleştirdim. Sabit olan navigation ile classNameler üzerinden değiştirmeler yapacağız peki bu ileri/geri iconlarını değiştirmek için hangi classnameleri yazacağız.

Bunun için .swiper-button-next ve .swiper-button-prev classNamelerini kullanarak değişikliklerimizi gerçekleştireceğiz css ile ne yapmak istediğiniz size kalmış benim bu yazıda yapacağım next/prev iconlarını değiştirmek olacak.

yukarıdaki gibi değişikliğimi uyguluyorum.

Sonuç olarak ileri ve geri butonlarımız özelleştirdik.

Okuduğunuz için teşekkürler. iyi çalışmalar.✅

--

--