@trenton

Slick slider в галерее woocommerce, как листать верхний при клике на нижний?

Референс, надо чтобы как здесь: https://cargasm.com.ua/catalog/hyundai/h-1-2004-20...
В woocommerce я отключил flexslider, и скрыл основную галерею в виде figure.
Вместо этого дважды вывел галерею, чтобы сделать связанные слайдеры. Ничего хорошего из этого не вышло. С лайтбоксом в верхнем вышло, с объединением нет. В нижнем лайтбокс не нужен, и поэтому при клике оно переходит на страницу изображения. А надо, чтобы открывало картинку в верхнем большом слайдере.
Подскажите плз кто хорошо понимает, хотя бы в какую сторону думать. Может я вообще неправильно подхожу?
Но такая практика применяется, и образец по ссылке тоже сделан на слике, значит должно быть можно, это просто я только столкнулся.

jQuery
jQuery('.slider-big').each(function() {
  var slider = jQuery(this);
  slider.slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots:false,
  arrows: false,  
  driggable:false,
  prevArrow: "<span class='fa-arrow-left prev' alt='1'>",
  nextArrow: "<span class='fa-arrow-right next' alt='2'>",
  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: 2,
  slidesToScroll: 1,
  driggable:false, 
  dots: false,
  arrows:false,  
   prevArrow: "<span class='fa-arrow-left prev' alt='1'>",
  nextArrow: "<span class='fa-arrow-right next' alt='2'>",
  asNavFor: '.slider-big',
});
});

РНР
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', wc_get_gallery_image_html( $attachment_id ), $attachment_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
  }
  ?>
  </div>
  <?php 
}
 ?>
  <?php}
  • Вопрос задан
  • 28 просмотров
Решения вопроса 1
@dennis_d
стремлюсь к junior front-end developer
В документации SlickSlider имеется пример того что вам нужно, если я правильно понял задачу. Ваш вариант оформления - 'Slider Syncing' https://kenwheeler.github.io/slick/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы