我可以为光滑的滑块的每个自定义点使用不同的图像吗？

debugcn 发表于 Dev

厨师

我对滑滑的资深人士有一个疑问：

我想在圆滑的滑块上放置点的自定义图像，但我想在滑块的点上使用不同的图像。因此，例如，我有5张幻灯片，并且我希望我的5个点具有单独的图像，因此有5个不同的图像（如果我在活动状态和非活动状态使用不同的图像，则为10个）

有人可以建议我这个方法吗？我想在这里尝试一下，但是后来我意识到，每个点仅适用于相同的图像：

 $('.productslider').slick({
                lazyLoad: 'ondemand',
                dots: true,
                customPaging : function(slider, i) {
                    return '<a href="#"><img src="images/realmix/products/freshness_energy_active.png" /><img src="images/realmix/products/freshness_energy_active.png" /></a>';
                },
                speed: 300,
                slidesToShow: 1,
                slidesToScroll: 1,
                adaptiveHeight: true,
                infinite: true,
                responsive: [
                    {
                        breakpoint: 400,
                        settings: {
                            mobileFirst: true,
                            centerMode: true,
                            centerPadding: '10px',
                            slidesToShow: 1,
                            slidesToScroll: 1,
                            infinite: true,
                            adaptiveHeight: true,
                            dots: true

                        }
                    }
                ]
              });

约什本

您可以为幻灯片div分配一个自定义图像url作为数据属性，然后在slick初始化上循环遍历各个点，抓取该自定义点图像url并通过幻灯片id将其渲染为slick点。

请注意，在我的示例中，我正在.slick-slide使用此data属性在div中设置点图像...

data-dot-img="https://i.imgur.com/6X5GKWJ.png"

这是一个小提琴... https://jsfiddle.net/joshmoto/fxy7gudv/

请参阅下面的工作示例...

// my slick slider options
const options = {
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: true,
  arrows: false,
  adaptiveHeight: true,
  autoplay: true
};

// my slick slider as const object
const mySlider = $('.slider').on('init', function(slick) {

  // set this slider as const for use in set time out
  const slider = this;
    
  // slight delay so init completes render
  setTimeout(function() {

    // dot buttons
    let dots = $('.slick-dots > LI > BUTTON', slider);

    // each dot button function
    $.each(dots, function(i,e) {

      // slide id
      let slide_id = $(this).attr('aria-controls');
      
      // custom dot image
      let dot_img = $('#'+slide_id).data('dot-img');
      
      $(this).html('<img src="' + dot_img + '" alt="" />');

    });

  }, 100);


}).slick(options);

body {
  margin: 0;
  padding: 20px;
}

.slider .slick-slide > A {
  display: block;
  position: relative;
  height: 132px;
  width: 100%;
}

.slider .slick-slide > A > IMG {
  position: absolute;
  width: 100%;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.slider .slick-dots {
  bottom: -37.5px;
}

.slider .slick-dots LI {
  width: 75px;
  height: 75px;
  opacity: .8;
}

.slider .slick-dots LI.slick-active {
  opacity: 1;
}

.slider .slick-dots LI.slick-active BUTTON,
.slider .slick-dots LI:hover BUTTON {
  opacity: 1;
  transform: scale(1,1);
}

.slider .slick-dots LI BUTTON {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  padding: 0;
  transition: all .5s ease;
  transform: scale(.75,.75);
}

.slider .slick-dots LI BUTTON IMG {
  display: block;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.slider .slick-dots LI BUTTON:before {
  display: block;
  position: relative;
  content: '';
  width: 100%;
  padding-top: 100%;
  height: auto;
}

<div class="slider">
  <div data-dot-img="https://i.imgur.com/6JplNl6.png">
    <a href="https://i.imgur.com/q5Y5RCH.png">
      <img src="https://i.imgur.com/q5Y5RCH.png" alt="" />
    </a>
  </div>
  <div data-dot-img="https://i.imgur.com/6X5GKWJ.png">
    <a href="https://i.imgur.com/8HjXPXD.png">
      <img src="https://i.imgur.com/8HjXPXD.png" alt="" />
    </a>
  </div>
  <div data-dot-img="https://i.imgur.com/SefTwI1.png">
    <a href="https://i.imgur.com/vUDcfcy.png">
      <img src="https://i.imgur.com/vUDcfcy.png" alt="" />
    </a>
  </div>
  <div data-dot-img="https://i.imgur.com/IqLrd0o.png">
    <a href="https://i.imgur.com/okTDHas.png">
      <img src="https://i.imgur.com/okTDHas.png" alt="" />
    </a>
  </div>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。