Soví kolotoč - plugin jQuery s podporou dotyku, čo vám umožní vytvoriť responzívny (responzívny) posuvník (kolotoč).
Je to veľmi pohodlné, jednoduché a responzívny plugin na vytváranie posúvačov, kolotočov atď.
V tomto článku sa vám pokúsim vysvetliť a ukázať, ako to funguje.

Inštalácia doplnku Owl Carousel Plugin
Najprv si musíme stiahnuť archív s doplnkom

Nižšie ukážem príklad inštalácie pluginu do šablóny DataLife Engine.

Po stiahnutí archívu ho otvorte a distribuujte súbory nasledovne:
Súbor owl.carousel.css a sova.prechody.css vložte do priečinka štýl tak alebo css.
Súbor owl.carousel.js vložte do priečinka js

Teraz musíme tieto súbory prepojiť, aby fungovali v našej šablóne.
Otváranie súboru main.tpl a pred čiarou vstupujeme nasledujúce riadky:
Priečinok css zmeniť na ten, v ktorom máte cssštýly!
Potom úplne dole pred čiarou zadáme nasledujúci riadok:
Tak to je všetko! S inštaláciou sme skončili.

Teraz musíme vložiť a nakonfigurovať samotný posúvač.
Ukážem na príklade hlavné správy tie bude zobrazovať obľúbené novinky prostredníctvom nášho kolotoča so sovami.

Stránka s dokumentáciou popisuje všetky možnosti, ukážky a ako používať náš doplnok Owl Carousel.
Kliknite na odkaz a vyberte ľubovoľný posúvač, ktorý sa vám páči.
Pre našich hlavné správy Vybral som si úplne prvý s názvom Snímky. Na karte javascript skopírujte tieto riadky:
$ (dokument) .pripravený (funkcia () ($ ("# demo-sova"). owlCarousel ((automatické prehrávanie: 3000, položky: 4, položkyPlocha:, položkyPlochaMalá:));)); a vložte ich do súboru main.tpl pred čiarou

Potom na karte CSS skopírujte riadky:
# owl-demo .item (margin: 3px;) # owl-demo .item img (zobrazenie: blok; šírka: 100 %; výška: auto;) a zahrňte ich do ľubovoľného css súbor alebo súbor main.tpl pred čiarou ale po čiare !
Teraz analyzujeme náš HTML kód a pripojíme ho hlavné správy. V súbore main.tpl vložte štítok na správne miesto (hlavné správy) ktorý zase zobrazuje zoznam populárnych správ, vzhľad ktoré je možné konfigurovať v súbore topenews.tpl, viac o tom nižšie .
Náš označený kód by mal vyzerať takto:

No a teraz nám ostáva nakonfigurovať samotné novinky.
Otváranie súboru topennews.tpl a hneď na začiatku zadáme:

Ak používate jednu z mojich šablón s Bootstrap, môžete ako možnosť použiť nasledujúce riadky v súbore topnews.tpl:

Správy sa zobrazia nasledovne

Tento plugin je možné použiť takmer kdekoľvek, rovnako ako pomocou tagu (vlastná kategória)
Dokáže nahradiť aj štandardnú DLE galériu, o tom zverejním samostatný článok. Využite to pre zdravie ;)

S pozdravom admin. Stiahnuť ▼ Upozornenie: Bol dosiahnutý limit sťahovania. Príď zajtra =)

Momentálne posuvník – karusel – funkcionalita, ktorú stačí mať na webe pre firmu, webe – portfóliu alebo akomkoľvek inom zdroji. Spolu s posúvačmi obrázkov na celej obrazovke sa horizontálne posúvače karuselu dobre hodia do akéhokoľvek webového dizajnu.

Niekedy by mal posuvník zaberať jednu tretinu stránky lokality. Posuvník kolotoča sa tu používa s prechodovými efektmi a citlivými rozloženiami. Stránky elektronického obchodu používajú posuvný posuvník na zobrazenie viacerých fotografií v jednotlivých príspevkoch alebo stránkach. Posuvný kód je možné voľne používať a meniť podľa vašich potrieb.

Použitím jQuery v spojení s HTML5 a CSS3 môžete urobiť svoje stránky zaujímavejšie tým, že im poskytnete jedinečné efekty a upozorníte návštevníkov na konkrétnu oblasť webu.

Slick - moderný posuvný plugin - kolotoč

