Phong cách
Tính năng
Theo cột

Tạo button slider flatsome đẹp

1 số anh em nghi vấn về mẫu button slider tạo điểm đặc sắc xíu cho slider trong theme flatsome nhàm chán trước giờ , ok hôm nay tớ chia sẽ bí quyết làm nhé

Tạo button slider flatsome đẹp

Để dễ nghĩ đến bạn xem qua hình mình đã khiến Dự án

Tạo button slider flatsome đẹp

Tạo button slider flatsome đẹp

1 điểm nổi bật kì dị so với Slider của Flatsome đúng ko nào , nếu bạn muốn xem thực tế bạn có thể xem qua demo tại đây https://farm.chowebs.com

cách 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 tham số left: 90%margin-top: -43% cho phù hợp sở hữu width của slider của bạn

Bạn cũng sở hữu thể đặt slider của bạn trong một table nhớ đặt class cho table nhé ( tỉ dụ tớ đặt class cho table là .sanpham là ta sở hữu 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


Cấm dùng các template được chia sẻ trên blog với mục đích thương mại !

THÔNG TIN TÁC GIẢ & DỊCH VỤ:

  • Biên tập nội dung: Trần Nhật Sinh
  • Địa chỉ: Ân Đức, Hoài Ân, Bình Định
  • Nếu bạn muốn đóng ghóp giao diện hoặc yêu cầu gỡ hãy liên hệ với tôi
    + Email : transinh085@gmail.com
    + Zalo: +84 387 913 347 (SMS)
  • Dịch vụ:
    + Sửa lỗi, nâng cấp template
    + Tối ưu giao diện
    + Cài đặt giao diện
0 Nhận xét