javascript - 单击最后一张幻灯片上的箭头时的jQuery执行单击事件
问题描述
我正在使用光滑的滑块：
https ://kenwheeler.github.io/slick/
当光滑的轮播位于最后一张幻灯片上时，单击下一个箭头时，我希望发生单击事件。这个点击事件基本上是为了切换到下一个选项卡，因为我在选项卡里面很光滑。事件将是单击“li.tab2”。
经过一番搜索，我找到了这个解决方案，但它似乎不起作用：
$('.features-slider').on('afterChange', function(event, slick, currentSlide)
{
if (slick.$slides.length-1 == currentSlide) {
$('li.tab2').click();
}
})
这是我的代码：
$(document).ready(function(){
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$('.features-slider').slick('refresh');
$(".tab_content").hide();
var active_tab = $(this).attr("rel");
$("#"+active_tab).fadeIn();
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_accordion_heading").removeClass("acc_active");
$(".tab_accordion_heading[rel^='"+active_tab+"']").addClass("acc_active");
});
$(".tab_accordion_heading").click(function() {
$(".tab_content").hide();
var acc_active_tab = $(this).attr("rel");
$("#"+acc_active_tab).fadeIn();
$(".tab_accordion_heading").removeClass("acc_active");
$(this).addClass("acc_active");
$("ul.tabs li").removeClass("active");
$("ul.tabs li[rel^='"+acc_active_tab+"']").addClass("active");
});
$('ul.tabs li').last().addClass("tab_last");
});
$('#tab1 .features-slider').on('afterChange', function(event, slick, currentSlide) {
if (slick.$slides.length-1 == currentSlide) {
$('li.tab2').click();
}
})
$('#tab2 .features-slider').on('afterChange', function(event, slick, currentSlide) {
if (slick.$slides.length-1 == currentSlide) {
$('li.tab3').click();
}
})body {
background: gray;
}
.key-features {
clear: both;
padding-top: 10px;
}
.key-features, .key-features * {
outline: none;
}
.key-features h2 {
text-align: center;
padding-bottom: 10px;
}
/* Tabs Styles */
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
cursor: pointer;
padding: 0px 21px;
/*overflow: hidden;*/
position: relative;
}
.tab_content.hidden {
display: block;
height: 1px;
width: 100%;
border: 1px solid red;
}
ul.tabs li.active {
display: block;
}
.tab_container {
clear: both;
float: left;
width: 100%;
/*overflow: auto;*/
}
.tab_content {
padding: 20px;
display: none;
padding-left: 0;
padding-right: 0;
}
.tab_accordion_heading { display: none; }
@media screen and (max-width: 480px) {
.tabs {
display: none;
}
.tab_accordion_heading {
margin: 0;
padding: 5px 20px;
display: block;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.acc_active {
background-color: #666;
color: #fff;
}
}
/* My Styles */
.tabs {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
ul.tabs li{
text-transform: uppercase;
color: #828282;
border-bottom: 2px dotted transparent;
padding: 0;
padding-bottom: 5px;
display: inline-block;
margin: auto 20px;
font-size: 30px;
}
.tabs li.active{
color: #FFF;
border-bottom: 2px dotted #FFF;
}
.features-slider .item {
margin-top: 60px;
text-align: center;
}
.features-slider .item:nth-child(1n) h3{
color: #EC69E6
}
.features-slider .item:nth-child(2n) h3{
color: #00C9FA
}
.features-slider .item:nth-child(3n) h3{
color: #00DFA1
}
.features-slider p {
font-size: 25px;
width: 274px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.features-slider .slick-prev, .features-slider .slick-next {
opacity: 1!important;
top: 35%;
width: 37px;
height: 69px;
}
.features-slider {
padding: 0 0px 0 30px;
}
.features-slider .slick-prev {
left: -30px;
}
.features-slider .slick-next {
right: 0;
}
.features-slider .slick-prev:before {
content: " ";
display: block;
width: 37px;
height: 69px;
background-image: url('data:image/svg+xml;utf8,<svg width="37" height="69" viewBox="0 0 37 69" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34.3676 3.26465L2.99999 34.6323L34.3676 65.9999" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
opacity: 1!important;
}
.features-slider .slick-next:before {
content: " ";
display: block;
width: 70px;
height: 71px;
background-image: url('data:image/svg+xml;utf8,<svg width="70" height="71" viewBox="0 0 70 71" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34.9117 67L66.2794 35.6324L34.9117 4.26477" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
opacity: 1!important;
}
@media screen and (max-width: 767px) {
.features-slider h3 {
font-size: 30px;
}
.features-slider p {
font-size: 18px;
}
}<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" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<div class="page-center">
<div class="key-features wow fadeInUp">
<h2>
Heading
</h2>
<div class="tabs-main">
<div class="wrapper">
<ul class="tabs">
<li class="tab1 active" rel="tab1">Tab 1</li>
<li class="tab2" rel="tab2">Tab 2</li>
<li class="tab3" rel="tab3">Tab 3</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div class="features-slider">
<div class="item">
Item Content Here
</div><!-- end item -->
<div class="item">
Item Content Here
</div><!-- end item -->
<div class="item">
Item Content Here
</div><!-- end item -->
<div class="item">
Item Content Here
</div><!-- end item -->
</div><!-- end features-slider -->
</div>
<div id="tab2" class="tab_content">
<div class="features-slider">
<div class="item">
Item Content Here
</div><!-- end item -->
<div class="item">
Item Content Here
</div><!-- end item -->
<div class="item">
Item Content Here
</div><!-- end item -->
<div class="item">
Item Content Here
</div><!-- end item -->
</div><!-- end features-slider -->
</div>
<div id="tab3" class="tab_content">
<div class="features-slider">
<div class="item">
Item Content Here
</div><!-- end item -->
<div class="item">
Item Content Here
</div><!-- end item -->
<div class="item">
Item Content Here
</div><!-- end item -->
<div class="item">
Item Content Here
</div><!-- end item -->
</div><!-- end features-slider -->
</div>
</div>
</div>
</div><!-- end tabs-main -->
</div><!-- end key-features -->
</div><!-- end page-center -->
</div>
<script>
$(document).ready(function(){
$('.features-slider').slick({
arrows: true,
centerPadding: "0px",
dots: false,
slidesToShow: 3,
infinite: false,
responsive: [
{
breakpoint: 767,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});
</script>解决方案
推荐阅读
- php - 如何在 XenForo 2 中显示不同语言的不同导航？
- java - Springs @AliasFor 可以用于@Import
- amazon - 我们可以在卖家中心取消/退款使用“Amazon Pay”的订单吗？
- python - 如何使用 python 为 Azure SQL 创建地理复制
- php - 包含子字符串的字符串的正则表达式
- sql - 如何在表格中间打印所需行？
- multithreading - UDP，多线程多个客户端？
- attributes - Aframe（如何？）动画实体或同时和顺序缩放/旋转/位置的实体
- qt - 在 Qml 中设置自定义控件的内容区域
- python - 如何在特定行的列中写入值？