More Categories

Theme images by Storman. Powered by Blogger.

Wednesday, January 18, 2023

Tạo button slider flatsome đẹp

1 số anh em nghi vấn về loại button slider tạo điểm nổi bật xíu cho slider trong theme flatsome nhàm chán trước giờ , ok bữa nay tớ chia sẽ phương pháp khiến nhé

Tạo button slider flatsome đẹp

Để dễ mường tưởng bạn xem qua hình mình đã làm Công trình

Tạo button slider flatsome đẹp

Tạo button slider flatsome đẹp

1 điểm nhấn dị kì so có Slider của Flatsome đúng không nào , nếu bạn muốn xem thực tiễn bạn sở hữu thể xem qua demo tại đây https://farm.chowebs.com

phương pháp làm cho 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;

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

Bạn cũng sở hữu thể đặt slider của bạn trong 1 table nhớ đặt class cho table nhé ( tỉ 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;

Bạn chỉ cần lưu lại là xong

Chúc bạn thành công

theo : https://flatsome.xyz/tao-button-slider-flatsome-dep.html

0 on: "Tạo button slider flatsome đẹp"