Cách hover chuyển ảnh của thư viện ảnh sản phẩm cho website WordPress

5/5 - (1132 bình chọn)

Hướng dẫn cách khi hover vào ảnh của thư viện ảnh sản phẩm thì các ảnh bên trên di chuyển theo bằng code.

Hover chuyển ảnh sản phẩm của website

Các bạn vào đường dẫn:

Giao diện > sửa giao diện > function.php

Và dán đoạn code này vào là được:

function hover_slider_alowebtot(){;?>
 <script>
jQuery(function($) {
  var slidermain = $('.woocommerce-product-gallery__wrapper').flickity({"cellAlign": "center","wrapAround": true,"autoPlay": false,"prevNextButtons":true,"adaptiveHeight": true,"imagesLoaded": true,"lazyLoad": 1, "dragThreshold" : 15,"pageDots": false,"rightToLeft": false 
  });
  var slidernav = $('.product-thumbnails').flickity({
    asNavFor: '.product-gallery-slider',contain: true,pageDots: false,
  });
  slidernav.on( 'mouseover', '.col', function( event ) {
    var index = $( event.currentTarget ).index();
    slidermain.flickity( 'select', index );
  });
  });
</script>
<?php }
add_action('wp_footer','hover_slider_alowebtot',0);

Như vậy là đã hoàn thành rồi, các bạn ra hover vào các ảnh con bên dưới ảnh sản phẩm xem đã được chưa nhé.

tham khảo: pttuan410.com/cach-hover-chuyen-anh-gallery-cua-woocommerce-danh-cho-theme-flatsome/

Subscribe
Notify of
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả các bình luận
0
Bạn đang nghĩ gì? Hãy bình luận nhé <3x