JQuery Slider - Chrome not displaying properly with one slide

Question

Using jquery-1.9.1

SlidesJS 3.0.3 Plugin

I have come across a problem with a slideshow I'm trying to implement on a site - specifically the issue is with google chrome when only ONE slide is present. I have set up some examples for you to look at.

Here I have a slideshow with 3 items - this works fine in all browsers:

http://blahblahdev.atwebpages.com/rotator2.html

.

Here I have the exact same slideshow but with only 1 item. It works fine in Firefox and Internet explorer but in Google Chrome the slideshow is white - no image or text is displaying:

http://blahblahdev.atwebpages.com/rotator1.html

enter image description here

Can anyone figure out why this slideshow doesn't function properly if there is only one item?

thanks

  <div class="container">
    <div id="slides">

                    <div class="slide">
                        <img src="img/rotator1.png" alt="Slide 1">
                        <div class="caption" style="bottom:0">
                            <h3>Rotator 1</h3>
                            <p>Rotator 1 text goes here.</p>
                        </div>
                    </div>


    </div>
  </div>

Really? This link does not work for me or my colleague in chrome: http://blahblahdev.atwebpages.com/rotator1.html - which version of chrome are you using? I'm using 39.0.2171.71 m and it says its up to date — Scott, Nov 28 '14 at 11:21
Hi @ProllyGeek, thanks for looking at this, i've attached the html, you will notice that i've not added "left: -460px" - the framework must be adding this on the fly. — Scott, Nov 28 '14 at 11:28

score 2 · Accepted Answer · edited Nov 28 '14 at 12:21

<div class="slide slidesjs-slide" slidesjs-index="0" style="position: absolute; top: 0px; /* left: -460px; */ width: 100%; z-index: 10; display: block; -webkit-backface-visibility: hidden;">
                        <img src="img/rotator1.png" alt="Slide 1">
                        <div class="caption" style="bottom:0">
                            <h3>Rotator 1</h3>
                            <p>Rotator 1 text goes here.</p>
                        </div>
                    </div>

left is set to -460 px , remove this , and it will work fine.

Edit:

add this custom script to fix your issue

if($(".slide").children().length==1)
{
$(".slide").children()[0].css("left","0px")
}

This Works:

$(document).ready(function() {

     if($(".slide").length < 2 )
     {
          $(".slide").css("left","0px");  // There's only 1 slide so apply fix
     }      
});

Hi @ProllyGeek, Based on your customer script I was able to tinker with it until I got it working, i've attached the working version above. Thanks for helping out it's much appreciated. — Scott, Nov 28 '14 at 12:14

score 0 · Answer 2 · edited Nov 28 '14 at 13:16

0

In div .slide please remove inline style left:-460px; and style left:0px;.

edited Nov 28 '14 at 13:16

DontVoteMeDown

21,122
10
69
105

answered Nov 28 '14 at 11:23

Maulik patel

2,546
2
20
26

If you look at the html, all it says is
- the left: -460px must be generated by the framework, it's not me that's doing it...
– Scott Nov 28 '14 at 11:26
@Scott then the simple answer you cant use one slide. – ProllyGeek Nov 28 '14 at 11:28

JQuery Slider - Chrome not displaying properly with one slide

2 Answers2