Sitemap

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

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.

Press enter or click to view image in full size

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

Press enter or click to view image in full size

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

--

--