jssor thumbnails disappear

Question

I've looked and looked for what should be a simple answer, and for some reason I can't find it.

I'm experimenting with this amazing slider gleaned from the example here. I'd be happy if mine looked like this, considering that my slider has larger images.

When I reset the code to accommodate the larger images I lost the entire thumbnail panel and its black background. Obviously I also lost the thumbnail navigation.

You can see from my page that I've added a border. Regardless of the container size, the thumbnails have disappeared either way.

I would be grateful if someone points me to the code or js that deals with this. I would also appreciate if someone gave me some idea about the many selectors such as .jssora05r and .jssora05rdn, none of which have any html equivalent and leave me wondering what purpose they serve or whether they can just be omitted.

Answer 1

Please use class name to define css for slider1_container.

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

And remove the following codes,

@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;
    }
}

And also, jssor.js is missing in your code. Please replace

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

with

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

Edit

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

Move thumbnails

Slides are always in slides container. If you make slides container smaller than slider1_container, then you have rest space to place your thumbnail navigator. You can use css to set position of your thumbnailnavigator, for example

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

Reference:

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