Question

我一直在寻找应该是一个简单的答案，并且由于某种原因我无法找到它。

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

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

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

如果有人指出我处理此问题的代码或js，我将不胜感激。我也很感激，如果有人给我一些关于许多选择器的想法，例如.jssora05r和.jssora05rdn，它们都没有任何html等价物，让我想知道它们的用途是什么，或者它们是否可以省略。

Answer 1

请使用班级名称为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，那么您有足够的空间来放置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缩略图消失

1 个答案: