Installing and configuring JCAROUSEL. Parameters and methods

In this article, we would like to tell you about an excellent plugin tool for creating animated image and text sliders on your website. The subject of our attention today will be the jQuery carousel jCarousel. In the article we will: get acquainted with the carousel; Let's learn how to integrate it into your website; Let's get acquainted with the main initialization parameters; Let's look at the most popular properties and methods of the jCarousel classes.

jCarousel is a jQuery carousel plugin for managing data displayed as a horizontal or vertical list. The data can be presented as regular HTML content or can be loaded using AJAX. The list can be set to scroll forward or backward, with or without animation. The main notable feature of the carousel is its rich functionality and wide possibilities for customizing the slider to suit your needs. This slider is “rubber” and can adapt to any layout. It has the ability to configure delay time, scrolling, animation type, place text blocks and blocks with a text description of the slider out of the box. Based on the jCarousel plugin, you can easily create scrollbars for both text content, graphic content, and text-graphic content.

You can download it on GitHub: https://github.com/jsor/jcarousel/releases

Examples of implementations on the official website: http://sorgalla.com/jcarousel/examples/

Installing and initializing the jCarousel plugin on the site 

For the jCarousel carousel to work, you need to create the following structure of HTML entities, connect the jQuery library, JS plugin and carousel styling table (css file):

<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />

 <div class="jcarousel"> <--------------------------------| Root element
   <ul> <-------------------------------| List element  |
        <li>...</li> <---| Item element  |               |
        <li>...</li> <---| Item element  |               |
    </ul> <------------------------------|               |
</div> <-------------------------------------------------|

You can create your own carousel styling based on the css file from the examples. The jCarousel carousel can consist of various HTML tags, but must necessarily be reduced to this design:

<div class="jcarousel"> <-------------------------------| Root element
    <div> <------------------------------| List element  |
        <p>...</p> <-----| Item element  |               |
        <p>...</p> <-----| Item element  |               |
    </div> <-----------------------------|               |
</div> <-------------------------------------------------|

To initialize the jQuery carousel jCarousel you need to place the following code:

(function($) {    $(function() {
    $('.jcarousel').jcarousel({         // Конфигурация инициализации     }); 
});

 jCarousel Initialization Options

The jCarousel carousel has a number of parameters that you can set when initializing the carousel. Parameters define carousel behavior, animation types, and describe non-standard situations.

$('.jcarousel').jcarousel({ list: '.jcarousel-list' });

$('.jcarousel').jcarousel({ items: '.jcarousel-item' });

$('.jcarousel').jcarousel({ animation: 'slow' }); 

$('.jcarousel').jcarousel({
    animation: {
        duration: 800,
        easing: 'linear',
        complete: function() {} 
    } 
});

$('.jcarousel').jcarousel({ transitions: true });

$('.jcarousel').jcarousel({ 
    transitions: Modernizr.csstransitions ? {
        transforms: Modernizr.csstransforms,
        transforms3d: Modernizr.csstransforms3d,
        easing: 'ease' 
    } : false
});

$('.jcarousel').jcarousel({ wrap: 'both' });

$('.jcarousel').jcarousel({ vertical: true });

$('.jcarousel').jcarousel({ rtl: true });

<div class="jcarousel" dir="rtl">
    <ul>
        <li>...</li>
    </ul>
</div>

<script>
$('.jcarousel').jcarousel();
</script>

Calling jCarousel Carousel Methods

jQuery carousel jCarousel has the ability to access properties and methods of jCarousel classes. In this section we will look at the most popular examples. A complete description of classes and methods can be found in the documentation on the developer’s official website:

Documentation on the official website: http://sorgalla.com/jcarousel/docs/

Carousel navigation buttons

Scrolling control of the jCarousel carousel is provided using the navigation and control buttons. To install and initialize carousel control buttons, you need to create the following structure of HTML entities on your site: 

<!-- Wrapper -->
<div>
    <!-- Carousel -->
    <div class="jcarousel">
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
    <!-- Controls -->
    <a class="jcarousel-prev" href="#">Prev</a>
    <a class="jcarousel-next" href="#">Next</a>
</div>

<script>
$(function() {
    $('.jcarousel').jcarousel({
        // Конфигурация инициализации
    });

    $('.jcarousel-prev').jcarouselControl({ target: '-=1' });
    $('.jcarousel-next').jcarouselControl({ target: '+=1' });
});
</script>

Carousel slide numbering - pagination

jQuery carousel has the ability to integrate slide numbering with navigation functionality. When you click on a number initial, jCarusel displays the carousel element that this number corresponds to. To install and initialize pagination, you need to bring the carousel to the following structure:

<!-- Wrapper -->
<div>
    <!-- Carousel -->
    <div class="jcarousel">
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>

    <!-- Pagination -->
    <div class="jcarousel-pagination">
        <!-- Pagination items will be generated in here -->
    </div>
</div>

<script>
$(function() {
    $('.jcarousel').jcarousel({
        // Конфигурация инициализации
    });

    $('.jcarousel-pagination').jcarouselPagination({
        item: function(page) {
            return '<a href="#' + page + '">' + page + '</a>';
        }
    })
});
</script>

Automatic scrolling carousel

The carousel has the most popular and popular property - auto-scrolling of the carousel contents. When calling this method, you can set autoscroll properties, such as: delay time for carousel slides; scroll step; autostart To initialize autoscrolling of the jCarousel carousel, you need to call the jcarouselAutoscroll method :

$(function() {
    $('.jcarousel')
        .jcarousel({
            // Конфигурация инициализации
            })

        .jcarouselAutoscroll({
            interval: 3000,
            target: '+=1',
            autostart: true
        });
});

Summary of the article

As a result, we would like to bring it to a common denominator and once again highlight the relevance and versatility of the jQuery jCarousel carousel. As a result of the article, we got acquainted with the carousel and learned how to install and initialize the carousel on the site. We looked at the design and principle of operation in examples. We became familiar with the possible initialization parameters and popular methods and properties of the jCarousel classes. We looked at examples of accessing methods and properties.

Thank you all for your attention!