В настройке плавного карусельного отображения отображается только первый слайд - PullRequest
0 голосов
/ 21 октября 2019

Я пытаюсь иметь 2 карусели рядом. Мой «# beer-copy-slider» имеет «asNavFor:» для «# beer-image-slider». На левом слайдере будет показано первое изображение, но все остальные слайды, сработавшие на моем правом слайдере, будут отображаться с «opacity: 0» на «slick-slide».

* При установке fade на false на слайдере изображений отображаются все изображения,но мне нужно затухание для модуля

** Установка ползунка изображения в горизонтальное положение также устраняет проблему. Я могу обойти это, но все равно хотел бы знать, почему это происходит, если у кого-то есть понимание.

//Slick Init
$('#beer-image-slider').slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  draggable: false,
  arrows: false,
  fade: true,
  vertical: true,
  cssEase: 'ease-in-out',
  asNavFor: "#beer-copy-slider",

});
$('#beer-copy-slider').slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  draggable: true,
  arrows: true,
  fade: false,
  cssEase: 'ease-in-out',
  asNavFor: "#beer-image-slider",
  prevArrow: $('#beer-slick-left-arrow'),
  nextArrow: $('#beer-slick-right-arrow'),
  responsive: [{
    breakpoint: 767,
    settings: {
      fade: false,
    }
  }]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="simmzys-beer-slider background-image">
  <div class="slider-container grid-x">
    <div class="cell medium-6">
      <div id="beer-image-slider" class="image-container">
        <div class="">
          <img src="/wp-content/uploads/2019/10/crowlers.png" width="588">
        </div>
        <div class="">
          <img src="/wp-content/uploads/2019/10/crowlers.png" width="588">
        </div>
        <div class="">
          <img src="/wp-content/uploads/2019/10/crowlers.png" width="588">
        </div>
        <div class="">
          <img src="/wp-content/uploads/2019/10/crowlers.png" width="588">
        </div>
        <div class="">
          <img src="/wp-content/uploads/2019/10/crowlers.png" width="588">
        </div>
        <div class="">
          <img src="/wp-content/uploads/2019/10/crowlers.png" width="588">
        </div>
        <div class="">
          <img src="/wp-content/uploads/2019/10/crowlers.png" width="588">
        </div>
      </div>
      <div class="beer-counter-container">
        <p class="beer-counter show-for-mobile"></p>
      </div>
    </div>

    <div class="cell medium-6">
      <div class="copy-container">
        <div id="beer-copy-slider" class="copy-slider">
          <div class="">
            <h3>Beach Crusn' Blonde</h3>
            <p><strong>4.8% ABV | BLONDE ALE</strong></p>
            <p>Our Beach Cruisn’ Blonde is a pilsner malt focused blonde ale. It has a snap of bitterness up front that leads into a nice Pekko hop hint of lime, mint, cucumber, and mild noble spice. This smooth, citrus aftertaste makes the Cruisn’ light,
              crisp, and refreshing.</p>
          </div>
          <div class="">
            <h3>Tips Up IPA</h3>
            <p><strong>6.9% ABV | AMERICAN IPA</strong></p>
            <p>Surfs up, Tips Up. This American IPA features a firm but kind bitterness paired with big hop aroma. There are hints of grapefruit, coconut, and tropical fruit, making it light and refreshing. This beer is a solid west coaster that tastes even
              better with a beachside view.</p>
          </div>
          <div class="">
            <h3>Tide Pool Pale Ale</h3>
            <p><strong>6.0% ABV | AMERICAN PALE ALE</strong></p>
            <p>Clean but snappy, malty but hoppy, the Tide Pool Pale Ale does it all. This American ale has notes of fresh cut grass, candied lemon peel and under-ripe green papaya. It's well-rounded, tropical, and fruity -- the perfect summer beer.</p>
          </div>
          <div class="">
            <h3>Simmzy’s Porter</h3>
            <p><strong>5.9% ABV | AMERICAN PORTER</strong></p>
            <p>Simmzy's Porter is an American classic. With a toasty, roasty, and creamy texture, it's the ideal brunch beer. It's bold and refreshing, with both chocolate and vanilla notes shining through. Looking for perfectly smooth beer with a malty
              finish? You're in luck.</p>
          </div>
          <div class="">
            <h3>BBA Gnar Gnar Barleywine</h3>
            <p><strong>12.0% ABV | BARLEYWINE</strong></p>
            <p>Our BBA Gnar Gnar Barleywine isn't like other barleywines. It's English style, and aged in Buffalo Trace bourbon barrels. What's left is an intense, rich, and sweet beer, with vanilla and toffee tones.</p>
          </div>
          <div class="">
            <h3>Zwickle Tickle</h3>
            <p><strong>5.5% ABV | KELLERBIER/ZWICKELBIER</strong></p>
            <p>The Zwickle Tickle is sure to tickle your fancy. It's a full-bodied beer that tastes like the intersection of honey blonde and German Kölsch. It's crisp and structured, with an underlying grassy taste. A sharp finish is characteristic of its
              faint lemon peel tone.</p>
          </div>
          <div class="">
            <h3>Sweet Thing Honey Blonde Ale</h3>
            <p><strong>5.6% ABV | BLONDE ALE</strong></p>
            <p>Summer days should be filled with light, easy drinking. Our Sweet Thing Honey American Blonde Ale makes that possible. It's a bread-y beer with a sweetness supplied by locally produced honey. It's approachable, malt-oriented, and well-balanced
              -- so good that you'll be ordering another.</p>
          </div>
        </div>
        <div class="bttn-container flex-container align-justify">
          <p class="beer-counter"></p>
          <div class="beer-slick-bttns">
            <span id="beer-slick-left-arrow" class="left-arrow"><img src="/wp-content/uploads/2019/10/arrow-left.svg"></span>
            <span id="beer-slick-right-arrow" class="right-arrow"><img src="/wp-content/uploads/2019/10/arrow-right.svg"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
...