Question

我想将列表滑块与横幅滑块组合在一起，并创建一个滑块，在左侧显示滑块的缩略图，并在底部有标题栏。

如何做到这一点。

Answer 1

您可以将缩略图导航器添加到任何滑块。

使用＆＃39; demos-jquery \ banner-slider.source.html＆＃39;演示，请完成以下步骤，

调整＆＃39; sliderb_container＆＃39;的布局和幻灯片＆＃39;容器为缩略图导航器保留200px（宽度）空间。

替换`width：600px;＆＃39;宽度：800px;＆＃39;获得如下代码，
```
<div id="sliderb_container" style="position: relative; width: 800px;
    height: 300px; overflow: hidden;">
```
替换`left：0px;＆＃39;左边：200px;＆＃39;获得如下代码，
```
<div u="slides" style="cursor: move; position: absolute; left: 200px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
```

从＆＃39; demos-jquery \ list-slider.source.html＆＃39;复制缩略图导航器，然后粘贴到您的横幅滑块。（请务必将left:605px;替换为left:0px;）

<div id="sliderb_container' ...>
    ...
    <div u="slides" ...>
        ...
    </div>
    ...
    <!-- ThumbnailNavigator Skin Begin -->
    <div u="thumbnavigator" class="jssort11" style="position: absolute; width: 200px; height: 300px; left:0px; top:0px;">
        <!-- Thumbnail Item Skin Begin -->
        <style>
            /* thumbnail navigator css here */
        </style>
        <div u="slides" style="cursor: move;">
            <div u="prototype" class="p" style="position: absolute; width: 200px; height: 69px; top: 0; left: 0;">
                <div u="thumbnailtemplate" style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></div>
            </div>
        </div>
        <!-- Thumbnail Item Skin End -->
    </div>
    <!-- ThumbnailNavigator Skin End -->
</div>

将缩略图导航器选项添加到横幅滑块。

var options = {
    ...,
    $ThumbnailNavigatorOptions: {
        $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always

        $Loop: 2,                                       //[Optional] Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1
        $AutoCenter: 3,                                 //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
        $Lanes: 1,                                      //[Optional] Specify lanes to arrange thumbnails, default value is 1
        $SpacingX: 4,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
        $SpacingY: 4,                                   //[Optional] Vertical space between each thumbnail in pixel, default value is 0
        $Cols: 4,                              //[Optional] Number of pieces to display, default value is 1
        $Align: 0,                            //[Optional] The offset position to park thumbnail
        $Orientation: 2,                                //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
        $DisableDrag: false                             //[Optional] Disable drag or not, default value is false
    },
    ...
};

结合jssor滑块类型

1 个答案: