Question

我正在使用jssor选项卡式内容滑块，唯一的导航是顶部的选项卡。如何添加next和prev按钮？

HTML

 <div u="slides" class="vertical-slide slide-3-text" style="top:0">
            <div>
                <div class="panel">Slide 1 content, place any html here.</div>
                <div u="thumb">REACH</div>
            </div>
            <div>
                <div class="panel">Slide 2 content, place any html here.</div>
                <div u="thumb">INSPIRE</div>
            </div>
            <div>
                <div class="panel">Slide 3 content, place any html here.</div>
                <div u="thumb">ENROLL</div>
            </div>
            <div>
                <div class="panel">Slide 4 content, place any html here.</div>
                <div u="thumb">CULTURE</div>
            </div>
        </div>

Answer 1

解压缩jssor.slider.fullpack.zip并找到你喜欢的任何箭头皮肤'skin \ arrow - **。source.html'。

添加$ ArrowNavigatorOptions，如下所示，

<script>
    jQuery(document).ready(function ($) {
        var options = {
            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,
                $ChanceToShow: 2
            }
        };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>

然后在'slider1_container'中放置箭头导航器皮肤html代码。

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="image1.jpg" /></div>
        <div><img u="image" src="image2.jpg" /></div>
    </div>
    <!-- Arrow Navigator Skin Begin -->
        <!-- open 'skin\arrow-...source.html', copy and paste arrow navigator skin here -->
    <!-- Arrow Navigator Skin End -->
</div>

参考：http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html

将next和prev按钮添加到选项卡式内容滑块

1 个答案: