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

Question

我有一个问题要问光滑的滑块退伍军人：我想将我的点的自定义图像放在光滑的滑块上，但我想为我的滑块点使用不同的图像。所以例如我有 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                        }                    }                ]              });  

Answer 1

您可以将自定义图像 url 作为数据属性分配给幻灯片 div，然后在 slick init 上循环遍历您的点，获取自定义点图像 url 并通过幻灯片 id 将其渲染到 slick dot 中。

请注意，在我的示例中，我.slick-slide使用此数据属性在 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>