如何解决仅在活动幻灯片上显示链接SlickJs
我有一个滑块，我想隐藏除活动幻灯片上的链接以外的所有链接。可能吗？我只想隐藏链接而不触摸图像，因此一旦用户访问了特定的幻灯片，这是他们唯一可以单击的幻灯片。我设法仅在活动幻灯片上显示内容，但是我不知道如何在其上显示链接。
https://codepen.io/jinzagon/pen/WNwoawx
HTML
result = pd.merge(fin_df,loc_df,how='outer',on='BldgID')
BldgID Assmnt Phase Funding Amt State City
0 1 Phase 1 $$$$$$$$ CO Denver
1 2 Phase 1 $$$$$$$$ MN St.Paul
2 2 Phase 2 $$$$$$$$ MN St.Paul
3 3 Phase 1 $$$$$$$$ NV Reno
4 3 Phase 2 $$$$$$$$ NV Reno
5 4 Phase 2 $$$$$$$$ FL Miami
6 4 Phase 3 $$$$$$$$ FL Miami
CSS
<div class="slick-center-wrap">
<a href="javascript:;" title="上一張" class="pic-prev">prev</a>
<a href="javascript:;" title="下一張" class="pic-next">next</a>
<ul class="slick-center">
<div>
<a href="http://youtube.com"> <img src="" data-lazy="http://placehold.it/500x150&text=A-movie"></a>
</div>
<div>
<a href="http://google.com"><img src="" data-lazy="http://placehold.it/500x150&text=B-movie"></a>
</div>
<div>
<a href="http://stackoverflow.com"><img src="" data-lazy="http://placehold.it/500x150&text=C-study"></a>
</div>
<div>
<img src="" data-lazy="http://placehold.it/500x150&text=D-movie">
</div>
<div>
<img src="" data-lazy="http://placehold.it/500x150&text=E-study">
</div>
<div>
<img src="" data-lazy="http://placehold.it/500x150&text=F-study">
</div>
<div>
<img src="" data-lazy="http://placehold.it/500x150&text=G-sport">
</div>
<div>
<img src="" data-lazy="http://placehold.it/500x150&text=H-study">
</div>
<div>
<img src="" data-lazy="http://placehold.it/500x150&text=I-movie">
</div>
<div>
<img src="" data-lazy="http://placehold.it/500x150&text=J-sport">
</div>
<div>
<img src="" data-lazy="http://placehold.it/500x150&text=K-sport">
</div>
<div>
<img src="" data-lazy="http://placehold.it/500x150&text=L-movie">
</div>
<div>
<img src="" data-lazy="http://placehold.it/500x150&text=M-sport">
</div>
<div>
<img src="" data-lazy="http://placehold.it/500x150&text=N-movie">
</div>
<div>
<a href="http://google.com"> <img src="" data-lazy="http://placehold.it/500x150&text=O-study"></a>
</div>
</ul>
</div>
JS
@charset "utf-8";
/* slick original */
/* Slider */
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,.slick-slider .slick-list
{
-webkit-transform: translate3d(0,0);
-moz-transform: translate3d(0,0);
-ms-transform: translate3d(0,0);
-o-transform: translate3d(0,0);
transform: translate3d(0,0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
.slick-thumbs{ display: block; width: 100%; }
img{ max-width: 100%; max-height: 100%; }
.slick-big-wrap img{ width: 100%; }
.slick-center .slick-slide{ text-align: center; border:1px solid #eee; }
.slick-center img{ text-align: center; margin:0 auto; }
.slick-center .slick-list,.slick-center .slick-track{ overflow: visible; }
.slick-center .slick-current { width: 0 30px; top: 50%; -webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); -webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center; -webkit-transition: transform .3s ease;
-o-transition: transform .3s ease;
transition: transform .3s ease;}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。