Question

我正在开发单页网站，但即使在添加脚本后，我的滑块也不会自动移动。我希望我的滑块自动移动。请在下面找到以下HTML代码：

       <div id="slider" class="sl-slider-wrapper">

            <div class="sl-slider">

                <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">

                    <div class="bg-img bg-img-1"></div>

                    <div class="slide-caption">
                        <div class="caption-content">
                            <h2 class="animated fadeInDown">Lorem ipsum</h2>
                            <span class="animated fadeInDown">Lorem ipsum</span>
                            <a href="#" class="btn btn-blue btn-effect">Join US</a>
                        </div>
                    </div>

                </div>

                <div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">

                    <div class="bg-img bg-img-2"></div>
                    <div class="slide-caption">
                        <div class="caption-content">
                            <h2>Lorem ipsum</h2>
                            <span>Lorem ipsum</span>
                            <a href="#" class="btn btn-blue btn-effect">Join US</a>
                        </div>
                    </div>

                </div>

                <div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">

                    <div class="bg-img bg-img-3"></div>
                    <div class="slide-caption">
                        <div class="caption-content">
                            <h2>Lorem ipsum</h2>
                            <span>Lorem ipsum</span>
                            <a href="#" class="btn btn-blue btn-effect">Join US</a>
                        </div>
                    </div>

                </div>

            </div><!-- /sl-slider -->

            <!-- 
            <nav id="nav-arrows" class="nav-arrows">
                <span class="nav-arrow-prev">Previous</span>
                <span class="nav-arrow-next">Next</span>
            </nav>
            -->

            <nav id="nav-arrows" class="nav-arrows hidden-xs hidden-sm visible-md visible-lg">
                <a href="javascript:;" class="sl-prev">
                    <i class="fa fa-angle-left fa-3x"></i>
                </a>
                <a href="javascript:;" class="sl-next">
                    <i class="fa fa-angle-right fa-3x"></i>
                </a>
            </nav>


            <nav id="nav-dots" class="nav-dots visible-xs visible-sm hidden-md hidden-lg">
                <span class="nav-dot-current"></span>
                <span></span>
                <span></span>
            </nav>

        </div><!-- /slider-wrapper -->

我也在添加我试图添加的脚本代码。如何找到合适的脚本文件，以便我的滑块在一段时间后自动开始移动？

这是我的剧本：

// Carousel Auto-Cycle
          $(document).ready(function() {
            $('.sl-slider-wrapper').sl-slider-wrapper({
              interval: 1000
            })
          });

Answer 1

您是否在运行时查看了网页的开发工具？我确定它会抛出错误 - 文档就绪函数中的javascript应为：

...
$('.sl-slider-wrapper').slitslider({
...

我认为这是您的javascript中的复制/粘贴错误。

滑块不会自动移动

1 个答案: