Đôi khi bạn vào trang sản phẩm, nhất là sản phẩm có hình quá dài, bạn chọn vào đó tự nhiên hình trượt từ dưới lên.
Hôm nay mình sẽ chia sẻ với các bạn cách làm
Slide ảnh sản phẩm khi chọn ảnh trong wordpress
Để dễ hình dung các bạn thử click vào link này Website làm đẹp Spa , thẩm mỹ viện theme Flatsome
và rê chuột vào ảnh bạn sẽ thấy ảnh trượt từ dưới lên rất đẹp phải không nào!
CÓ THỂ BẠN QUAN TÂM

OK chúng ta hãy làm điều này
Code css Hình ảnh sản phẩm slide khi chọn ảnh trong wordpress
trong css tùy chỉnh dán đoạn mã sau
.single-product .wooc Commerce-product-gallery { lề-top: 0; chiều cao: 1000px; tràn: ẩn; } .wooc Commerce-product-gallery { chuyển đổi: độ mờ 0,5 giây dễ dàng vào ra 0 giây; đường viền: 1px solid #ececec; bán kính đường viền: 4px; lề trên: 20px; } .single-product .wooc Commerce-product-gallery img { max-width: 100%; thời lượng chuyển tiếp: 5s; chiều rộng: 100%; quá trình chuyển đổi: dễ dàng tất cả 5 giây; biến đổi: translateZ(0); ký quỹ: 0 tự động; } .single-product .woocommerce-product-gallery:hover img { biến đổi: translate(0,-50%); quá trình chuyển đổi thời gian chức năng: tuyến tính; thời lượng chuyển tiếp: 5s; }
Đầu tiên 2 3 4 5 6 7 số 8 9 mười 11 thứ mười hai 13 14 15 16 17 18 19 20 21 22 23 24 | .single-product .woocommerce-product-gallery { lề trên: 0; Cao: 1000px; tràn ra: ẩn giấu; } .wooc Commerce-product-gallery { chuyển tiếp: độ mờ đục 0,5 giây dễ dàng ra vào 0s; biên giới: 1px chất rắn #ececec; bán kính đường viền: 4px; lề trên: 20px; } .single-product .woocommerce-product-gallery img { chiều rộng tối đa: 100%; thời gian chuyển đổi: 5s; bề rộng: 100%; chuyển tiếp: xoa dịu tất cả các 5s; biến đổi: dịchZ(0); lề: 0 Tự động; } .single-product .woocommerce-product-gallery:hover img { biến đổi: dịch(0,-50%); chức năng thời gian chuyển đổi: tuyến tính; thời gian chuyển đổi: 5s; } |
Xong rồi, thật đơn giản phải không nào, chúc các bạn thành công!
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!