CODEWITHSUNDEEP
htmlcss
Ryeboflaven
Ryeboflaven

Reputation: 85

Slider with CSS Only Showing First Image

I am trying to get the slider to work here and think I have the code but something isn't working right. It is only showing the image in the CSS and not rotating through the other ones.

Script in Header:

var images=new Array('/images/home/AC-InStock-Rotating.jpg', '/images/home/AC-    MXV-Rotating.jpg', '/images/home/AC-Rental-Rotating.jpg');
var nextimage=0;
doSlideshow();

function doSlideshow(){
if(nextimage>=images.length){nextimage=0;}
$('.home-middle-part')
.css('background-image','url("'+images[nextimage++]+'")')
.fadeIn(500,function(){
    setTimeout(doSlideshow,1000);
});
}

Body:

<div class="home-middle-part">

            <div class="container clearfix">
                <div class="grid_12 omega"  >
                    <div class="grid_6 omega" >
                        <div style="padding-left: 10px;">

                        </div>
                    </div>  <!-- end of grid 6-->
                    <div class="grid_6 omega" >
                        <div>
                            <table>
                            </table>  
                        </div>

                    </div>  <!-- end of grid 6-->
                </div>   <!-- end of grid 12 -->
            </div> <!-- end of container clearfix -->
        </div>  <!-- end of home-middle-part -->

CSS

.home-middle-part {
background-image: url("/images/home/body-image banner1.jpg");
background-repeat: no-repeat;
}

Upvotes: 0

Views: 75

Answers (1)

Brady Cartmell
Brady Cartmell

Reputation: 607

You script in the header is running before the browser knows that .home-middle-part exists. You need doSlideshow(); to run after the HTML has been parsed. You can do this by moving your script tag the bottom of the page or you can wrap your call to doSlideshow() in $(document).ready() like so:

$(document).ready(function() {
  doSlideshow();
});

Upvotes: 1

Related Questions