Geek Answers Handbook

Jquery jcarousel how to add control buttons

I am currently working on a site that uses jorgousel Sorgilla jquery, there are two sliders that work together.

var carousel_2; jQuery(document).ready(function() { jQuery('#right-carousel').jcarousel({ start: 1, // Configuration goes here wrap: "circular", scroll: 1, auto:3, vertical:true, itemFirstInCallback: { onBeforeAnimation: function(carousel, item, index, action) { if (carousel_2) { carousel_2[action](); } } } }); }); jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ start: 3, // Configuration goes here wrap: "circular", scroll: 1, auto:3, vertical:false, buttonNextHTML: null, buttonPrevHTML: null, initCallback: function(c) { carousel_2 = c; } });

});

This works as it should, but I wonder if it is possible to add external controls with the customization I use. Unfortunately, I'm brand new to jquery, so still learning.

What I need to do is add buttons under the carousel that behave like pagination, here is an example ... http://truelogic.org/multicarousel.php or http://www.skyports.com

here is the site running http://hartyinternational.hailstormcommerce.com/

Ideally, if I could use these buttons to paginate similar to the ones above, that would be great.

I have this css configured under the carousel.

 .jcarousel-pagination { width:100px; height:40px; position:absolute; right:100px; bottom:0px; background:#000; } .jcarousel-pagination a { font-size: 75%; text-decoration: none; padding: 0 5px; margin: 0 0 5px 0; border: 1px solid #fff; color: #eee; background-color: #4088b8; font-weight: bold; }

Here is some documentation ... http://sorgalla.com/projects/jcarousel/

I was thinking about adding this code to a function inside initCallback: but I don’t know how to make it work or how to say which button represents which slide ...

  jQuery('.jcarousel-pagination a').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; });

Any help would be great, I know its a bit of a general question, but I'm not sure where to start Thanks.

+8
javascript jquery carousel
source share
2 answers

Copy / Paste the code below on the temp webpage, make sure the Javascript page points to your folder where they are located, and this should work.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="../style.css" rel="stylesheet" type="text/css" /> <!-- jQuery library --> <script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script> <!-- jCarousel library --> <script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script> <!-- jCarousel skin stylesheet --> <link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" /> <title>Untitled Document</title> <style type="text/css"> /** * Additional styles for the controls. */ .jcarousel-control { margin-bottom: 10px; text-align: center; } .jcarousel-control a { font-size: 75%; text-decoration: none; padding: 0 5px; margin: 0 0 5px 0; border: 1px solid #fff; color: #eee; background-color: #4088b8; font-weight: bold; } .jcarousel-control a:focus, .jcarousel-control a:active { outline: none; } .jcarousel-scroll { margin-top: 10px; text-align: center; } .jcarousel-scroll form { margin: 0; padding: 0; } .jcarousel-scroll select { font-size: 75%; } #mycarousel-next, #mycarousel-prev { cursor: pointer; margin-bottom: -10px; text-decoration: underline; font-size: 11px; } </style> <script type="text/javascript"> // for #mycarousel function mycarousel_initCallback(carousel) { jQuery('.jcarousel-control a').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; // end for #mycarousel // for #right-carousel function right_carousel_initCallback(carousel) { jQuery('.jcarousel-control-right a').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; // end for #right-carousel jQuery(document).ready(function() { var carousel_2; jQuery('#right_carousel').jcarousel({ start: 1, // Configuration goes here wrap: "circular", scroll: 1, auto:3, vertical:true, initCallback: right_carousel_initCallback, itemFirstInCallback: { onBeforeAnimation: function(carousel, item, index, action) { if (carousel_2) { carousel_2[action](); } } } }); jQuery('#mycarousel').jcarousel({ start: 3, // Configuration goes here wrap: "circular", scroll: 1, auto:3, vertical:false, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null, }); }); </script> </head> <body> <div id="mycarousel" class="jcarousel-skin-tango"> <div class="jcarousel-control"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> </div> <ul> <li><img width="75" height="75" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li> </ul> <div class="jcarousel-scroll"> <form action=""> <a href="#" id="mycarousel-prev">&laquo; Prev</a> <select> <option value="1">Scroll 1 item per click</option> <option value="2">Scroll 2 items per click</option> <option value="3">Scroll 3 items per click</option> <option value="4">Scroll 4 items per click</option> <option value="5">Scroll 5 items per click</option> </select> <a href="#" id="mycarousel-next">Next &raquo;</a> </form> </div> </div> </div> <!-- second one --> <div id="right_carousel" class="jcarousel-skin-tango"> <div class="jcarousel-control-right"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> </div> <ul> <li><img width="75" height="75" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></li> <li><img width="75" height="75" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></li> </ul> <div class="jcarousel-scroll"> <form action=""> <a href="#" id="mycarousel-prev">&laquo; Prev</a> <select> <option value="1">Scroll 1 item per click</option> <option value="2">Scroll 2 items per click</option> <option value="3">Scroll 3 items per click</option> <option value="4">Scroll 4 items per click</option> <option value="5">Scroll 5 items per click</option> </select> <a href="#" id="mycarousel-next">Next &raquo;</a> </form> </div> </div> </div> </body> </html>
+3
source share

In fact, they use this function to rotate

  jQuery(document).ready(function() { $('.lnkDot').click(function(){alert(1) var img = jQuery(this).attr('id'); var id = img.substring(img.length-1); var currId = currentDot; var i = 0; var start= 0; var stop = 0; if (parseInt(currId) < parseInt(id)) { start = currId; stop = id; } else { start= id; stop = currId; } for (i = start; i<= stop; i++) { actionFromDot = true; var carousel = jQuery('#mycarousel').data('jcarousel'); carousel.next(); } currentDot = id; return false; }); });

What do they do when they click on the pagination, they take the identifier of the current element and get the number (var id = img.substring (img.length-1);).

Once they get the number, they will have a start and end position to rotate (the start position is calculated from the global variable currentDot ).

Later id with click currentDot

Change your page links like this.

 <a href="#" id='page1' class='lnkDot'>1</a> <a href="#" id='page2' class='lnkDot'>2</a> <a href="#" id='page3' class='lnkDot'>3</a>
+3
source share

More articles:


All Articles