javascript - 我在 JssorSlider 中面临 slider 元素重复问题

Question

<div class="slider-wrapper">
    <div class="containerMedia">
        <div id="slidermain" style="position: relative; margin: 0px auto; top: 0px; left: 0px; width: 1000px; height: 315px; overflow: hidden; visibility: visible; z-index: -1;" class="slider" jssor-slider="true">
        <div style="position: absolute; top: 0px; left: 0px; width: 1000px; height: 315px; transform-origin: 0px 0px 0px; transform: scale(1);">    <div class="slider" style="position: relative; margin: 0px auto; top: 0px; left: 0px; width: 1000px; height: 315px; overflow: visible; visibility: visible; z-index: -1; display: block;">    <div data-u="loading" style="/* position: absolute; *//* top: 0px; *//* left: 0px; *//* background-color: rgba(0, 0, 0, 0.7); */z-index: -1;width: 1000px;height: 315px;display: none;">
                <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1;"></div>
                <div style="position:absolute;display:block;background:url('http://localhost/jtweb/images/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%; z-index: -1;"></div>
        </div>    <div data-u="slides" style="z-index: 0; overflow: hidden;">    <div style="position: absolute; z-index: 0; pointer-events: none; display: none;"></div></div>    <div data-u="slides" style="/* cursor: default; *//* position: absolute; */top: 0px;left: 0px;width: 1000px;height: 315px;overflow: hidden;z-index: 0;">    <div style="top: 0px; left: 0px; width: 1000px; height: 315px; position: absolute; background-color: rgb(0, 0, 0); opacity: 0;"></div>
                <div style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 315px; position: absolute; overflow: hidden; transform: translate3d(1000px, 0px, 0px);">
                <img src="http://localhost/jtweb/images/slide1.jpg" style="z-index: 1; margin-top: 0px; margin-left: 0px; transform: translate3d(0px, 0px, 0px);">
                    <div data-u="loading" style="position: absolute; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; width: 1000px; height: 315px; display: none;">
                <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1;"></div>
                <div style="position:absolute;display:block;background:url('http://localhost/jtweb/images/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%; z-index: -1;"></div>
        </div></div>
                <div style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 315px; position: absolute; overflow: hidden; transform: translate3d(-1000px, 0px, 0px);">
                <img src="http://localhost/jtweb/images/slide1.jpg" style="z-index: 1; margin-top: 0px; margin-left: 0px; transform: translate3d(0px, 0px, 0px);">
                <div data-u="loading" style="position: absolute; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; width: 1000px; height: 315px; display: none;">
                <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1;"></div>
                <div style="position:absolute;display:block;background:url('http://localhost/jtweb/images/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%; z-index: -1;"></div>
        </div></div>
                <div style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 315px; position: absolute; overflow: hidden; transform: translate3d(-1000px, 0px, 0px);">
                <img src="http://localhost/jtweb/images/slide1.jpg" style="z-index: 1; margin-top: 0px; margin-left: 0px; transform: translate3d(0px, 0px, 0px);">
                <div data-u="loading" style="position: absolute; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; width: 1000px; height: 315px; display: none;">
                <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1;"></div>
                <div style="position:absolute;display:block;background:url('http://localhost/jtweb/images/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%; z-index: -1;"></div>
        </div></div>
                <div style="z-index: 1; top: 0px; left: 0px; width: 1000px; height: 315px; position: absolute; overflow: hidden;">
                <img src="http://localhost/jtweb/images/slide1.jpg" style="z-index: 1; margin-top: 0px; margin-left: 0px; transform: translate3d(0px, 0px, 0px);">
                <div data-u="loading" style="position: absolute; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; width: 1000px; height: 315px; display: none;">
                <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; z-index: -1;"></div>
                <div style="position:absolute;display:block;background:url('http://localhost/jtweb/images/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%; z-index: -1;"></div>
        </div></div>
        </div><span data-u="arrowleft" class="slider1left" style="top: 128.5px; left: 10px; width: 40px; height: 58px;" data-autocenter="2"></span><span data-u="arrowright" class="slider1right" style="top: 128.5px; right: 10px; width: 40px; height: 58px;" data-autocenter="2"></span></div></div></div>
</div>

网站链接在这里http://samkong.online/有人可以帮我解决吗？我曾多次尝试修复它，但没有成功。 slider div 存在重复问题，而代码不包含重复项。

Answer 1

不确定它是否初始化了两次。无论如何，如果你运行一个 wordpress 网站，强烈建议安装 jssor slider wordpress plugin ，应该会容易得多。