Tạo nút trượt phẳng đẹp

Một số bạn thắc mắc về nút trượt tạo điểm nhấn nho nhỏ cho thanh trượt trong các theme flatsome nhàm chán trước đây, ok Hôm nay mình sẽ chia sẻ cách làm.

Để dễ hình dung các bạn có thể xem hình mình làm cho dự án

Một điểm nhấn khác lạ so với Slider của Flatsome phải không, nếu bạn muốn xem thực tế có thể xem demo tại đây https://farm.chowebs.com

CÓ THỂ BẠN QUAN TÂM

Cách làm nút trượt phẳng đẹp

Bạn chỉ cần đặt bất kỳ css nào trong css tùy chỉnh và bạn đã hoàn tất

</p> <p>.flickity-prev-next-button.previous { left: 90%; } .flickity-prev-next-button { độ mờ: 1; } .slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button { margin-top: -43%; } .slider-nav-circle .flickity-prev-next-button svg { đường viền: 0; bán kính đường viền: 100%; màu nền: #9a1b1f; bán kính đường viền: 0; màu trắng; }

.flickity-prev-next-button.previous {

bên trái: 90%;

}

.flickity-prev-next-button {

độ mờ đục: Đầu tiên;

}

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

lề trên: -43%;

}

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

ranh giới: 0;

bán kính đường viền: 100%;

màu nền: #9a1b1f;

bán kính đường viền: 0;

màu sắc: trắng;

}

Bạn có thể điều chỉnh các thông số còn lại: 90% Và lề trên: -43% phù hợp với chiều rộng thanh trượt của bạn

Bạn cũng có thể đặt thanh trượt của mình trong một bảng, nhớ đặt lớp cho bảng (ví dụ mình đặt lớp cho bảng là .sanpham để chúng ta code css sau)

</p> <p>.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; bán kính đường viền: 100%; màu nền: #9a1b1f; bán kính đường viền: 0; màu trắng; }

.sanpham .flickity-prev-next-button.previous {

bên trái: 90%;

}

.sanpham .flickity-prev-next-button {

độ mờ đục: Đầu tiên;

}

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

lề trên: -43%;

}

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

ranh giới: 0;

bán kính đường viền: 100%;

màu nền: #9a1b1f;

bán kính đường viền: 0;

màu sắc: trắng;

}

Lưu lại là xong

Chúc may mắn

Điểm 4.9/5 – (Có 11 lượt bình chọn)

Bài viết được viết bởi Flatsome.xyz và được đăng ký bản quyền tại Trạng thái bảo vệ DMCA
– Ghi rõ nguồn bài viết khi bạn đăng lại bài viết này!
– Tôn trọng người khác tức là bạn đang tôn trọng chính mình!

Wordpress

Tạo nút trượt phẳng đẹp – FLATSOME