Categories

Featured templates

Joomla 2.5 How to work with jCarousel

Chris Diaz March 6, 2012
Rating: 5.0/5. From 3 votes.
Please wait...

This tutorial shows how to work with carousel in Joomla 2.5 templates.

First of all open Joomla administration panel and locate the carousel module. Check the carousel module type. All modules are located in the Extensions > Modules Manager section of the admin panel.

Usually to create carousel we use K2 content module and jCarousel jQuery plugin. Open the module settings page and look at the Basic Settings section.

The vitally important settings are the module class suffix and sub-template.

You can use any module class suffix for the jCarousel module but it should exist.

The other thing is a sub-template. In the select box please choose jcarousel sub-template.

In the Items Count field please type the number of items you want to display.

In the sources select box please choose if you want to display items from the specific category or display specific items.

In the Item View Options section please define what parts of the item you want to display (title, introtext, image etc)

In case you want to perform some advanced changes to the carousel feel free to edit the following files from the templates/theme### directory:

  • css
  • jquery.jcarousel.css – carousel css file
  • js
  • jquery.jcarousel.min.js – carousel JavaScript file

In case you need to edit the carousel module core file please edit html\mod_k2_content\jcarousel\default.php file

At the top of this file you can see jCarousel settings and change them according to your needs:

<script>
jQuery(window).load(function(){
/*Carousel ID is defined by the module class suffix.*/
var $carousel_ul_id = $('#<?php if($params->get('moduleclass_sfx')) echo $params->get('moduleclass_sfx'); ?>');
$carousel_ul_id.jcarousel({
  visible: 3,
  scroll: 1,
  wrap: 'circular',
  animation: 'slow'
  })
  });
  </script>

Fresh Joomla Templates
This entry was posted in Joomla! Tutorials and tagged carousel, framework, joomla, k2. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket