光滑的轮播淡入淡出设置仅显示第一张幻灯片

时间:2019-10-21 20:11:58

标签: slick.js

我正在尝试使用2个并排的轮播。我的“#beer-copy-slider”为“#beer-image-slider”设置了“ asNavFor:”。左滑块将显示第一张图片,但右滑块触发的所有其余幻灯片在“ slick-slide”上显示为“ opacity:0”。

*在“图像”滑块上将淡入淡出设置为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>

0 个答案:

没有答案