我可以为光滑滑块的每个自定义点使用不同的图像吗?
Can i use different images for each custom dots for my slick slider?
我有一个问题想问老滑的滑块:
我想将我的点的自定义图像放在光滑的滑块上,但我想使用不同的图像
我的滑块点。所以例如我有 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
}
}
]
});
您可以将自定义图像 url 作为数据属性分配给您的幻灯片 div,然后在 slick init 上循环遍历您的点,获取自定义点图像 url并通过 slide id 渲染成 slick dot。
请注意,在我的示例中,我使用此数据属性在 .slick-slide
div 中设置点图像...
data-dot-img="https://i.imgur.com/6X5GKWJ.png"
这是一个fiddle...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>
我有一个问题想问老滑的滑块:
我想将我的点的自定义图像放在光滑的滑块上,但我想使用不同的图像 我的滑块点。所以例如我有 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
}
}
]
});
您可以将自定义图像 url 作为数据属性分配给您的幻灯片 div,然后在 slick init 上循环遍历您的点,获取自定义点图像 url并通过 slide id 渲染成 slick dot。
请注意,在我的示例中,我使用此数据属性在 .slick-slide
div 中设置点图像...
data-dot-img="https://i.imgur.com/6X5GKWJ.png"
这是一个fiddle...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>