Slick je freeware plugin jquery, ktorého vývojári tvrdia, že ich riešenie uspokojí všetky vaše požiadavky na slider. Responzívny posúvač kolotoča môže fungovať v režime dlaždíc pre mobilné zariadenia a v režime presunutia myšou pre počítačovú verziu.

Obsahuje prechodový efekt "fade", zaujímavú funkciu "režim v strede", lenivé načítanie obrázkov s automatickým rolovaním. Aktualizované funkcie zahŕňajú pridávanie snímok a filter snímok. Všetko preto, aby ste si plugin mohli prispôsobiť podľa svojich požiadaviek.

Demo režim | Stiahnuť ▼

Owl Carousel 2.0 - jQuery - dotykový doplnok

Tento plugin má vo svojom arzenáli širokú škálu funkcií, ktoré sú vhodné pre začiatočníkov aj skúsených vývojárov. to aktualizovaná verzia posúvač - kolotoč. Jeho predchodca sa volal úplne rovnako.

Posuvník obsahuje niektoré vstavané doplnky na zlepšenie celkovej funkčnosti. Animácia, prehrávanie videa, automatické prehrávanie posúvača, lenivé načítanie, automatická korekcia výšky - hlavné črty Owl Carousel 2.0.

Podpora ťahania a klesnúť zahrnuté pre pohodlnejšie používanie pluginu mobilné zariadenia.
Plugin je ideálny na zobrazovanie veľkých obrázkov aj na malých obrazovkách mobilných zariadení.

Príklady | Stiahnuť ▼

Plugin jQuery Silver Track

Pomerne malý, ale na funkčnosť bohatý doplnok jquery, ktorý vám umožňuje umiestniť na stránku posuvník - kolotoč, ktorý má malé jadro a nespotrebováva veľa zdrojov stránky. Plugin je možné použiť na zobrazenie vertikálnych a horizontálnych posuvníkov, animácií a vytváranie sád obrázkov z galérie.

Príklady | Stiahnuť ▼

AnoSlide – Ultra kompaktný responzívny posúvač jQuery

Ultra kompaktný posúvač jQuery- kolotoč, ktorého funkčnosť je oveľa viac ako u bežného posúvača. Zahŕňajú Náhľad jeden obrázok, zobrazenie viacerých obrázkov v karuseli a posúvači podľa názvu.

Príklady | Stiahnuť ▼

Kolotoč sova - Jquery Slider - Kolotoč

Sovičkový kolotoč - posúvač s podperou dotykové obrazovky a ťahová technológia a drop, ľahko vložiť do HTML kódu. Doplnok je jedným z najlepších posúvačov, ktorý vám umožňuje vytvárať krásne kolotoče bez špeciálne pripraveného označenia.

Príklady | Stiahnuť ▼

3D galéria - kolotoč

Používa 3D prechody založené na štýloch CSS a niektorých kódoch Javascript.

Príklady | Stiahnuť ▼

3D kolotoč pomocou TweenMax.js a jQuery

Skvelý 3D kolotoč. Zdá sa, že toto je stále beta verzia, pretože som s ňou práve teraz objavil niekoľko problémov. Ak máte záujem o testovanie a vytváranie vlastných sliderov, tento kolotoč vám veľmi pomôže.

Príklady | Stiahnuť ▼

Kolotoč pomocou bootstrapu

Responzívny posuvný posuvník využívajúci technológiu bootstrap vhodný pre váš nový web.

Príklady | Stiahnuť ▼

Založené na ráme posuvného kolotoča Bootstrap - Moving Box

Najžiadanejšie na portfóliových a obchodných stránkach. Tento typ posúvača kolotoča sa často nachádza na akomkoľvek type stránok.

Príklady | Stiahnuť ▼

Malý kruhový jazdec

Tento malý posúvač je pripravený pracovať na zariadeniach s akýmkoľvek rozlíšením obrazovky. Posuvník môže pracovať v kruhovom aj karuselovom režime. Malý kruh je prezentovaný ako alternatíva k inému podobnému typu posuvníkov. K dispozícii je vstavaná podpora operačné systémy IOS a Android.

Posuvník vyzerá celkom zaujímavo v kruhovom režime. Podpora drag and drop a automatický posuvný systém sú vynikajúco implementované.

Príklady | Stiahnuť ▼

Posuvník obsahu Thumbelina

