Instaliranje i konfiguriranje JCAROUSEL. Parametri i metode

U ovom članku želimo vam reći o odličnom alatu za dodatke za kreiranje klizača za animirane slike i tekst na vašoj web stranici. Predmet naše pažnje danas će biti jQuery vrtuljak jCarousel. U članku ćemo: upoznati se s vrtuljkom; Naučimo kako ga integrirati u svoju web stranicu; Hajde da se upoznamo sa glavnim parametrima inicijalizacije; Pogledajmo najpopularnija svojstva i metode jCarousel klasa.

jCarousel je jQuery dodatak za vrtuljak za upravljanje podacima prikazanim kao horizontalna ili vertikalna lista. Podaci se mogu predstaviti kao običan HTML sadržaj ili se mogu učitati pomoću AJAX-a. Lista se može podesiti da se kreće naprijed ili nazad, sa ili bez animacije. Glavna značajna karakteristika vrtuljka je njegova bogata funkcionalnost i široke mogućnosti za prilagođavanje klizača vašim potrebama. Ovaj klizač je "gumeni" i može se prilagoditi bilo kojem rasporedu. Ima mogućnost konfigurisanja vremena kašnjenja, skrolovanja, tipa animacije, postavljanja tekstualnih blokova i blokova sa tekstualnim opisom klizača iz kutije. Na osnovu dodatka jCarousel, možete lako kreirati trake za pomicanje i za tekstualni, grafički i tekstualno-grafički sadržaj.

Možete ga preuzeti na GitHubu: https://github.com/jsor/jcarousel/releases

Primjeri implementacije na službenoj web stranici: http://sorgalla.com/jcarousel/examples/

Instaliranje i inicijalizacija dodatka jCarousel na web mjestu 

Da bi jCarousel vrtuljak funkcionisao, potrebno je da kreirate sledeću strukturu HTML entiteta, povežete jQuery biblioteku, JS dodatak i tabelu stilizovanja karusela (css fajl):

<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> <-------------------------------------------------|

Možete kreirati vlastiti stil vrtuljka na osnovu css datoteke iz primjera. jCarousel vrtuljak se može sastojati od različitih HTML oznaka, ali se nužno mora svesti na ovaj dizajn:

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

Da biste inicijalizirali jQuery carousel jCarousel morate postaviti sljedeći kod:

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

Opcije inicijalizacije jCarousel

jCarousel vrtuljak ima niz parametara koje možete postaviti prilikom inicijalizacije vrtuljka. Parametri definiraju ponašanje vrtuljka, tipove animacije i opisuju nestandardne situacije.

$('.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>

Pozivanje jCarousel Carousel metoda

jQuery carousel jCarousel ima mogućnost pristupa svojstvima i metodama jCarousel klasa. U ovom dijelu ćemo pogledati najpopularnije primjere. Kompletan opis klasa i metoda može se naći u dokumentaciji na službenoj web stranici programera:

Dokumentacija na službenoj web stranici: http://sorgalla.com/jcarousel/docs/

Dugmad za navigaciju na vrtuljku

Kontrola pomicanja jCarousel vrtuljke je omogućena pomoću navigacijskih i kontrolnih dugmadi. Da biste instalirali i inicijalizirali kontrolne gumbe vrtuljke, trebate kreirati sljedeću strukturu HTML entiteta na vašoj web lokaciji: 

<!-- 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>

Numeracija slajdova na vrtuljku - paginacija

jQuery vrtuljak ima mogućnost integracije numeracije slajdova sa navigacijskom funkcijom. Kada kliknete na početni broj, jCarusel prikazuje element vrteške kojem ovaj broj odgovara. Da biste instalirali i inicijalizirali paginaciju, trebate dovesti vrtuljak u sljedeću strukturu:

 <!-- 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>

Automatsko pomicanje vrtuljke

Vrteška ima najpopularnije i najpopularnije svojstvo - automatsko pomicanje sadržaja vrteške. Kada pozivate ovu metodu, možete postaviti svojstva automatskog pomicanja, kao što su: vrijeme kašnjenja za slajdove vrteške; korak skrolovanja; autostart Da biste pokrenuli automatsko pomicanje vrtuljke jCarousel, morate pozvati metodu jcarouselAutoscroll :

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

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

Sažetak članka

Kao rezultat toga, željeli bismo ga dovesti do zajedničkog nazivnika i još jednom naglasiti relevantnost i svestranost jQuery jCarousel vrtuljke. Kao rezultat članka, upoznali smo se s vrtuljkom i naučili kako instalirati i inicijalizirati vrtuljak na web mjestu. Na primjerima smo pogledali dizajn i princip rada. Upoznali smo se sa mogućim parametrima inicijalizacije i popularnim metodama i svojstvima jCarousel klasa. Pogledali smo primjere pristupa metodama i svojstvima.

Hvala svima na pažnji!