CODEWITHSUNDEEP
jqueryslidesjs
Scott
Scott

Reputation: 1310

JQuery Slider - Chrome not displaying properly with one slide

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>

Upvotes: 2

Views: 1223

Answers (2)

Maulik patel
Maulik patel

Reputation: 2442

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

Upvotes: 0

ProllyGeek
ProllyGeek

Reputation: 15836

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

Upvotes: 2

Related Questions