Výkonný, responzívny posuvný posuvník je ideálny pre moderné webové stránky. Funguje správne na akomkoľvek zariadení. Má horizontálne a vertikálne režimy. Jeho veľkosť je minimalizovaná len na 1 KB. Ultra kompaktný plugin má tiež vynikajúce plynulé prechody.

Príklady | Stiahnuť ▼

Wow - posuvník - kolotoč

Obsahuje viac ako 50 efektov, ktoré vám môžu pomôcť vytvoriť originálny posuvník pre váš web.

Príklady | Stiahnuť ▼

Responzívny posúvač obsahu jQuery bxSlider

Zmeňte veľkosť okna prehliadača, aby ste videli, ako sa posúvač prispôsobuje. Bxslider prichádza s viac ako 50 možnosťami prispôsobenia a predvádza svoje funkcie s rôznymi prechodovými efektmi.

Príklady | Stiahnuť ▼

jCarousel

jCarousel je doplnok jQuery, ktorý vám pomôže usporiadať náhľad obrázka. Môžete jednoducho vytvoriť vlastné obrázky kolotoča z rámca zobrazeného v príklade. Posuvník reaguje a je optimalizovaný na prácu na mobilných platformách.

Príklady | Stiahnuť ▼

Scrollbox - doplnok jQuery

Scrollbox je kompaktný plugin na vytváranie posúvača - karuselu alebo riadku posúvania textu. Medzi kľúčové funkcie patrí vertikálne a horizontálne rolovanie s pauzou pri prejdení myšou.

Príklady | Stiahnuť ▼

dbpasCarousel

Jednoduchý posuvník - kolotoč. Ak potrebujete rýchly plugin, tento to urobí na 100%. Dodáva sa len so základnými funkciami potrebnými na fungovanie posúvača.

Príklady | Stiahnuť ▼

Flexisel: Responzívny doplnok JQuery Slider – kolotoč

Tvorcovia Flexisel sa inšpirovali starou školou pluginu jCarousel a vytvorili jeho kópiu zameranú na správne fungovanie posuvníka na mobilných zariadeniach a tabletoch.

Responzívne rozloženie Flexisel sa pri práci na mobilných zariadeniach líši od rozloženia orientovaného na veľkosť okna prehliadača. Flexisel je dokonale prispôsobený na prácu na obrazovkách s nízkym aj vysokým rozlíšením.

Príklady | Stiahnuť ▼

Elastislide - responzívny posúvač - kolotoč

Elastilide sa dokonale prispôsobí veľkosti obrazovky zariadenia. Môžete nastaviť minimálny počet obrázkov, ktoré sa majú zobraziť pri konkrétnom rozlíšení. Funguje dobre ako posuvný posuvník v galérii obrázkov s použitím pevného obalu v spojení s efektom vertikálneho posúvania.

Príklad | Stiahnuť ▼

FlexSlider 2

Voľne redistribuovateľný slider od Woothemes. Je považovaný za jeden z najlepšie reagujúcich posúvačov. Plugin obsahuje niekoľko šablón a bude užitočný pre začínajúcich používateľov aj odborníkov.

Príklad | Stiahnuť ▼

Úžasný kolotoč

Úžasný kolotoč - responzívny posuvník obrázky s jQuery. Podporuje mnoho systémov na správu stránok, ako sú WordPress, Drupal a Joomla. Podporuje tiež verzie operačných systémov Android a IOS a desktopové verzie bez akýchkoľvek problémov s kompatibilitou. Vstavané úžasné šablóny kolotoča vám umožňujú používať posúvač vo vertikálnom, horizontálnom a kruhovom režime.

Príklady | Stiahnuť ▼

