Slick Slider - 如何在点击时删除特定幻灯片
Slick Slider - How to Remove Specific Slides On Click
我正在尝试向光滑滑块添加功能,当您单击幻灯片时,它会将其从滑块中删除。
我查看了 Slick Sliders 网站上的文档,它展示了如何 add/remove 幻灯片,但这只适用于滑块中的最后一张幻灯片。
我正在努力让它发挥作用,以便您可以根据点击的幻灯片删除特定的幻灯片。
<div class="slider add-remove slick-initialized slick-slider">
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 80px; transform: translate3d(0px, 0px, 0px);" role="listbox">
<div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 80px;" tabindex="-1" role="option" aria-describedby="slick-slide100">
<h3>1</h3>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="button js-remove-slide">Remove Slide</a>
$('.js-remove-slide').on('click', function() {
$('.add-remove').slick('slickRemove',slideIndex - 1);
if (slideIndex !== 0){
slideIndex--;
}
});
编辑:我添加了一些代码来展示它是如何为 Slick slider HERE 设置的,这是为了删除滑块中的最后一张幻灯片而设置的。
我正在尝试对其进行设置,以便在单击幻灯片上的删除按钮时,该幻灯片将从滑块中删除。我从 Slick Slider 网站上抓取的代码片段只删除了滑块中的最后一张幻灯片。所以我想弄清楚如何在点击时删除特定的幻灯片。
Here 是一个带有你的解决方案的 CodePen
console.clear();
$('.slider').slick({
dots: true
});
$('.slide').on('click', function() {
$('.slider').slick('slickRemove', $('.slick-slide').index(this) - 1);
});
html,
body {
background: #102131;
text-align: center;
}
.slider {
width: 400px;
margin: 20px auto;
padding: 20px;
color: white;
}
.slider img {
display: block;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<div class="slider">
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 1</h1>
</div>
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 2</h1>
</div>
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 3</h1>
</div>
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 4</h1>
</div>
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 5</h1>
</div>
</div>
其实很简单
$( document ).on( 'click', '.slick-slider .delete', {}, function() {
$( this ).closest( '.slick-slide' ).remove();
} );
$('.slick-slide').on('click', function() {
var $indexid = $(this).attr("data-slick-index");
$('.slick-slider').slick('slickRemove', $indexid);
});
我正在尝试向光滑滑块添加功能,当您单击幻灯片时,它会将其从滑块中删除。
我查看了 Slick Sliders 网站上的文档,它展示了如何 add/remove 幻灯片,但这只适用于滑块中的最后一张幻灯片。
我正在努力让它发挥作用,以便您可以根据点击的幻灯片删除特定的幻灯片。
<div class="slider add-remove slick-initialized slick-slider">
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track" style="opacity: 1; width: 80px; transform: translate3d(0px, 0px, 0px);" role="listbox">
<div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 80px;" tabindex="-1" role="option" aria-describedby="slick-slide100">
<h3>1</h3>
</div>
</div>
</div>
</div>
<a href="javascript:void(0)" class="button js-remove-slide">Remove Slide</a>
$('.js-remove-slide').on('click', function() {
$('.add-remove').slick('slickRemove',slideIndex - 1);
if (slideIndex !== 0){
slideIndex--;
}
});
编辑:我添加了一些代码来展示它是如何为 Slick slider HERE 设置的,这是为了删除滑块中的最后一张幻灯片而设置的。
我正在尝试对其进行设置,以便在单击幻灯片上的删除按钮时,该幻灯片将从滑块中删除。我从 Slick Slider 网站上抓取的代码片段只删除了滑块中的最后一张幻灯片。所以我想弄清楚如何在点击时删除特定的幻灯片。
Here 是一个带有你的解决方案的 CodePen
console.clear();
$('.slider').slick({
dots: true
});
$('.slide').on('click', function() {
$('.slider').slick('slickRemove', $('.slick-slide').index(this) - 1);
});
html,
body {
background: #102131;
text-align: center;
}
.slider {
width: 400px;
margin: 20px auto;
padding: 20px;
color: white;
}
.slider img {
display: block;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<div class="slider">
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 1</h1>
</div>
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 2</h1>
</div>
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 3</h1>
</div>
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 4</h1>
</div>
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 5</h1>
</div>
</div>
其实很简单
$( document ).on( 'click', '.slick-slider .delete', {}, function() {
$( this ).closest( '.slick-slide' ).remove();
} );
$('.slick-slide').on('click', function() {
var $indexid = $(this).attr("data-slick-index");
$('.slick-slider').slick('slickRemove', $indexid);
});