如何使光滑的滑块和光滑的灯箱与 woocommerce 中的产品库一起正常工作

问题描述

我删除了产品页面上的标准缩略图和图库，并粘贴了两个滑块（大和小）的产品图库代码。我还禁用了标准的 flex 滑块。

add_action( 'woocommerce_before_single_product_summary','wrapper_product_image_start',5 );
function wrapper_product_image_start() {
  ?>
  <div class="row">
    <div class="col-lg-6 order-md-2 order-0">
<?PHP 
 global $product;

$attachment_ids = $product->get_gallery_image_ids();

if ( $attachment_ids && $product->get_image_id() ) {?>
  <div class="slider-big">
  <?PHP  
  foreach ( $attachment_ids as $attachment_id ) {
    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html',wc_get_gallery_image_html( $attachment_id ),$attachment_id ); // PHPcs:disable wordpress.XSS.EscapeOutput.OutputNotEscaped
  }
  ?>
  </div>
  <?PHP 
}
          
  global $product;

$attachment_ids = $product->get_gallery_image_ids();

if ( $attachment_ids && $product->get_image_id() ) {?>
  <div class="slider-standart">
  <?PHP  
  foreach ( $attachment_ids as $attachment_id ) {
    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html',$attachment_id ); // PHPcs:disable wordpress.XSS.EscapeOutput.OutputNotEscaped
  }
  ?>
  </div>
  <?PHP 
}
 ?>
  <?PHP
}


// disable flexslider js
function flex_dequeue_script() {
    wp_dequeue_script( 'flexslider' );
}
add_action( 'wp_print_scripts','flex_dequeue_script',100 );

// disable zoom jquery js file
function zoom_dequeue_script() {
    wp_dequeue_script( 'zoom' );
}
add_action( 'wp_print_scripts','zoom_dequeue_script',100 );

// disable photoswipe js file
function photoswipe_dequeue_script() {
    wp_dequeue_script( 'photoswipe-ui-default' );
}
add_action( 'wp_print_scripts','photoswipe_dequeue_script',100 );

JS 部分。我只在大滑块上使用灯箱，一切都很好，但我不将它与小滑块一起使用，当我点击它时，它让我进入了这张图片的链接。但是我需要在大幻灯片上显示我在小幻灯片上单击的照片。点效果很好，但我需要点击一些东西。修复它的想法是什么？

jQuery('.slider-big').each(function() {
  var slider = jQuery(this);
  slider.slick({
  infinite: true,slidesToShow: 1,slidesToScroll: 1,dots:false,arrows: true,asNavFor: '.slider-standart',});
var sLightBox = jQuery(this);
  sLightBox.slickLightBox({
    src: 'src',itemSelector: '.woocommerce-product-gallery__image img',});
});

jQuery('.slider-standart').each(function() {
  var slider = jQuery(this);
  slider.slick({
  infinite: true,slidesToShow: 3,dots: false,asNavFor: '.slider-big',});

});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

jquery slick.js