2292 lượt xem

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

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.

cai dat san pham co bien the flatsome01
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/