我组合了两个不同脚本的代码，如下所示:
动态轮播:https://responsivedesign.is/resources/javascript-jquery/dynamic-carousel/ 展开图像预览:http://www.jqueryscript.net/gallery/Thumbnail-Grid-with-Expanding-Image-Preview-Using-jQuery.html
我想实际使用此代码( https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/ )，但代码在这里不起作用:(
基本上我的问题是当我单击下一页的“下一步”按钮时扩展器无法关闭。您可以尝试下面的代码，您就会看到我的问题所在。
所以我想要的是当滚动到轮播的下一页时扩展器/图像预览将自动关闭。如果我的解释不够清楚，请大家指教。谢谢!
(function(global, $){
$('.gallery-items').imagelistexpander({
prefix: "gallery-"
});
})(this, jQuery)
$(document).ready(function() {
$('.slidewrap').carousel({
slider: '.slider',
slide: '.slide',
slideHed: '.slidehed',
nextSlide : '.next',
prevSlide : '.prev',
addPagination: false,
addNav : false,
speed: 1000 // ms.
});
});ul { margin: 0; padding: 0; list-style: none; }
.carousel-tabs { clear: both; }
.carousel-active-tab { color: red; }
.carousel-disabled,
.mr-rotato-disabled { color: #aaa; }
.slidewrap2 .carousel-tabs {
padding: 0;
margin: 1em 0;
clear: both;
}
.slidewrap2 .carousel-tabs li {
display: inline-block;
padding: 0 2px;
}
.slidewrap2 .carousel-tabs a {
background: #ddd;
display: inline-block;
height: 10px;
text-indent: -9999px;
width: 10px;
border-radius: 5px;
}
.ie .slidewrap2 .carousel-tabs li,
.ie .slidewrap2 .carousel-tabs a {
display: block;
float: left;
}
.slidewrap2 .carousel-tabs .carousel-active-tab a {
background: #777;
}
.events {
font: normal 11px/1.4 arial, helvetica, sans-serif;
}
.gallery-items { font-size: 0; }
.gallery-item {
display: inline-block;
vertical-align: top;
-webkit-transition: height 500ms ease;
-o-transition: height 500ms ease;
transition: height 500ms ease;
}
.gallery-expander {
position: absolute;
left: 0;
right: 0;
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 500ms ease;
-o-transition: max-height 500ms ease;
transition: max-height 500ms ease;
}
.gallery-contents { position: relative; }
.gallery-contents:after {
display: block;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -30px;
width: 0;
height: 0;
content: '';
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-style: solid;
border-bottom-width: 0px;
-webkit-transition: border-bottom-width 500ms ease;
-o-transition: border-bottom-width 500ms ease;
transition: border-bottom-width 500ms ease;
}
.gallery-item.active .gallery-contents:after { border-bottom-width: 30px; }
body {
font-family: 'Nanum Barun Gothic';
font-weight: 200;
color: #555;
}
ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.gallery-item {
text-align: left;
font-size: 25px;
margin: 0 10px;
padding: 10px 0;
}
.gallery-item .thumbnail {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
cursor: pointer;
}
.gallery-item .thumbnail > img {
position: absolute;
}
.gallery-item .title {
text-align: center;
margin-top: 20px;
padding-bottom: 20px;
}
.gallery-contents:after { border-bottom-color: #F6F3ED; }
.gallery-expander { background: #F6F3ED; }
.gallery-expander-contents {
margin: 0 auto;
width: 1000px;
padding: 20px 0;
}
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents { width: 640px; }
}
@media (max-width: 639px) {
.gallery-expander-contents { width: 100%; }
}
.gallery-expander-contents:after {
clear: both;
display: table;
content: '';
}
.gallery-expander-contents > div.col {
float: left;
width: 480px;
}
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents > div.col { width: 310px; }
}
@media (max-width: 639px) {
.gallery-expander-contents > div.col {
float: none;
padding: 25px 20px 0;
width: auto;
}
}
.gallery-expander-contents > div.col + div.col { margin-left: 40px; }
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents > div.col + div.col { margin-left: 20px; }
}
@media (max-width: 639px) {
.gallery-expander-contents > div.col + div.col { margin-left: 0px; }
}
.gallery-expander-contents div.close {
position: absolute;
top: 10px;
right: 20px;
}
.gallery-expander-contents div.title {
font-weight: 500;
color: #D28A3C;
}
.gallery-expander-contents div.contents {
margin-top: 10px;
border-top: 1px solid #BCB098;
border-bottom: 1px solid #BCB098;
padding: 10px 0;
font-size: 14px;
line-height: 24px;
color: #797262;
}
.gallery-expander-contents div.image > img {
width: 100%;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/11407514532/jquery-imagelistexpander.js"></script>
<script src="http://yourjavascript.com/43702110263/plugin.js"></script>
<div class="slidewrap" data-autorotate="5000">
<ul class="slidecontrols">
<li><a href="#sliderName" class="next">Next</a></li>
<li><a href="#sliderName" class="prev">Prev</a></li>
</ul>
<ul class="slider" id="sliderName">
<li class="slide">
<ul class="gallery-items" style="width: 980px; margin: 0 auto;">
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="slide">
<ul class="gallery-items" style="width: 980px; margin: 0 auto;">
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>最佳答案
这不是世界上最好的解决方案，但它确实有效。 如果单击下一个/上一个，“单击“关闭”按钮” 我希望它对您有用。
(function(global, $){
$('.gallery-items').imagelistexpander({
prefix: "gallery-"
});
})(this, jQuery)
$(document).ready(function() {
$('.slidewrap').carousel({
slider: '.slider',
slide: '.slide',
slideHed: '.slidehed',
nextSlide : '.next',
prevSlide : '.prev',
addPagination: false,
addNav : false,
speed: 1000 // ms.
});
});
$(".next").click(function(){
$(".close").click();
});
$(".prev").click(function(){
$(".close").click();
});ul { margin: 0; padding: 0; list-style: none; }
.carousel-tabs { clear: both; }
.carousel-active-tab { color: red; }
.carousel-disabled,
.mr-rotato-disabled { color: #aaa; }
.slidewrap2 .carousel-tabs {
padding: 0;
margin: 1em 0;
clear: both;
}
.slidewrap2 .carousel-tabs li {
display: inline-block;
padding: 0 2px;
}
.slidewrap2 .carousel-tabs a {
background: #ddd;
display: inline-block;
height: 10px;
text-indent: -9999px;
width: 10px;
border-radius: 5px;
}
.ie .slidewrap2 .carousel-tabs li,
.ie .slidewrap2 .carousel-tabs a {
display: block;
float: left;
}
.slidewrap2 .carousel-tabs .carousel-active-tab a {
background: #777;
}
.events {
font: normal 11px/1.4 arial, helvetica, sans-serif;
}
.gallery-items { font-size: 0; }
.gallery-item {
display: inline-block;
vertical-align: top;
-webkit-transition: height 500ms ease;
-o-transition: height 500ms ease;
transition: height 500ms ease;
}
.gallery-expander {
position: absolute;
left: 0;
right: 0;
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 500ms ease;
-o-transition: max-height 500ms ease;
transition: max-height 500ms ease;
}
.gallery-contents { position: relative; }
.gallery-contents:after {
display: block;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -30px;
width: 0;
height: 0;
content: '';
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom-style: solid;
border-bottom-width: 0px;
-webkit-transition: border-bottom-width 500ms ease;
-o-transition: border-bottom-width 500ms ease;
transition: border-bottom-width 500ms ease;
}
.gallery-item.active .gallery-contents:after { border-bottom-width: 30px; }
body {
font-family: 'Nanum Barun Gothic';
font-weight: 200;
color: #555;
}
ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.gallery-item {
text-align: left;
font-size: 25px;
margin: 0 10px;
padding: 10px 0;
}
.gallery-item .thumbnail {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
cursor: pointer;
}
.gallery-item .thumbnail > img {
position: absolute;
}
.gallery-item .title {
text-align: center;
margin-top: 20px;
padding-bottom: 20px;
}
.gallery-contents:after { border-bottom-color: #F6F3ED; }
.gallery-expander { background: #F6F3ED; }
.gallery-expander-contents {
margin: 0 auto;
width: 1000px;
padding: 20px 0;
}
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents { width: 640px; }
}
@media (max-width: 639px) {
.gallery-expander-contents { width: 100%; }
}
.gallery-expander-contents:after {
clear: both;
display: table;
content: '';
}
.gallery-expander-contents > div.col {
float: left;
width: 480px;
}
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents > div.col { width: 310px; }
}
@media (max-width: 639px) {
.gallery-expander-contents > div.col {
float: none;
padding: 25px 20px 0;
width: auto;
}
}
.gallery-expander-contents > div.col + div.col { margin-left: 40px; }
@media (min-width: 640px) and (max-width: 999px) {
.gallery-expander-contents > div.col + div.col { margin-left: 20px; }
}
@media (max-width: 639px) {
.gallery-expander-contents > div.col + div.col { margin-left: 0px; }
}
.gallery-expander-contents div.close {
position: absolute;
top: 10px;
right: 20px;
}
.gallery-expander-contents div.title {
font-weight: 500;
color: #D28A3C;
}
.gallery-expander-contents div.contents {
margin-top: 10px;
border-top: 1px solid #BCB098;
border-bottom: 1px solid #BCB098;
padding: 10px 0;
font-size: 14px;
line-height: 24px;
color: #797262;
}
.gallery-expander-contents div.image > img {
width: 100%;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://yourjavascript.com/11407514532/jquery-imagelistexpander.js"></script>
<script src="http://yourjavascript.com/43702110263/plugin.js"></script>
<div class="slidewrap" data-autorotate="5000">
<ul class="slidecontrols">
<li><a href="#sliderName" class="next" >Next</a></li>
<li><a href="#sliderName" class="prev">Prev</a></li>
</ul>
<ul class="slider" id="sliderName">
<li class="slide">
<ul class="gallery-items" style="width: 980px; margin: 0 auto;">
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="slide">
<ul class="gallery-items" style="width: 980px; margin: 0 auto;">
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
<li class="gallery-item">
<div class="gallery-contents">
<div class="thumbnail gallery-trigger"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
<div class="title">Gallery Item</div>
</div>
<div class="gallery-expander">
<div class="gallery-expander-contents">
<div class="gallery-trigger-close close">x</div>
<div class="col">
<div class="image"><img src="http://lorempixel.com/output/nature-q-c-250-250-1.jpg" alt="" /></div>
</div>
<div class="col">
<div class="title">Gallery Item</div>
<div class="contents"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>关于javascript - 隐藏轮播下一页上的扩展器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42923819/