我正在创建类似于以下Codepen的Slick Sliders：https://codepen.io/StephenFlannery/pen/pbzOgg
只有一个滑块时，一切工作都很好，但是我需要有多个滑块，并且每个目标都单独定位，但是由于某些原因，只有页面上的最后一个滑块可以正常工作。前两个滑块不启动。
这是我在哪里的Codepen：https://codepen.io/Bruggedesign/pen/BayoWeo
var sliderRowIndex = 0;
var time = 6
var $circle,
$sliderRow,
$actionContent,
$actionImages,
$pausePlay,
$dots,
isPause,
tick,
percentTime
$sliderRow = $('.slider-row')
$sliderRow.each(function() {
sliderRowIndex++
$(this).attr('slider-row', sliderRowIndex)
$actionImages = $('.action-slider', this)
$actionContent = $('.action-content-slider', this)
$pausePlay = $('.pause-play', this)
$dots = $('.slick-dots button', this)
$circle = $('circle.progress', this)
$actionImages.slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true
})
$actionContent.slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows: false,
fade: true,
speed: 1000,
asNavFor: $actionImages
})
function startProgressbar() {
resetProgressbar()
percentTime = 0
isPause = false
tick = setInterval(interval, 10);
}
function interval() {
if(isPause === false) {
percentTime += 1 / (time+0.1);
$circle.css({
'stroke-dashoffset': percentTime
});
if(percentTime >= 156)
{
$actionContent.slick('slickNext');
startProgressbar();
}
}
}
$pausePlay.on('click', function() {
if($(this).attr('data-click-state') == 1) {
$(this).attr('data-click-state', 0)
isPause = false
} else {
$(this).attr('data-click-state', 1)
isPause = true
}
});
$dots.click(function() {
startProgressbar();
});
function resetProgressbar() {
$circle.css({
'stroke-dashoffset': 0
});
clearTimeout(tick);
}
startProgressbar();
})
<div class="row no-gutters mt-3 slider-row">
<div class="col-12 col-lg-7">
<div class="action-slider">
<img src="/images/meet-players-1.jpg">
<img src="/images/meet-players-2.jpg">
<img src="/images/meet-players-3.jpg">
<img src="/images/meet-players-4.jpg">
</div>
</div>
<div class="col-12 col-lg-5">
<div class="action-content-slider">
<div>
<div class="content-wrap">
<p class="p slide-title">Meet Your Favorite Players</p>
<h3 class="h3">NFLPA VIP PARTY</h3>
</div>
</div>
<div>
<div class="content-wrap">
<p class="p slide-title">Meet Your Favorite Players</p>
<h3 class="h3">SUPER BOWL</h3>
</div>
</div>
<div>
<div class="content-wrap">
<p class="p slide-title">Meet Your Favorite Players</p>
<h3 class="h3">SUPER BOWL</h3>
</div>
</div>
<div>
<div class="content-wrap">
<p class="p slide-title">Meet Your Favorite Players</p>
<h3 class="h3">NFLPA VIP PARTY</h3>
</div>
</div>
</div>
<div class="slider-control">
<svg class="slider-progress-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<title>slider-progress</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<circle class="progress" cx="26" cy="26" r="24" fill="none" stroke="#ffffff" stroke-miterlimit="10" stroke-width="3"/>
<circle cx="26" cy="26" r="25" fill="none" stroke="#ffffff" opacity="0.5" stroke-miterlimit="10" stroke-width="1"/>
</g>
</g>
</svg>
<button class="pause-play">
<img src="/images/pause-icon.svg" height="11" width="11">
</button>
</div>
</div>
</div>
<div class="row no-gutters mt-3 slider-row">
<div class="col-12 col-lg-7">
<div class="action-slider">
<img src="/images/vip-events-1.jpg">
<img src="/images/vip-events-2.jpg">
<img src="/images/vip-events-3.jpg">
<img src="/images/vip-events-4.jpg">
</div>
</div>
<div class="col-12 col-lg-5">
<div class="action-content-slider">
<div>
<div class="content-wrap">
<p class="p slide-title">VIP NFL Events</p>
<h3 class="h3">ROOKIE PREMIERE</h3>
</div>
</div>
<div>
<div class="content-wrap">
<p class="p slide-title">VIP NFL Events</p>
<h3 class="h3">NFLPA VIP PARTY</h3>
</div>
</div>
<div>
<div class="content-wrap">
<p class="p slide-title">VIP NFL Events</p>
<h3 class="h3">NFLPA VIP PARTY</h3>
</div>
</div>
<div>
<div class="content-wrap">
<p class="p slide-title">VIP NFL Events</p>
<h3 class="h3">NFL DRAFT</h3>
</div>
</div>
</div>
<div class="slider-control">
<svg class="slider-progress-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<title>slider-progress</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<circle class="progress" cx="26" cy="26" r="24" fill="none" stroke="#ffffff" stroke-miterlimit="10" stroke-width="3"/>
<circle cx="26" cy="26" r="25" fill="none" stroke="#ffffff" opacity="0.5" stroke-miterlimit="10" stroke-width="1"/>
</g>
</g>
</svg>
<button class="pause-play">
<img src="/images/pause-icon.svg" height="11" width="11">
</button>
</div>
</div>
</div>
<div class="row no-gutters mt-3 slider-row">
<div class="col-12 col-lg-7">
<div class="action-slider">
<img src="/images/gameday-1.jpg">
<img src="/images/gameday-2.jpg">
<img src="/images/gameday-3.jpg">
<img src="/images/gameday-4.jpg">
</div>
</div>
<div class="col-12 col-lg-5">
<div class="action-content-slider">
<div>
<div class="content-wrap">
<p class="p slide-title">Gameday Experiences</p>
<h3 class="h3">POSTGAME SIDELINE PASSES</h3>
</div>
</div>
<div>
<div class="content-wrap">
<p class="p slide-title">Gameday Experiences</p>
<h3 class="h3">PRO BOWL PREGAME SIDELINE PASSES</h3>
</div>
</div>
<div>
<div class="content-wrap">
<p class="p slide-title">Gameday Experiences</p>
<h3 class="h3">VIP TRAINING CAMP EXPERIENCE</h3>
</div>
</div>
<div>
<div class="content-wrap">
<p class="p slide-title">Gameday Experiences</p>
<h3 class="h3">PREGAME SIDELINE PASSES</h3>
</div>
</div>
</div>
<div class="slider-control">
<svg class="slider-progress-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<title>slider-progress</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<circle class="progress" cx="26" cy="26" r="24" fill="none" stroke="#ffffff" stroke-miterlimit="10" stroke-width="3"/>
<circle cx="26" cy="26" r="25" fill="none" stroke="#ffffff" opacity="0.5" stroke-miterlimit="10" stroke-width="1"/>
</g>
</g>
</svg>
<button class="pause-play">
<img src="/images/pause-icon.svg" height="11" width="11">
</button>
</div>
</div>
</div>