0

I want to use JQuery cycle to create a slideshow where audience can view previous or next slide by clicking on image button.

I use javascript downloaded from here: http://jquery.malsup.com/cycle/int2.html

Here is how my HTML looks like:

<script type="text/javascript" src="js/jquery.cycle.all.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
$('#slide').cycle({ 
fx:     'fade', 
speed:  'fast', 
timeout: 0, 
next:   '#next', 
prev:   '#prev' 
});
</script>

And part with the slide:

    <div id="slideshow-wrapper">
        <div id="slideshow-control">
            <a id="prev" href="#"><img src="images/prev.png" alt="Previous" /></a>
            <a id="next" href="#"><img src="images/next.png" alt="Next" /></a>
        </div>

        <div id="slide">
            <img src="images/banner/banner01.jpg" alt=" " />
            <img src="images/banner/banner02.jpg" alt=" " />
            <img src="images/banner/banner03.jpg" alt=" " />
        </div>
    </div><!--#slideshow-wrapper end-->

I saw other posts regarding this matter, I tried suggested there solutions; however I still can't get the slideshow to work. :-/ Because I don't know a lot about JavaScript I am more than sure I just am missing something and/or copied something wrong.

I would appreciate if someone can have a look what is going wrong here. :-)

Vetaxili
  • 609
  • 5
  • 12
  • 22
  • do you get any error in your browser console. firebug or chrome? before calling the jquery.cycle.all.js, did you include the jquery file – DG3 Apr 12 '12 at 23:43
  • Hello, no, I don't get any errors at all. The file is included () – Vetaxili Apr 13 '12 at 08:24
  • I meant the core jquery file . It should be present nefore the cycle plugin – DG3 Apr 13 '12 at 12:40

2 Answers2

0

You're not closing out your script with the right number of braces/parentheses:

$(document).ready(function()
{
  $('#slide').cycle({ 
                      fx:     'fade', 
                      speed:  'fast', 
                      timeout: 0, 
                      next:   '#next', 
                      prev:   '#prev' 
                    }
                   ); //end of #slide.cycle
}); //end of doc-ready
Marc
  • 11,403
  • 2
  • 35
  • 45
  • I corrected my code but it still doesn't seem to be working. :-( – Vetaxili Apr 13 '12 at 08:20
  • @Vetaxili you'll have much better luck getting help if you make the effort of creating a JSFiddle for us to review. – Marc Apr 13 '12 at 14:12
  • Not a clue what JSFiddle is. All I wanted to do was to incorporate the jquery I found on the internet. When I compare my code to the one on their website is pretty much is the same, so I have no idea why it won't work for me. – Vetaxili Apr 13 '12 at 17:57
  • @Vetaxili this is a great time to learn! Perform a web search for the keyword I gave you (or just go to http://jsfiddle.net), mock up what you're working with, save it, and post the link. That'll give us the ability to work with it directly. – Marc Apr 13 '12 at 18:00
0

Also, make sure there is not another occurrence of your next and prev ids.

Ctr+F in the developer tools "Elements" tab and search for "prev" or "next".

Amac
  • 158
  • 1
  • 8