/ * Tu začína náš kolotoč. Blok .carousel-wrapper je umiestnený relatívne, .carousel-item je absolútne umiestnený. ... . ďalej. * / .carousel-item (pozícia: absolútna; horná: 0; spodná: 0; ľavá: 0; pravá: 0; výplň: 25px50px; nepriehľadnosť: 0; prechod: all0.5sease-in-out; / * Upozornenie výplň vľavo a vpravo o 50 pixelov? Takto môžeme umiestniť naše odkazy! Každý bude mať šírku 50 pixelov. Tiež používam prázdne odkazy s vzor pozadia takým spôsobom, že odkazy vyzerajú ako šípky. Skontrolujte, či ste sa zmenili URL odkazu s pôvodnou adresou URL, aby vaše odkazy neboli len priehľadné obdĺžniky. * / .šípka (pozícia: absolútna; hore: 0; zobrazenie: blok; šírka: 50px; výška: 100 %; -webkit-tap-highlight-color: rgba (0,0,0,0); pozadie: url ( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; / * Presuňme našu šípku späť doľava. * / & .arrow-prev (vľavo: 0;) / * A druhá doprava. Keďže pre šípku používam rovnaký obrázok, otočím ho o 180 stupňov. * / & .arrow-next (vpravo: 0; -webkit-transform: otočiť (180°); transformovať: otočiť (180°);) ) / * Veľmi sa mi páči spôsob, akým sa posúvajú kolotoče tmavé pozadie a ak je blok .carousel-item triedy "light", zmeníme jeho text na biely a namiesto sivých použijeme biele šípky. Znova skontrolujte, či je cesta k obrázku šípky správna * / & .light (farba: biela; .šípka (pozadie: url ("/ carousel-arrow-light.png") 50 % 50 % / 20pxno-repeat;)) / * Napíšte mediálny dotaz na zmenu veľkosti šípok na menších zariadeniach * / @media (maximálna šírka: 480px) (.šípka, &. Light.arrow (veľkosť pozadia: 10px; poloha na pozadí: 10px50% ;))) / * Nastavte cieľ pre zobrazenie odkazov: žiadny; Zbavíme sa tak neustáleho skákania prehliadača na samý vrchol kolotoča pri každom kliknutí na šípky. Táto vlastnosť je platná pre každú položku, ktorej identifikátor začína na „cieľová položka“. * / (zobrazenie: žiadne;) / * Vyššie uvedené sme spriehľadnili všetky posuvné časti karuselu, čo znamená, že keď sa kolotoč načíta, namiesto toho dostaneme veľké prázdne pole. Zmeňte hodnotu priehľadnosti pre prvú snímku na 1 pre zobrazenie. Nastavte tiež z-index na 2 a umiestnite ho nad ostatné snímky. * / .item-1 (z-index: 2; nepriehľadnosť: 1;) / * Nechceme však, aby prvá snímka mala vždy nepriehľadnosť: 1; inak sa musíme prepracovať cez túto snímku, kým sa ostatné otáčajú. * / *: target ~ .item-1 (opacity: 0;) / * .. ale ak # target-item-1 má fokus a chceme zobraziť prvú snímku, tak ju vyberte ikonou ~ a nastavte nepriehľadnosť späť na 1 :-) * / # target-item-1: target ~ .item-1 (opacity: 1;) / * Ak sú zaostrené iné target-item- #, vyberte ich pomocou selektora ~, zobrazte ich plynulo a umiestnite ich na vrch pomocou z-indexu: 3. Tu môžete pridať ďalšie rozsahy s cieľovým ID položky, ak ich máte viac ako tri. Môže pridať 10 položiek naraz .. * / # target-item-2: target ~ .item-2, # target-item-3: target ~ .item-3 (z-index: 3; nepriehľadnosť: 1;))

Áno, téma je dosť otrepaná. Ale aj tak je často ťažké nájsť to, čo skutočne potrebujete. Všetky ponúkajú vysoko sofistikované skripty s množstvom nepotrebných funkcií. A zvyčajne sú to už komprimované pluginy.

Tak ponúknem svoje Alternatívna možnosť veľmi jednoduchý kolotoč jQuery.

Dá sa použiť ako kolotoč obrázkov, ale aj kolotoč noviniek či akéhokoľvek iného obsahu =)

Jediné malé zvončeky a píšťalky, ktoré som si dovolil, bol tieň pri kolotoči.

UPD: 07.06.2014

Bude to vyzerať asi takto:
DEMO Stiahnuť

Štruktúra bude mať nasledujúcu formu:

Poďme si popísať štýly:

