我正在使用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 -->
`
发布于 2018-08-15 09:22:32
您的demo中的代码顺序错误。您可以查看codepen demo的frame源代码。
正确的顺序如下:
html代码
jssor.slider.min.js
3.
jssor_1_slider_init = function() {
};
4.
jssor_1_slider_init();
https://stackoverflow.com/questions/51850762
复制相似问题