{"id":15553,"date":"2012-03-06T07:21:12","date_gmt":"2012-03-06T12:21:12","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=15553"},"modified":"2017-08-01T06:12:32","modified_gmt":"2017-08-01T10:12:32","slug":"joomla-2-5-how-to-work-with-jcarousel","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/joomla-2-5-how-to-work-with-jcarousel.html","title":{"rendered":"Joomla 2.5 How to work with jCarousel"},"content":{"rendered":"<p>\r\n<p>This tutorial shows how to work with carousel in Joomla 2.5 templates.<\/p>\r\n<p><!--more--><\/p>\r\n<p>First of all open Joomla administration panel and locate the\u00a0<strong>carousel<\/strong>\u00a0module. Check the <strong>carousel<\/strong> module type. All modules are located in the\u00a0<strong>Extensions &gt; Modules Manager<\/strong>\u00a0section of the admin panel.<\/p>\r\n<p>Usually to create carousel we use <strong>K2 content<\/strong> module and <strong>jCarousel<\/strong> jQuery plugin. Open the module settings page and look at the <strong>Basic Settings<\/strong> section. <\/p>\r\n<p><a href=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/03\/joomla25-carousel-1.jpg\"><img loading=\"lazy\" src=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/03\/joomla25-carousel-1-300x257.jpg\" alt=\"\" title=\"joomla25-carousel-1\" width=\"300\" height=\"257\" class=\"aligncenter size-medium wp-image-15556\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/03\/joomla25-carousel-1-300x257.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/03\/joomla25-carousel-1.jpg 643w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>The vitally important settings are the <strong>module class suffix<\/strong> and <strong>sub-template<\/strong>. <\/p>\r\n<p class=\"attnetion\">You can use any module class suffix for the jCarousel module but it should exist. <\/p>\r\n<p>The other thing is a <strong>sub-template<\/strong>. In the select box please choose jcarousel sub-template. <\/p>\r\n<p>In the <strong>Items Count <\/strong>field please type the number of items you want to display. <\/p>\r\n<p> In the\u00a0<strong>sources<\/strong>\u00a0select box please choose if you want to display items from the specific category or display specific items. <\/p>\r\n<p> In the Item\u00a0<strong>View Options\u00a0<\/strong>section please define what parts of the item you want to display (title, introtext, image etc) <\/p>\r\n<p><a href=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/03\/joomla25-carousel-2.jpg\"><img loading=\"lazy\" src=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/03\/joomla25-carousel-2-300x286.jpg\" alt=\"\" title=\"joomla25-carousel-2\" width=\"300\" height=\"286\" class=\"aligncenter size-medium wp-image-15555\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/03\/joomla25-carousel-2-300x286.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/03\/joomla25-carousel-2.jpg 602w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>In case you want to perform some advanced changes to the carousel feel free to edit the following files from the <strong>templates\/theme###<\/strong> directory:<\/p>\r\n<ul class=\"files-structure\">\r\n<li class=\"lev-1\">css<\/li>\r\n<li class=\"lev-2 file\">jquery.jcarousel.css &#8211; carousel css file<\/li>\r\n<li class=\"lev-1\">js<\/li>\r\n<li class=\"lev-2 file\">jquery.jcarousel.min.js &#8211; carousel JavaScript file<\/li>\r\n<\/ul>\r\n<p>In case you need to edit the carousel module core file please edit <strong>html\\mod_k2_content\\jcarousel\\default.php<\/strong> file<\/p>\r\n<p>At the top of this file you can see jCarousel settings and change them according to your needs:<\/p>\r\n<pre class=\"brush:php\">\r\n&lt;script&gt;\r\njQuery(window).load(function(){\r\n\/*Carousel ID is defined by the module class suffix.*\/\r\nvar $carousel_ul_id = $('#&lt;?php if($params-&gt;get('moduleclass_sfx')) echo $params-&gt;get('moduleclass_sfx'); ?&gt;');\r\n$carousel_ul_id.jcarousel({\r\n  visible: 3,\r\n  scroll: 1,\r\n  wrap: 'circular',\r\n  animation: 'slow'\r\n  })\r\n  });\r\n  &lt;\/script&gt;\r\n<\/pre>\r\n<p><\/p>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/cart.php?addOffer=587\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-1-(500-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n<p><!--more--><\/p>\r\n<p><!--more--><\/p>\r\n<p><!--more--><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to work with carousel in Joomla 2.5 templates.<\/p>\n","protected":false},"author":2,"featured_media":15554,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[724],"tags":[821,1129,483,1131],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/15553"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=15553"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/15553\/revisions"}],"predecessor-version":[{"id":82419,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/15553\/revisions\/82419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/15554"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=15553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=15553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=15553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}