Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery cycle 2 carousel not working no console errors

It's just not activating at all. I copied the code exactly as it is in the demo page of the plugin, Is there somethign I have missed?

<div class="slideshow" 
  data-cycle-fx=carousel
  data-cycle-timeout=0
  data-cycle-carousel-visible=2
  data-cycle-next="#next"
  data-cycle-prev="#prev"
  data-cycle-pager="#pager">
    <img src="http://jquery.malsup.com/cycle2/images/beach1.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach2.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach3.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach4.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach5.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach6.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach7.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach8.jpg">
    <img src="http://jquery.malsup.com/cycle2/images/beach9.jpg">
</div>

<div class=center>
    <a href="#" id="prev">&lt;&lt; Prev </a>
    <a href="#" id="next"> Next &gt;&gt; </a>
</div>

<div class="cycle-pager" id="pager"></div

<script type="text/javascript" src="jquery-1.9.1.min.js?$staticlink$"></script>

 <!-- JS FILES TO BE INCLUDED-->
<script type="text/javascript" src="anniversary/js/jquery.easing.1.3.js?$staticlink$"></script>
<script type="text/javascript" src="anniversary/js/main.js?$staticlink$"></script>
<script type="text/javascript" src="anniversary/js/jquery.cycle2.js?$staticlink$"></script>
<script type="text/javascript" src="anniversary/js/jquery.cycle2.carousel.js?$staticlink$"></script>
like image 832
user1937021 Avatar asked Mar 24 '23 10:03

user1937021


1 Answers

in order to auto-activate a slider or a carousel with cycle, you have to use the default class name "cycle-slideshow" otherwise you have to declare which class the plugin has to looking for:

<script>
  $.fn.cycle.defaults.autoSelector = [YOUR-CLASS-NAME]; //single or double quoted class without the square brackets
</script>

Don't forget to use a well clean code writing. You're missing some closure in your tags.

This is fiddle to show the working code.

like image 123
iEmanuele Avatar answered Apr 01 '23 20:04

iEmanuele