• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2929
  • Last Modified:

jQuery Cycle2 Plugin

Hello Experts,

Can someone help me understand why its not working?
I am using jQuery Cycle2 plugin (http://jquery.malsup.com/cycle2/api/).
I use the "programatically" method and not the "Auto-Initialization".

Here is my code nothing works!

<!doctype html>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.carousel.js"></script>

.slideshow { margin: auto }
.slideshow img { width: 100px; height: 100px; padding: 2px; }
div.responsive img { width: auto; height: auto }
.cycle-pager { position: static; margin-top: 5px }
div.vertical { width: 100px }

$(document).ready(function() {
		fx: carousel,
        timeout: 0,
        next: "#next3",
        prev: "#prev3",
        pager: "#pager3",
        carouselVisible: 2,
		easing: 'easeInOutSine',
		speed: 200,
		allowWrap: false,
        carouselVertical: true			


<div id="myslider">
    <img src="http://malsup.github.com/images/beach1.jpg">
    <img src="http://malsup.github.com/images/beach2.jpg">
    <img src="http://malsup.github.com/images/beach3.jpg">
    <img src="http://malsup.github.com/images/beach4.jpg">
    <img src="http://malsup.github.com/images/beach5.jpg">
    <img src="http://malsup.github.com/images/beach6.jpg">
    <img src="http://malsup.github.com/images/beach7.jpg">
    <img src="http://malsup.github.com/images/beach8.jpg">
    <img src="http://malsup.github.com/images/beach9.jpg">
<div class=center>
    <a href=# id=prev3>&lt;&lt; Prev </a>
    <a href=# id=next3> Next &gt;&gt; </a>
<div class="cycle-pager" id=pager3></div>


Open in new window

  • 3
  • 2
1 Solution
replace your line 21 by : fx: "carousel",
if you want to use easeInOutSine ou need to download jquery UI effects

jQUery 1.8.3 : http://code.jquery.com/jquery-1.8.3.js
jQuery UI 1.9.2 with Effects : http://code.jquery.com/ui/1.9.2/jquery-ui.js

test page : http://jsfiddle.net/9rR6b/2/
RefaelAuthor Commented:
Hi leakim971

So only the quotes were missing. is that the issue?
Remove the easing too
RefaelAuthor Commented:
Great. Thank you!!
RefaelAuthor Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now