Javascript swipejs插件-分页错误
我正在尝试在我的站点上实现swipejs滑块。 一切都很好,只是我需要设置分页点。 我跟随这个交换开始了 我的问题是,当您两次单击最后一个分页点时,我的所有幻灯片图像都会同时显示。我认为这与已经实现的index()javascript逻辑有关,但我很困惑如何防止这种情况发生 html: CSS:Javascript swipejs插件-分页错误,javascript,jquery,css,pagination,slider,Javascript,Jquery,Css,Pagination,Slider,我正在尝试在我的站点上实现swipejs滑块。 一切都很好,只是我需要设置分页点。 我跟随这个交换开始了 我的问题是,当您两次单击最后一个分页点时,我的所有幻灯片图像都会同时显示。我认为这与已经实现的index()javascript逻辑有关,但我很困惑如何防止这种情况发生 html: CSS: 我们能看到这只虫子住在什么地方吗?嗯,这是一只很难对付的虫子。它在本地运行的虚拟机上,我们的测试版服务器有密码保护。这里有一个屏幕抓图:您可以复制它吗?确保幻灯片的数量与在JSFIDLE中重新创建的do
我们能看到这只虫子住在什么地方吗?嗯,这是一只很难对付的虫子。它在本地运行的虚拟机上,我们的测试版服务器有密码保护。这里有一个屏幕抓图:您可以复制它吗?确保幻灯片的数量与在JSFIDLE中重新创建的dotsI的数量相匹配,但是行为不同。。。你必须把刷卡js作为一个外部源
<div id='swipeslider' class='swipe'>
<div class='swipe-wrap'>
<div>
<a><img></a>
</div>
<div>
<a><img></a>
</div>
<div>
<a><img></a>
</div>
<div>
<a><img></a>
</div>
<div>
<a><img></a>
</div>
<div>
<a><img></a>
</div>
</div> <!-- swipe-wrap -->
<nav id="swipenav_container">
<ul id="swipenav">
<li><span class="dot"></span></li>
<li><span class="dot"></span></li>
<li><span class="dot"></span></li>
<li><span class="dot"></span></li>
<li><span class="dot"></span></li>
<li><span class="dot"></span></li>
</ul>
</nav>
</div> <!-- #swipeslider -->
window.mySwipe = new Swipe(document.getElementById('swipeslider'), {
startSlide: 1,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
});
var $navLi = $('#swipenav li');
$navLi.on ('click', function () {
window.mySwipe.slide($(this).index() + 1, 200);
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
});
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float:left;
width:100%;
position: relative;
}
/* center slide images in slide-wrap div */
.swipe-wrap img {
margin: 0 auto;
}
#swipenav {
text-align: center;
}
#swipenav_container {
margin-top: 20px;
}
#swipenav_container ul {
margin: 0 auto;
padding: 0;
}
#swipenav li {
display: inline;
}
.dot {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #666;
margin: 3px;
}
.dot:hover {
background-color: #999;
}
.selected .dot {
background-color: #fff;
}