Tạo 1 button slider flatsome đẹp

Một số anh em thắc mắc về cái button slider tạo điểm nhấn xíu cho slider trong theme flatsome nhàm chán trước giờ , ok Hôm nay tớ chia sẽ cách làm nhé

Tạo button slider flatsome đẹp

Để dễ hình dung bạn xem qua hình mình đã làm cho dự án

Một điểm nhấn khác thường so với Slider của Flatsome đúng không nào , nếu bạn muốn xem thực tế bạn có thể xem qua demo tại đây https://farm.uxthemes.net/

Cách làm button slider flatsome đẹp

bạn chỉ cần đặt css nào vào css custom là xong nhé

.flickity-prev-next-button.previous {
    left: 90%;
}
 .flickity-prev-next-button {
    opacity: 1;
}
.slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button {
    margin-top: -43%;
}
 .slider-nav-circle .flickity-prev-next-button svg {
    border: 0;
    border-radius: 100%;
    background-color: #9a1b1f;
    border-radius: 0;
    color: white;
}

.flickity-prev-next-button.previous {

left: 90%;

}

.flickity-prev-next-button {

opacity: 1;

}

.slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button {

margin-top: -43%;

}

.slider-nav-circle .flickity-prev-next-button svg {

border: 0;

border-radius: 100%;

background-color: #9a1b1f;

border-radius: 0;

color: white;

}

Bạn có thể chỉnh các thông số left: 90% và margin-top: -43% cho phù hợp với width của slider của bạn

Bạn cũng có thể đặt slider của bạn trong 1 table nhớ đặt class cho table nhé ( ví dụ tớ đặt class cho table là .sanpham là ta có thể code css dạng sau )

.sanpham .flickity-prev-next-button.previous {
    left: 90%;
}
.sanpham .flickity-prev-next-button {
    opacity: 1;
}
.sanpham .slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button {
    margin-top: -43%;
}
 .sanpham .slider-nav-circle .flickity-prev-next-button svg {
    border: 0;
    border-radius: 100%;
    background-color: #9a1b1f;
    border-radius: 0;
    color: white;
}