javascript - 将缩略图添加到 jssor 视频库

Question

您好，有人可以帮我在视频库中添加图像缩略图吗？这是我的网站:[skinwhitening101.weebly.com][1]

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

Answer 1

请通过 3 个步骤启用缩略图导航器。

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

   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. 在您的 slider 容器中添加缩略图导航器皮肤，

   <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>