SlideShow help

I got the slider working on my test forum,
http://starwars-fans.forumotion.co.uk/
This is the slider i choose,
http://tiki.makingforum.com/t4-wow-slider-on-fm

How do i make it change the images automatically instead of clicking the next button?

You have more problems than that, when you do click a button to view the next picture it reloads the page and you lose your place mark on the page. So the page jumps. It needs a script that simply changes the picture and has no affect on the page. But if you can get it to change the pics automatically that would be better, but still when you click to change a pic the page jumps.

Yes i know ,
it also shows the wrong picture when you go over the button. can anyone help to solve what runaway said and what i want.

Bumb

This picture slider will change the pictures automatically and you can also click through them. And it doesn't make the page jump.

Tutorial for Installation:
https://help.forumotion.com/t105962-index-in-accordion

Example:
http://avrillavignetalkshow.forumotion.com/

How do i add more slides in it?

Code:

#s1 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s2 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}
#s3 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}

#s4 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}

#s5 {
 background:url("http://url de l'image.jpg") no-repeat #030303;
}

#s6 {
 background:url("http://url de l'image.jpg")
}

#s7 {
 background:url("http://url de l'image.jpg")
}

#s8 {
 background:url("http://url de l'image.jpg")
}

I did that but they don't work

You also have to add more codes for the homepage welcome message.

the ones that look like this:

Code:

<h2><span>Slide Two</span></h2>
            <div id="s2"></div>

http://starwars-fans.forumotion.co.uk/
Look at slide 6,7,8 they don't look right
and is it anyway i can make them clickable?

Thats because the background is transparent you didn't add this part at the end of the codes like the other ones. I would recommend you copy and paste the extra codes you need from the other ones, and just change the numbers. The part you left out is this:

Code:

no-repeat #030303;}

Yes you can make them clickable. I'll tell you how after you get this straightened out.

ok, thats sorted ,
so how do i make them clickable?
also some logos are cut off at the start how do i fix that.

Ok, you're going to have to undo some of what you did to make them clickable links. But that was a good exercise for you because now you have a better understanding of what to do next. And you already have your pics uploaded.

Ok, first you need to delete the CSS part with the images, you'll be adding the images in the Homepage message now with the links, so you don't need them in the CSS stylesheet anymore.

Delete this part in your CSS stylesheet that has the images:

Code:

#s1 {
    background:url("http://url de l'image.jpg") no-repeat #030303;
    }
    #s2 {
    background:url("http://url de l'image.jpg") no-repeat #030303;
    }
    #s3 {
    background:url("http://url de l'image.jpg") no-repeat #030303;
    }
    #s4 {
    background:url("http://url de l'image.jpg") no-repeat #030303;
    }
    #s5 {
    background:url("http://url de l'image.jpg") no-repeat #030303;
    }

And add the images between the div's as a clickable images in the homepage message. You do this for each link and picture you have. Add the links and images where it says to in the code.

Like this example:

Code:

<div id="s1"><a href="YOUR LINK GOES HERE"><img src="YOUR IMAGE GOES HERE" /></a></div>

-----------
The reason some of your pics appear to be cutoff is because you need to add more space on the sides of the pics, or most likely you need to resize the accordion.

The Accordion size can be changed in the First page of Javascript you added, in this line of code here:

Change the 960 to whatever you want:

Code:

containerWidth : 960,

Edit: I just checked you accordion and you need to add more space on the left of your logo images. Add about 50 to 100px more space to the left side of you images. Its probably best to make the extra space transparent or black.

You are probably going to have to resize your pics or modify them as well as resize the accordion to get it perfect. You'll have to experiment.

Thank you so much ,
one last thing anyway to make it faster?

Yes in the same javascript code to change the size you change this for speed. I believe that is all you need to do to adjust the speed. Mine is at 800.

Change the 800 up or down.

Code:

 slideSpeed : 800,

you're welcome..

one more problem ,
Its showing the same image for slide one and two,
thats my html, tell me what am doing wrong.

Code:

<div id="one" class="accordion">
    <ol>
        <li>
            <h2><span>Eagles United</span></h2>
            <div id="s1"></div>
        <div id="s1"><a href="http://haxball-galaxy.forumotion.cc/f25-eagles-united"><img src="http://img687.imageshack.us/img687/6417/eulogo.png" /></a></div>
</li>
      <li>
            <h2><span>Fatality</span></h2>
            <div id="s2"></div>
    <div id="s2"><a href="http://haxball-galaxy.forumotion.cc/f31-fatality"><img src="http://img842.imageshack.us/img842/5273/fatlogo.png" /></a></div>
 </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <div id="s3"></div>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <div id="s4"></div>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <div id="s5"></div>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>