Carousel (max. šírka: 1080px; / * šírka celého bloku * / okraj: 50px automaticky; šírka: 100%;). Carousel-wrapper (okraj: 10px 30px; / * výplň pre šípky * / pretečenie: skryté; / * skryť obsah mimo hlavnej oblasti * / poloha: relatívna;. carousel-items (šírka: 10000px; / * nastavenie väčšej šírky pre skupinu položiek * / position: relatívne; / * umiestnenie poľa vzhľadom na hlavný karusel oblasť * /). carousel -block (float: left; / * usporiadať všetky prvky karuselu do radu * / šírka: 250px; / * nastaviť šírku každého prvku * / výplň: 10px 10px 10px 0px; / * urobiť medzery tak že sa prvky nezlučujú * /) .kolotoč -blok img (zobrazenie: blok;) / *********** TLAČIDLÁ *********** / .kolotoč-tlačidlo- left a, .carousel-button-right a ( šírka: 25px; výška: 36px; pozícia: relatívna; horná časť: 80px; kurzor: ukazovateľ; text-decoration: none;) .carousel-button-left a (plávajúce: vľavo; background: url (../ images / carousel- left.png);) .carousel-button-right a (float: správny; background: url (../ images / carousel-right.png); ) / *********** SHADOW *********** / .shadow (box-shadow: 0px 0px 10px rgba (0, 0, 0, 0,6);)

A nakoniec, ako by to malo fungovať:

// Spravte kliknutie na pravú šípku $ (document) .on ("click", ".carousel-button-right", function () (var carusel = $ (this) .parents (. Carousel"); right_carusel (kolotoč ); návrat false;)); // Rukoväť šípka doľava click $ (document) .on ("click", ". Carousel-button-left", function () (var carusel = $ (this) .parents (. Carousel"); left_carusel (carusel ) ; návrat false;)); function left_carusel (carusel) (var block_width = $ (carusel) .find (. carousel-block"). externalWidth (); $ (carusel) .find (. carousel-items .carusel-block"). ekv (- 1) .clone (). PrependTo ($ (kolotoč) .find (. Položky karuselu")); $ (kolotoč) .find (. Položky kolotoča"). Css (("vľavo": "-" + block_width + "px")); $ (carusel) .find (. carousel-items .carousel-block"). eq (-1) .remove (); $ (carusel) .find (". carousel-items " ) .animate ((vľavo: "0px"), 200);) function right_carusel (carusel) (var block_width = $ (carusel) .find (". carousel-block"). externalWidth (); $ (carusel) . nájsť (.carousel-items"). animovať ((vľavo: "-" + block_width + "px"), 200, function () ($ (carusel) .find (. carousel-items .carousel-block") . eq (0) .clone (). appendTo ($ (carusel) .find (. carousel-items")); $ (carusel) .find (. carousel-items .carusel-block"). eq (0 ) .remove (); $ (carusel) .find (". carousel-items"). css (("left": "0px"));));) $ (function () (// Odkomentujte riadok nižšie na povolenie automatického posúvania karuselu auto_right (. carousel: first");)) // Automa rolovacia funkcia auto_right (carusel) (setInterval (funkcia () (if (! $ (carusel) .is (. hover")) right_carusel (carusel); ), 3000)) // Presuňte kurzor na karusel $ (dokument) .on ("mouseenter", ".carousel", function () ($ (this) .addClass ("hover"))) // Odstráňte kurzor z karuselu $ (dokument) .on ("mouseleave", ".carousel", funkcia () ($ (toto) .removeClass ("umiestnenie")))

V súlade s tým môže byť odtieň odstránený. A na použitie stačí nahradiť veľkosť hlavného bloku a vnorené „rolovacie“ bloky v css. Je tiež veľmi jednoduché zacykliť tento proces tak, aby sa posúval automaticky (v v tomto prípade, stačí odkomentovať volanie funkcie auto_right). To znamená, že z tejto jednoduchej galérie môžete vyrobiť všetko, čo je potrebné v rámci úlohy!

Treba tiež poznamenať, že keď je daný príklad adaptívny, to znamená, že veľkosť karuselu sa prispôsobuje veľkosti obrazovky a bude sa správne zobrazovať na obrazovke počítača alebo notebooku, ako aj na obrazovky tabletov a smartfónov.

1.jQuery clickCarousel

Blok s posúvajúcimi sa správami. Šípky doľava / doprava sa používajú na posúvanie blokov. Archív obsahuje kolotoč v dvoch štýloch: svetlý a tmavý.

1.jQuery carousel plugin "carouFredSel"

Úhľadný svieži kolotoč obrázkov jQuery.

4. jQuery Plugin: Elastislide Carousel

5. Plugin "TinyCarousel"

Skvelé posúvače obsahu v podobe kolotoča obrázkov pomocou jQuery. Ukážková stránka popisuje, ako pripojiť tento karusel k vašej lokalite.

Zásuvný modul Slider Kit, ľahký kolotoč s rôzne cesty rolovanie.

7.javascriptový kolotoč

8. Doplnok jQuery „Efekty navigácie v mriežke“

Originálna navigácia medzi miniatúrami obrázkov. Ak chcete zobraziť efekt na pravej strane ukážkovej stránky, kliknite na tlačidlá Hore a Dole. Toto riešenie jQuery tiež poskytuje efekt na umiestňovanie miniatúr a posúvanie kolieskom myši.

9. Svetelný kolotoč

10. Kolotoč z blokov Easy Paginate

Plugin jQuery „Easy Paginate“. Každý obdĺžnikový blok predstavuje bežnú položku zoznamu li, a ak sú tam viac ako tri položky, potom na ich zobrazenie potrebujete použiť posúvačovú navigáciu (pomocou šípok „dopredu“, „dozadu“ a pomocou navigačných tlačidiel na dno).

11. Vertikálny rotátor "Vertical Ticker"

Vertikálny rotátor JQuery: automatické posúvanie obsahu na stránke. K dispozícii sú navigačné tlačidlá, ako aj možnosť zastaviť rotáciu a znova ju spustiť. Keď prejdete myšou, pohyb sa zastaví. Na úrovni značiek HTML sú rolovacie bloky reprezentované bežnými položkami zoznamu li.

12.javascript css rolovacia oblasť

javascriptové riešenie „TinyScroller“ na vytvorenie rolovateľnej oblasti zabalenej v kontajneri DIV.

13. Doplnok jQuery "Smooth Div Scroll"

Plugin na implementáciu horizontálneho posúvania obsahu v špecifickej oblasti. Keď umiestnite kurzor myši na ľavý alebo pravý okraj oblasti, začne rolovanie.

Navigáciu medzi snímkami s obsahom je možné vykonať pomocou šípok alebo kliknutím na miniatúru. V spodnej časti sa nachádza tlačidlo „Zobraziť“, ktoré umožňuje skryť/zobraziť miniatúry resp Celý popisšmykľavka.

15. Rotátor obsahu „Kruhový kolotoč obsahu“

17. Posúvač

Blok s posúvačom, ktorý sa zobrazí pri umiestnení kurzora myši. V obsahu sa môžete posúvať pomocou posúvača alebo kolieska myši.

Toto riešenie jQuery bolo inšpirované podobným efektom na webovej stránke spoločnosti Apple. Vývojári tejto korporácie vždy našli zaujímavé riešenia, ktoré inšpirovali webmasterov z celého sveta. Ak chcete doplnok predviesť, vyberte si z ľubovoľnej kategórie zo zoznamu.

19. Úžasný posúvač

Posuvník sa generuje automaticky. Údaje s názvom produktu, popisom, odkazom a adresou obrázka sú prevzaté zo súboru slider.db.txt. Použité technológie: CSS, PHP, jQuery.

20. Otáčanie blokov pomocou jQuery

Ak chcete vidieť účinok rotácie bloku, kliknite na jeden z malých obdĺžnikov na stránke ukážky

Doplnok na posúvanie obsahu možno napríklad použiť na zobrazenie najnovších správ alebo na zobrazenie letákov na Twitteri na stránke.

22. Dynamický blok „Zákaznícke recenzie“

Automatické otáčanie obsahu bloku. Použité technológie: PHP, XML, CSS, jQuery.

Tento doplnok konvertuje položky zoznamu (ul li) na prvky jQuery kolotoč.

26. javascriptový kolotoč ImageFlow

Obrázky sa dajú jednoducho posúvať kolieskom myši.

27. Rolovanie obsahu

Kompaktný blok s oznamovaním najnovších materiálov na stránke alebo noviniek. Ľavý stĺpec zobrazuje stránkovaný zoznam krátkych oznámení o najnovších správach. Keď vyberiete jednu z nich, viac ako Detailný popis a odkaz na prečítanie celého znenia publikácie. Implementované pomocou jQuery.

Obrázky s odkazmi sa posúvajú, keď podržíte myš, posúvanie sa zastaví a zobrazí sa navigačná lišta. Po prejdení myšou na obrázok sa medzi ovládacími tlačidlami zobrazí aj jeho názov. Na stránke to vyzerá veľmi pekne

33. Posúvanie obsahu, doplnok Mootools "Scrollbar"

Posúvanie sa vykonáva pomocou posuvnej lišty aj kolieska myši.