Cycle2 Plugin doesn't slide

Question

I am create a page using jquery and cycle2 plugin, but the slider is not working. I looked around the template failure for almost an hour and found nothing. The website link is here, put four images to rotate and nothing happens. What do you think I did wrong? Is it easier to create a new template?

The code in html I'm using:

<div id="slideshow" class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-pause-on-hover="true" data-cycle-speed="200" data-cycle-log="false" >  
<img src="img/slider/slide01.jpg" class="first" />  
<img src="img/slider/slide02.jpg" />  
<img src="img/slider/slide03.jpg" />  
<img src="img/slider/slide04.jpg" />
</div>

Thanks!

Answer 1

Are you sure you have included both Cycle2's js and css files? And that you are using existing images and correct paths? There's nothing wrong with the code you posted, you can check it here: http://jsfiddle.net/natnaydenova/x4dfv/

Somewhere in your HEAD section:

<link rel="stylesheet" href="css/cycle2.css">
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.cycle2.min"></script>

And then in your BODY:

<div id="slideshow" class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-pause-on-hover="true" data-cycle-speed="200" data-cycle-log="false" >  
<img src="http://malsup.github.io/images/p1.jpg" class="first" />  
<img src="http://malsup.github.io/images/p2.jpg" />  
<img src="http://malsup.github.io/images/p3.jpg" />  
<img src="http://malsup.github.io/images/p4.jpg" />
</div>
<div class="center">
    <button data-cycle-cmd="prev"><</button>
    <button data-cycle-cmd="next">></button>
</div>