我正在使用JSSOR Slider Maker,并使用垂直预览模板,其中左侧有两列,右侧有最大化的图像。从开发人员包中,当您开始提取代码时,它会在一个文件中提供脚本、CSS和HTML。由于我正在将这些信息合并到我自己的站点中,所以我很自然地将它们拆分为一个CSS文件、一个JavaScript文件,然后将HTML合并到我的页面中。但是,在这样做的过程中,我失去了一个功能——预览图像不再滚动。这意味着许多是隐藏的,无法单击。我错过了什么?
https://codepen.io/anon/pen/ajrbrj
`<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<!-- Source: https://www.jssor.com -->
<div class="col-sm-12 img-slider-container">
<header class="section-header wow fadeInUp">
<h3>More Information</h3>
<p>.</p>
</header>
<div id="jssor_1" class="img-slider-wrapper">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-009-spin img-slider-loading" >
<img src="img-slider/img/spin.svg">
</div>
<div data-u="slides" class="img-slider-slider-wrapper">
<div>
<img data-u="image" src="img-slider/img/1.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/1.jpg" alt=""/>
</div>
<div>
<img data-u="image" src="img-slider/img/2.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/2.jpg" alt="" />
</div>
<div>
<img data-u="image" src="img-slider/img/3.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/3.jpg" alt=""/>
</div>
<div>
<img data-u="image" src="img-slider/img/4.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/4.jpg" alt=""/>
</div>
<div>
<img data-u="image" src="img-slider/img/5.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/5.jpg" alt=""/>
</div>
<div>
<img data-u="image" src="img-slider/img/6.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/6.jpg" alt=""/>
</div>
<div>
<img data-u="image" src="img-slider/img/7.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/7.jpg" alt=""/>
</div>
<div>
<img data-u="image" src="img-slider/img/8.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/8.jpg" alt=""/>
</div>
<div>
<img data-u="image" src="img-slider/img/9.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/9.jpg" alt=""/>
</div>
<!--<div>
<img data-u="image" src="img-slider/img/10.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/10.jpg" alt=""/>
</div>
<div>
<img data-u="image" src="img-slider/img/11.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/11.jpg" alt=""/>
</div>
<div>
<img data-u="image" src="img-slider/img/12.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/12.jpg" alt=""/>
</div>
<div>
<img data-u="image" src="img-slider/img/13.jpg" alt=""/>
<img data-u="thumb" src="img-slider/img/reduced/13.jpg" alt=""/>
</div>-->
</div>
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort101 img-slider-navigator" data-autocenter="2" data-scale-left="0.75">
<div data-u="slides">
<div data-u="prototype" class="p img-slider-protoype">
<div data-u="thumbnailtemplate" class="t"></div>
<svg viewbox="0 0 16000 16000" class="cv">
<circle class="a" cx="8000" cy="8000" r="3238.1"></circle>
<line class="a" x1="6190.5" y1="8000" x2="9809.5" y2="8000"></line>
<line class="a" x1="8000" y1="9809.5" x2="8000" y2="6190.5"></line>
</svg>
</div>
</div>
</div>
<!-- Arrow Navigator -->
<div data-u="arrowleft" class="jssora093" style="width:50px;height:50px;top:0px;left:270px;" data-autocenter="2">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="c" cx="8000" cy="8000" r="5920"></circle>
<polyline class="a" points="7777.8,6080 5857.8,8000 7777.8,9920 "></polyline>
<line class="a" x1="10142.2" y1="8000" x2="5857.8" y2="8000"></line>
</svg>
</div>
<div data-u="arrowright" class="jssora093" style="width:50px;height:50px;top:0px;right:30px;" data-autocenter="2">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="c" cx="8000" cy="8000" r="5920"></circle>
<polyline class="a" points="8222.2,6080 10142.2,8000 8222.2,9920 "></polyline>
<line class="a" x1="5857.8" y1="8000" x2="10142.2" y2="8000"></line>
</svg>
</div>
</div>
</div>
<script type="text/javascript">jssor_1_slider_init() </script>
<!-- #endregion Jssor Slider End -->
`
