SlidesJS is not working properly

[Anna]

Hi,

I use Firefox' Responsive Design View on my PC to test SlidesJS, however whenever I rotate the screen, the slideJS doesnt show again. It will only show once I refresh the page.
On my mobile device > Firefox for Android, the slideJS totally dont show.

Please help.

between head tag

<script src="http://code.jquery.com/jquery-latest.min.js"></script>        
<!-- SlidesJS Required: Link to jquery.slides.js -->
        <script src="../js/jquery.slides.min.js"></script>
        <script>
            $(function() {
                $('#slides').slidesjs({
                    width: 814,
                    height: 355,
                    navigation: false
                });
            });
        </script>
        <!-- End SlidesJS Required -->

between body tag

                <!-- SlidesJS Required: Start Slides -->
                <!-- The container is used to define the width of the slideshow -->
                <div class="containerSlides" id="slidesTop">
                    <div id="slides">
                        <a href="#" class="slidesjs-next slidesjs-navigation"></a>
                        <a href="#"><img src="../images/sample1.jpg"></a>
                        <a href="#"><img src="../images/sample2.jpg"></a>
                    </div>
                </div>
                <!-- End SlidesJS Required: Start Slides -->

my css

#slides {    display: none; }
img {
    /* Responsive images (ensure images don't scale beyond their parents) */
    max-width: 100%; /* Part 1: Set a maxium relative to the parent */
    width: auto\9; /* IE7-8 need help adjusting responsive images */
    height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}
.containerSlides {
    margin: 0 auto;
}
.slidesjs-pagination {
    margin: -25px 6px 0 0;
    list-style: none;
    position: relative;
    z-index:500;
    width: auto;
}
.slidesjs-pagination li {
    float: right;
    margin: 0 1px;
}
.slidesjs-pagination li a {
    display: block;
    width: 13px;
    height: 0;
    padding-top: 13px;
    background-image: url(../images/pagination.png);
    background-position: 0 0;
    float: left;
    overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
    background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
    background-position: 0 -26px
}

@media (max-width: 736px) {
      .containerSlides {
        width: auto;
        padding-top:0;
      }
}

[Anna]

Hi,

Anyone can help me with this? I found similar issues, tried the resolution given, but still the images seems invisible.

When I checked the code, slidesjs-container and slidesjs-control height are both 0px.

I also checked on other browser, it's not only Firefox but all any browser, when I resize, the images becomes invisible.

<div class="slidesjs-container" style="overflow: hidden; position: relative; width: 800px; height: 0px;">
<div class="slidesjs-control" style="position: relative; left: 0px; width: 800px; height: 0px;">

Regards,

Anna 

[Anna]

Hi again,

Here is the link to my test page.

http://www.aydu.com/pending/testpage-home.aspx

Thank you so much.

On Tuesday, November 25, 2014 12:56:55 PM UTC+8, Anna wrote:

Hi,

[Martin BA]

I have the same problem. Did you resolve it?

Thanks.

Dňa pondelok, 24. novembra 2014 9:32:51 UTC+1 Anna napísal(-a):