{"id":1232,"date":"2012-06-09T10:20:02","date_gmt":"2012-06-09T10:20:02","guid":{"rendered":"http:\/\/truelogic.org\/wordpress\/?p=1232"},"modified":"2014-05-13T05:27:25","modified_gmt":"2014-05-13T05:27:25","slug":"create-a-multi-carousel-using-jquery-and-jcarousel","status":"publish","type":"post","link":"https:\/\/truelogic.org\/wordpress\/2012\/06\/09\/create-a-multi-carousel-using-jquery-and-jcarousel\/","title":{"rendered":"Create a Multi-Carousel using JQuery and JCarousel"},"content":{"rendered":"            <script type=\"text\/javascript\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/plugins\/wordpress-code-snippet\/scripts\/shBrushJScript.js\"><\/script>\n            <script type=\"text\/javascript\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/plugins\/wordpress-code-snippet\/scripts\/shBrushXml.js\"><\/script>\n<figure id=\"attachment_1257\" aria-describedby=\"caption-attachment-1257\" style=\"width: 913px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/truelogic.org\/wordpress\/2012\/06\/09\/create-a-multi-carousel-using-jquery-and-jcarousel\/home-title-2012-06-09-15-44-18\/\" rel=\"attachment wp-att-1257\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1257\" title=\"home title 2012-06-09 15-44-18\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/06\/home-title-2012-06-09-15-44-18.png\" alt=\"\" width=\"913\" height=\"283\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/06\/home-title-2012-06-09-15-44-18.png 913w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/06\/home-title-2012-06-09-15-44-18-300x92.png 300w\" sizes=\"auto, (max-width: 913px) 100vw, 913px\" \/><\/a><figcaption id=\"caption-attachment-1257\" class=\"wp-caption-text\">Multicarousel demo<\/figcaption><\/figure>\n<p><strong>OVERVIEW<\/strong><\/p>\n<p>By Multicarousel I mean showing a horizontal and vertical carousel together and letting one carousel trigger the other. You can extend this logic to have three or more carousels together with a trigger cascade i.e carousel 1 triggers carousel 2 and carousel 2 which triggers carousel 3 and so on.<\/p>\n<p>This demo is purely javascript and HTML based, but in real-world sites you would want to populate the carousels using server-side code.<\/p>\n<p><strong>WHAT YOU NEED<\/strong><\/p>\n<ul>\n<li><a title=\"JQuery\" href=\"http:\/\/www.jquery.com\" target=\"_blank\">Jquery <\/a>at least 1.4.2 or above<\/li>\n<li><a title=\"JCarousel\" href=\"http:\/\/sorgalla.com\/jcarousel\/\" target=\"_blank\">jsor-jCarousel<\/a><\/li>\n<\/ul>\n<p><strong>HOW THIS WORKS<\/strong><\/p>\n<p><a href=\"https:\/\/truelogic.org\/wordpress\/2012\/06\/09\/create-a-multi-carousel-using-jquery-and-jcarousel\/multi-carousel-demo-2012-06-09-14-45-40\/\" rel=\"attachment wp-att-1238\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1238\" title=\"Multi Carousel Demo 2012-06-09 14-45-40\" src=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/06\/Multi-Carousel-Demo-2012-06-09-14-45-40.png\" alt=\"\" width=\"1143\" height=\"386\" srcset=\"https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/06\/Multi-Carousel-Demo-2012-06-09-14-45-40.png 1143w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/06\/Multi-Carousel-Demo-2012-06-09-14-45-40-300x101.png 300w, https:\/\/truelogic.org\/wordpress\/wp-content\/uploads\/2012\/06\/Multi-Carousel-Demo-2012-06-09-14-45-40-1024x345.png 1024w\" sizes=\"auto, (max-width: 1143px) 100vw, 1143px\" \/><\/a><\/p>\n<p>JCarousel can be setup either as a horizontal carousel or a vertical one. What we are doing here, is show two different carousels &#8211; one vertical and one horizontal and use the vertical one to trigger the horizontal one.<\/p>\n<p>The number of items in each of the carousels has to be the same. In this case its assumed to be 5. JCarousel configuration allows a carousel to have navigation controls or not. Here we show navigation controls for the vertical carousel and hide them for the horizontal carousel.<\/p>\n<p>Every time the next arrow on the vertical carousel is clicked it triggers the horizontal carousel to move to the next item and the same for the previous arrow.<\/p>\n<p>The easing effect has been added as extra eye-candy, but you can apply any jquery effect you want or simply have no effects &#8211; have smooth scrolling.<\/p>\n<p>Another visual component added is 5 dot images between the navigation arrows. According to the current image highlighted in the vertical carousel the relevant dot gets highlighted.<\/p>\n<p>The triggering and the highlighting of the dots is done using the javascript function <strong><em>juggle()<\/em><\/strong><br \/>\n<pre class=\"brush: js\">\tfunction mycarousel_itemLoadCallback(carousel, state)\r\n\t{\r\n\r\n\t\tjuggle(state, carousel.first, carousel.last);\r\n\r\n\t};\r\n\r\n\r\nvar arrDots= new Array();\r\narrDots[0] = false;\r\narrDots[1]= false;\r\narrDots[2] = false;\r\narrDots[3] = false;\r\narrDots[4] = false;\r\n\r\nvar currentDot = 1;\r\nvar actionFromDot =false;\r\n\r\n\r\n\t$(document).ready(function() {\r\n    \tjQuery(&#039;#mycarousel&#039;).jcarousel({\r\n        \tvertical: true,\r\n\t        scroll: 1,\r\n\t\t\titemLoadCallback: mycarousel_itemLoadCallback,\r\n\t\t\teasing: &#039;BounceEaseOut&#039;,\r\n\t\t\tanimation:500,\r\n\t\t\twrap: &#039;circular&#039;\r\n\t    });\r\n\r\n\t\tjQuery(&#039;#mycarouselmain&#039;).jcarousel({\r\n        \tvertical: false,\r\n\t        scroll: 1,\r\n\t\t\teasing: &#039;BounceEaseOut&#039;,\r\n\t\t\tanimation:800,\r\n\t\t\tbuttonNextHTML : null,\r\n\t\t\tbuttonPrevHTML: null,\r\n\t\t\twrap: &#039;circular&#039;\r\n\t    });\r\n\r\n\r\n\t\tjQuery(&#039;.imgDot&#039;).hover(function(){\r\n\t\t\tvar img = jQuery(this).attr(&#039;id&#039;);\r\n\t\t\tvar id = img.substring(img.length-1);\r\n\t\t\tif (arrDots[id] == false)\t\t\t\r\n\t\t\t\tjQuery(this).attr(&#039;src&#039;, &#039;includes\/jquery\/jsor-jcarousel\/skins\/custom\/dot_hover.PNG&#039;);\r\n\t\t});\t\r\n\r\n\t\tjQuery(&#039;.imgDot&#039;).mouseout(function(){\r\n\t\t\tvar img = jQuery(this).attr(&#039;id&#039;);\r\n\t\t\tvar id = img.substring(img.length-1);\r\n\t\t\tif (arrDots[id] == false)\t\t\t\t\t\r\n\t\t\t\tjQuery(this).attr(&#039;src&#039;, &#039;includes\/jquery\/jsor-jcarousel\/skins\/custom\/dot.PNG&#039;);\r\n\t\t});\t\r\n\r\n\r\n\t\tjQuery(&#039;.lnkDot&#039;).click(function(){\r\n\t\t\tvar img = jQuery(this).attr(&#039;id&#039;);\r\n\t\t\tvar id = img.substring(img.length-1);\r\n\r\n\t\t\tvar currId = currentDot;\r\n\t\t\tvar i = 0;\r\n\t\t\tvar start= 0;\r\n\t\t\tvar stop = 0;\r\n\r\n\t\t\tif (parseInt(currId) &lt; parseInt(id)) {\r\n\t\t\t\tstart = currId;\r\n\t\t\t\tstop = id;\r\n\t\t\t}\r\n\t\t\telse {\r\n\t\t\t\tstart= id;\r\n\t\t\t\tstop = currId;\r\n\t\t\t}\r\n\t\t\tfor (i = start; i&lt;= stop; i++) {\r\n\t\t\t\tactionFromDot = true;\r\n\r\n\t\t\t\tvar carousel = jQuery(&#039;#mycarousel&#039;).data(&#039;jcarousel&#039;);\r\n\t\t\t\tcarousel.next();\r\n\r\n\t\t\t}\r\n\t\t\thighlightDot(id);\r\n\t\t\tcurrentDot = id;\r\n\r\n\t\t\treturn false;\r\n\t\t});\t\r\n\t\t\r\n\t});\r\n\r\n\tfunction highlightDot(id) {\r\n\t\timg= &quot;imgDot&quot;;\r\n\t\timg += id;\r\n\r\n\r\n\t\tvar i = 0;\r\n\t\tfor(i = 0; i &lt;= 5; i++) {\r\n\t\t\tarrDots[i] = false;\r\n\t\t\tjQuery(&#039;#imgDot&#039; + i).attr(&#039;src&#039;, &#039;includes\/jquery\/jsor-jcarousel\/skins\/custom\/dot.PNG&#039;);\r\n\r\n\t\t}\r\n\t\tarrDots[id] = true;\r\n\t\tcurrentDot = id;\r\n\t\tjQuery(&#039;#&#039; + img).attr(&#039;src&#039;, &#039;includes\/jquery\/jsor-jcarousel\/skins\/custom\/dot_big.PNG&#039;);\r\n\r\n\r\n\t}\r\n\r\n\r\n\tfunction juggle(state, start_item, stop_item) {\r\n\t\tif (!actionFromDot) {\r\n\t\t\t\tif (state == &#039;prev&#039;){\r\n\t\t\t\t\tcurrentDot -- ;\r\n\t\t\t\t\tif (currentDot &lt; 1)\r\n\t\t\t\t\t\tcurrentDot = 5;\r\n\t\t\t\t}\r\n\t\t\t\telse if (state == &#039;next&#039;) {\r\n\t\t\t\t\tcurrentDot ++;\r\n\t\t\t\t\tif (currentDot &gt; 5)\r\n\t\t\t\t\t\tcurrentDot = 1;\r\n\t\t\t\t}\r\n\r\n\t\t\thighlightDot(currentDot);\r\n\t\t}\r\n\t\tactionFromDot = false;\r\n\r\n\t\tif (state == &quot;prev&quot; ) {\r\n\t\t\tvar carousel = jQuery(&#039;#mycarouselmain&#039;).data(&#039;jcarousel&#039;);\r\n\t\t\tcarousel.prev();\r\n\t\t}\r\n\t\telse if (state == &quot;next&quot; ) {\r\n\t\t\tvar carousel = jQuery(&#039;#mycarouselmain&#039;).data(&#039;jcarousel&#039;);\r\n\t\t\tcarousel.next();\r\n\r\n\t\t}\t\t\r\n\t }\t\r\n<\/pre><\/p>\n<p>The HTML code is given below:<br \/>\n<pre class=\"brush: xml\">&lt;div class=&quot;container&quot;&gt;\r\n\t&lt;div class=&quot;bottom&quot;&gt;\r\n\t\t&lt;div class=&quot;left&quot;&gt;\r\n\t\t\t&lt;ul id=&quot;mycarouselmain&quot; class=&quot;jcarousel-skin-custom&quot;&gt;\t\t\t\t\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;div id=&quot;clarge0&quot; class=&quot;topPhone&quot;&gt;\r\n\t\t\t\t\tBLOCK 1\t\r\n                &lt;\/div&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;div id=&quot;clarge1&quot;  class=&quot;topPhone&quot;&gt;\r\n\t\t\t\t\tBLOCK 2\t\r\n                &lt;\/div&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;div id=&quot;clarge2&quot;  class=&quot;topPhone&quot;&gt;\r\n\t\t\t\t\tBLOCK 3\t\r\n                &lt;\/div&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;div id=&quot;clarge3&quot;  class=&quot;topPhone&quot;&gt;\r\n\t\t\t\t\tBLOCK 4\t\r\n                &lt;\/div&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;div id=&quot;clarge4&quot;  class=&quot;topPhone&quot;&gt;\r\n\t\t\t\t\tBLOCK 5\t\r\n                &lt;\/div&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t&lt;\/ul&gt;\r\n\t\t&lt;\/div&gt;\r\n\r\n\r\n\t\t&lt;div class=&quot;right&quot;&gt;\r\n\t\t\t&lt;ul id=&quot;mycarousel&quot; class=&quot;jcarousel-skin-custom&quot;&gt;\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;div id=&quot;csmall0&quot; class=&quot;partPhone&quot;&gt;\r\n\t\t\t\t\tBLOCK 2\t\r\n                &lt;\/div&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;div id=&quot;csmall1&quot; class=&quot;partPhone&quot;&gt;\r\n\t\t\t\t\tBLOCK 3\t\r\n                &lt;\/div&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;div id=&quot;csmall2&quot; class=&quot;partPhone&quot;&gt;\r\n\t\t\t\t\tBLOCK 4\t\r\n                &lt;\/div&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;div id=&quot;csmall3&quot; class=&quot;partPhone&quot;&gt;\r\n\t\t\t\t\tBLOCK 5\t\r\n                &lt;\/div&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t\r\n\t\t\t&lt;li&gt;\r\n\t\t\t\t&lt;div id=&quot;csmall4&quot; class=&quot;partPhone&quot;&gt;\r\n\t\t\t\t\tBLOCK 1\t\r\n                &lt;\/div&gt;\r\n\t\t\t&lt;\/li&gt;\r\n\t\t\t\r\n\t\t\t&lt;\/ul&gt;\r\n\t\t\t&lt;div class=&quot;carousel_dots&quot;&gt;\r\n\t\t\t&lt;a href=&quot;#&quot; class=&quot;lnkDot&quot; id=&quot;lnkDot1&quot;&gt;&lt;img id=&quot;imgDot1&quot; class=&quot;imgDot&quot; src=&quot;..\/includes\/jquery\/jsor-jcarousel\/skins\/custom\/dot.PNG&quot; border=0 align=center&gt;&lt;\/a&gt;&nbsp;\r\n\t\t\t\t&lt;a href=&quot;#&quot; class=&quot;lnkDot&quot; id=&quot;lnkDot2&quot;&gt;&lt;img  id=&quot;imgDot2&quot;  class=&quot;imgDot&quot; src=&quot;..\/includes\/jquery\/jsor-jcarousel\/skins\/custom\/dot.PNG&quot; border=0 align=center&gt;&lt;\/a&gt;&nbsp;\r\n\r\n\t\t\t\t&lt;a href=&quot;#&quot; class=&quot;lnkDot&quot; id=&quot;lnkDot3&quot;&gt;&lt;img  id=&quot;imgDot3&quot;  class=&quot;imgDot&quot; src=&quot;..\/includes\/jquery\/jsor-jcarousel\/skins\/custom\/dot.PNG&quot; border=0 align=center&gt;&lt;\/a&gt;&nbsp;\r\n\r\n\t\t\t\t&lt;a href=&quot;#&quot; class=&quot;lnkDot&quot; id=&quot;lnkDot4&quot;&gt;&lt;img  id=&quot;imgDot4&quot;  class=&quot;imgDot&quot;  src=&quot;..\/includes\/jquery\/jsor-jcarousel\/skins\/custom\/dot.PNG&quot; border=0 align=center&gt;&lt;\/a&gt;&nbsp;\r\n\r\n\t\t\t\t&lt;a href=&quot;#&quot; class=&quot;lnkDot&quot; id=&quot;lnkDot5&quot;&gt;&lt;img  id=&quot;imgDot5&quot;  class=&quot;imgDot&quot; src=&quot;..\/includes\/jquery\/jsor-jcarousel\/skins\/custom\/dot.PNG&quot; border=0 align=center&gt;&lt;\/a&gt;&nbsp;\r\n\r\n\r\n\t\t\t&lt;\/div&gt;\r\n\t\t&lt;\/div&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre><\/p>\n<p>The horizontal carousel has been set to show only one item at a time and the vertical carousel shows two items at a time. The visual effect is that if there are 5 items to show then item 1 shows in the horizontal carousel and 2 and 3 show in the vertical one. On clicking next, item 2 moves to the horizontal carousel and 3,4 show in the vertical one.<\/p>\n<p><strong>BEFORE DOWNLOADING AND RUNNING THE CODE<br \/>\n<\/strong><\/p>\n<p>Please note that in the code, the jquery and jcarousel scripts are assumed to be in a folder called \/includes . You would have to change the path in the php file as per your own folder setup.<\/p>\n<p>Also you can easily rename the php file to html and execute since there is no server-side code being executed here.<\/p>\n<p style=\"text-align: center;\"><a title=\"Multi Carousel Demo\" href=\"http:\/\/truelogic.org\/multicarousel.php\" target=\"_blank\">Click here to see the demo<\/a><\/p>\n<p style=\"text-align: center;\"><a title=\"Multicarousel Source\" href=\"http:\/\/truelogic.org\/multicarousel.zip\" target=\"_blank\">Click here to download the source<\/a><\/p>\n<p style=\"text-align: left;\">All comments\/queries and opinions are welcome.<\/p>\n<p style=\"text-align: left;\">\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>OVERVIEW By Multicarousel I mean showing a horizontal and vertical carousel together and letting one carousel trigger the other. You can extend this logic to <a class=\"mh-excerpt-more\" href=\"https:\/\/truelogic.org\/wordpress\/2012\/06\/09\/create-a-multi-carousel-using-jquery-and-jcarousel\/\" title=\"Create a Multi-Carousel using JQuery and JCarousel\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":1257,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-1232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/comments?post=1232"}],"version-history":[{"count":33,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1232\/revisions"}],"predecessor-version":[{"id":2048,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/posts\/1232\/revisions\/2048"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media\/1257"}],"wp:attachment":[{"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/media?parent=1232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/categories?post=1232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/truelogic.org\/wordpress\/wp-json\/wp\/v2\/tags?post=1232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}