如何解决如何使光滑的滑块和光滑的灯箱与 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 举报,一经查实,本站将立刻删除。