将缩略图添加到 jssor 视频库

Add Thumbnail to a jssor video-gallery

本文关键字：jssor 视频 添加 略图      更新时间：2023-09-26

嗨，任何人都可以帮我在视频库中添加图像缩略图吗？这是我的网站： [skinwhitening101.weebly.com][1]

[1]：http://skinwhitening101.weebly.com，正如您在主页中看到的那样，我使用了 Jssor 滑块，而我的视频库只有数字缩略图。我尝试使用图像缩略图从其他幻灯片中复制和粘贴一些代码，但似乎不起作用。我修改了一些代码并将图像放在缩略图上，但仍然无法正常工作。求求你帮忙！

请完成 3 个步骤以启用缩略图导航器。

  1. 添加$ThumbnailNavigatorOptions以初始化 jssor 滑块。

    var options = {
    ...
    $ThumbnailNavigatorOptions: {                       //[Optional] Options to specify and enable thumbnail navigator or not
        $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
        $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
        $SpacingX: 8,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
        $Cols: 10,                             //[Optional] Number of pieces to display, default value is 1
        $Align: 360                           //[Optional] The offset position to park thumbnail
    },
    ...
};

  2. 在滑块容器中添加缩略图导航器皮肤，

    <div id="slider1_container" ...>
    ...
    <!-- Thumbnail Navigator Skin Begin -->
    <!-- open skin'thumbnail-xx.source.html, copy/paste thumbnail navigator skin herer -->
    <!-- Thumbnail Navigator Skin End -->
    ...
</div>

  3. 在每张幻灯片中添加缩略图元素（），

    <div u="slides" ...>
    <div>
        <img u="image" src="../img/alila/01.jpg" />
        <img u="thumb" src="../img/alila/thumb-01.jpg" />
    </div>
    <div>
        <img u="image" src="../img/alila/02.jpg" />
        <img u="thumb" src="../img/alila/thumb-02.jpg" />
    </div>
    ...
</div>
相关文章：