如何解决 Jssor Slider Maker horizontal template; previews not scrolling javascript error?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (105)
 `<!-- #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 -->



` 
提问于
用户回答回答于

你的代码顺序是错误的,可以检查代码演示的框架源

正确的顺序如下:

1. HTML代码

2. jssor.slider.min.js

3.

    jssor_1_slider_init = function() {
    };

4.

    jssor_1_slider_init();

扫码关注云+社区

领取腾讯云代金券