jssor 缩略图消失

Question

我找了又找应该是一个简单的答案，但由于某种原因我找不到。

我正在试验从示例 here 中收集到的这个惊人的滑块。考虑到我的滑块有更大的图像，如果我的看起来像这样我会很高兴。

当我重置代码以容纳更大的图像时，我丢失了整个缩略图面板及其黑色背景。显然我也丢了缩略图导航

你可以从my page看到我添加了边框。无论容器大小如何，缩略图都会消失。

如果有人指出处理此问题的代码或 js，我将不胜感激。如果有人让我了解许多选择器，例如 .jssora05r 和 .jssora05rdn，none 其中有任何 html 等价物，我也很感激，让我想知道它们的用途是什么，或者它们是否可以只是被省略。

Answer 1

请使用class名称为slider1_container定义css。

.slider1_container {
    position: relative;
    width: 960px;
    height: 628px;
    /*border: 20px solid #E1D9CC;*/
    overflow: hidden;
    /*margin: 90px auto 0;*/
    margin: 0 auto;
    padding-bottom: 0;
}

并删除以下代码，

@media only screen and ( max-width: 1152px ) {
    .slider1_container {
        max-width: 92%;
        border-width: 15px;
    }
}

@media only screen and ( max-width: 800px ) {
    .slider1_container {
        margin-top: 10px;
        border-width: 10px;
        max-width: 90%;
    }
}

@media only screen and ( max-width: 640px ) {
    .slider1_container {
        border-width: 5px;
    }
}

此外，您的代码中缺少 jssor.js。请更换

<script src="../js/jssor.slider.js" type="text/javascript"></script>

和

<script src="../js/jssor.js" type="text/javascript"></script>
<script src="../js/jssor.slider.js" type="text/javascript"></script>

编辑

<div id="slider1_container" class="slider1_container" ...

移动缩略图

幻灯片总是在 slides 容器中。如果您使 slides 容器小于 slider1_container，那么您有剩余 space 来放置您的 thumbnail navigator。您可以使用 css 设置您的 thumbnailnavigator 的位置，例如

<div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">

参考：

http://www.jssor.com/development/tip-arrange-layout-adjust-size.html http://www.jssor.com/development/reference-ui-definition.html

jssor 缩略图消失

jssor thumbnails disappear

thumbnails

jssor