Hello everyone.

 

i've recently been trying to get to grips with jquery. Proving challenging.

 

All I want to achieve is a set of three rotating images on my home page but I'm obviously doing something wrong with my coding.

 

I think my problems start when I write this code... #jq-slider img { display:none; }

 

It just makes my images dissapear but according to the tutorial i'm following it has to be there in order for the jquery to work.

 

Anyone have any ideas where I'm going wrong? Thanks in advance, you people are the greatest!

 

#jq-slider {

width: 980px;

height: 350px;

margin: 0 auto;

overflow: hidden;

}

 

 

#jq-slider img { display:none; }

 

#jq-slider .is-showing{

display: inlne;

}

 

<div id="main_image">

<div id="jq-slider">

 

<img src="./images/main-banners/home-banner-1.png" height="350px" width="980px" alt="image 1" class="is-showing"/>

<img src="./images/main-banners/home-banner-2.png" height="350px" width="980px" alt="image 2"/>

<img src="./images/main-banners/home-banner-jeff.png" height="350px" width="980px" alt="image 3"/>

</div>

 

 

 

</div>

 

<script type="text/javascript">

$(document).ready(function(){

slideShow();

});

 

function slideShow() {

var showing = $('#jq-slider .is-showing');

var next = showing.next().length ? showing.next() : showing.parent().children(':first');

 

showing.fadeOut(800, function() { next.fadeIn(800).addClass('is-showing'); }).removeClass('is-showing');

 

setTimeout(slideShow, 5000);

 

}

 

</script>

It would help if you can post all the code you have in your web page

because what you have shown so far is missing something important

and a link to the tutorial.

Hi Gregor, at a glance I noticed that the word inline is misplelt here:

 

#jq-slider .is-showing{

display: inlne;

}

 

So even when the is-showing class is added with jquery it won't display.