我可以为光滑滑块的每个自定义点使用不同的图像吗？
我有一个问题要问光滑的滑块退伍军人：
我想将我的点的自定义图像放在光滑的滑块上，但我想为我的滑块点使用不同的图像。所以例如我有 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
}
}
]
});
ibeautiful1回答
-
慕桂英3389331
您可以将自定义图像 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 optionsconst options = { slidesToShow: 1, slidesToScroll: 1, dots: true, arrows: false, adaptiveHeight: true, autoplay: true};// my slick slider as const objectconst 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>
随时随地看视频慕课网APP
相关分类
JavaScript