Soví kolotoč - plugin jQuery s podporou dotyku, která umožňuje vytvořit responzivní (adaptivní) posuvník (kolotoč).
Je velmi pohodlný, jednoduchý a adaptivní plugin k vytvoření posuvníků, kolotočů atd.
V tomto článku se vám pokusím vysvětlit a ukázat, jak to funguje.

Instalace pluginu Owl Carousel
Nejprve si musíme stáhnout archiv s pluginem

Níže ukážu příklad instalace pluginu do šablony DataLife Engine.

Po stažení archivu jej otevřete a distribuujte soubory následovně:
Soubor owl.carousel.css a owl.transitions.css vložit do složky styl tak nebo css.
Soubor owl.carousel.js vložte do složky js

Nyní musíme tyto soubory propojit, aby fungovaly v naší šabloně.
Otevření souboru main.tpl a před čárou vstoupit následující řádky:
složka css změnit na ten, ve kterém se nacházíte css styly!
Pak úplně dole před čárou zadejte tento řádek:
Dobře, teď je po všem! S instalací máme hotovo.

Nyní musíme vložit a nakonfigurovat samotný posuvník.
Ukážu na příkladu hlavní zprávy ty zobrazujte oblíbené zprávy prostřednictvím našeho kolotoče sovy.

Stránka dokumentace popisuje všechny možnosti, ukázky a jak používat náš plugin Owl Carousel.
Klikněte na odkaz a vyberte libovolný posuvník, který se vám líbí.
Pro naše hlavní zprávy Vybral jsem si úplně první s názvem snímky. Na záložce javascript zkopírujte tyto řádky:
$(document).ready(function() ( $("#sova-demo").owlCarousel(( autoPlay: 3000, items: 4, itemsDesktop: , itemsDesktopSmall: )); )); a vložte je do souboru main.tpl před čárou

Poté na kartě CSS zkopírujte řádky:
#owl-demo .item( margin: 3px; ) #owl-demo .item img( display: block; width: 100%; height: auto; ) a zahrňte je do libovolné css soubor nebo do souboru main.tpl před čárou ale po čáře !
Nyní analyzujeme náš HTML kód a připojíme se k hlavní zprávy. V souboru main.tpl vložte štítek na správné místo (hlavní zprávy) což zase vytváří seznam oblíbených zpráv, vzhled které lze konfigurovat v souboru topenews.tpl, více o tom níže .
Náš kód značky by měl vypadat takto:

No, teď už jen musíme nastavit samotné novinky.
Otevření souboru topennews.tpl a hned na začátku zadáme:

Pokud používáte jednu z mých šablon Bootstrap, můžete jako možnost použít následující řádky v souboru topnews.tpl:

Novinky se budou zobrazovat v této podobě

Tento plugin lze použít téměř kdekoli, stejně jako pomocí tagu (vlastní kategorie)
Mohou také nahradit standardní DLE galerii, o tom vydám samostatný článek. Užívej si zdraví ;)

S pozdravem admin. stažení Upozornění: Bylo dosaženo limitu stahování. Přijďte zítra =)

V současné době je posuvník karuselu funkcí, kterou je prostě nutné mít na obchodním webu, na webu portfolia nebo na jakémkoli jiném zdroji. Spolu s posuvníky obrazu na celé obrazovce se horizontální posuvné posuvníky dobře hodí do jakéhokoli návrhu webu.

Někdy musí posuvník zabírat jednu třetinu stránky webu. Zde se posuvník karuselu používá s přechodovými efekty a citlivými rozvrženími. Weby elektronického obchodu používají posuvný posuvník k zobrazení více fotografií v samostatných příspěvcích nebo stránkách. Posuvný kód je zdarma k použití a mění se podle vašich potřeb.

Pomocí jQuery ve spojení s HTML5 a CSS3 můžete udělat své stránky zajímavějšími s jedinečnými efekty a přitáhnout pozornost návštěvníků na konkrétní oblast webu.

Slick - moderní posuvný modul pro kolotoč

Slick je bezplatný plugin jQuery, jehož vývojáři tvrdí, že jejich řešení uspokojí všechny vaše požadavky na slider. Responzivní posuvník – karusel může fungovat v režimu „dlaždice“ pro mobilní zařízení a v režimu „přetažení“ pro desktopovou verzi.

Obsahuje přechodový efekt blednutí, zajímavou funkci „režim uprostřed“, líné načítání obrázků s automatickým rolováním. Aktualizované funkce zahrnují přidávání snímků a filtr snímků. Vše pro vás k přizpůsobení pluginu dle vašich požadavků.

Demo režim | Stažení

Owl Carousel 2.0 - plugin jQuery pro dotyková zařízení

Tento plugin má velkou sadu funkcí, vhodný pro začátečníky i zkušené vývojáře. Tento aktualizovaná verze posuvník - kolotoč. Jeho předchůdce se jmenoval stejně.

Posuvník má některé vestavěné pluginy pro zlepšení celkové funkčnosti. Animace, přehrávání videa, automatické přehrávání posuvníku, líné načítání, automatické nastavení výšky jsou hlavními rysy Owl Carousel 2.0.

Podpora přetažení a upustit součástí pro pohodlnější používání pluginu mobilní zařízení.
Plugin je ideální pro zobrazování velkých obrázků i na malých obrazovkách mobilních zařízení.

Příklady | Stažení

Plugin jQuery Silver Track

Poměrně malý, ale bohatý plugin jquery, který umožňuje umístit na stránku posuvník karuselu, který má malé jádro a nespotřebovává mnoho zdrojů webu. Plugin lze použít k zobrazení vertikálních a horizontálních posuvníků, s animací a vytváření sad obrázků z galerie.

Příklady | Stažení

AnoSlide – Ultra kompaktní jezdec jQuery s odezvou

Ultra kompaktní posuvník jQuery- karusel, jehož funkčnost je mnohem více než u běžného posuvníku. To zahrnuje náhled jeden obrázek, zobrazení více obrázků v karuselu a posuvníku na základě titulků.

Příklady | Stažení

Owl Carousel - jquery slider - kolotoč

Soví kolotoč - jezdec s podpěrou dotykové obrazovky a drag technologie a drop , snadno vložené do HTML kódu. Plugin je jedním z nejlepších posuvníků, které vám umožňují vytvářet krásné kolotoče bez speciálně připraveného označení.

Příklady | Stažení

3D galerie - kolotoč

Používá 3D přechody založené na stylech CSS a některém kódu Javascript.

Příklady | Stažení

3D karusel pomocí TweenMax.js a jQuery

Nádherný 3D kolotoč. Vypadá to, že je to stále beta verze, protože jsem s ní právě teď našel několik problémů. Pokud máte zájem o testování a tvorbu vlastních sliderů, bude vám tento kolotoč velkým pomocníkem.

Příklady | Stažení

Kolotoč pomocí bootstrapu

Responzivní posuvník karuselu využívající technologii bootstrap přesně pro váš nový web.

Příklady | Stažení

Posuvník založený na bootstrapu - kolotoč Moving Box

Nejvyhledávanější na portfoliových a obchodních webech. Podobný typ posuvníku - karusel se často nachází na stránkách jakéhokoli typu.

Příklady | Stažení

Malý kruhový jezdec

Tento malý posuvník je připraven pracovat na zařízeních s jakýmkoli rozlišením obrazovky. Posuvník může pracovat v kruhovém i karuselovém režimu. Malý kruh je prezentován jako alternativa k jiným posuvníkům tohoto typu. Má vestavěnou podporu operační systémy IOS a Android.

V kruhovém režimu vypadá posuvník docela zajímavě. Podpora metody drag and drop a systém automatického posouvání snímků jsou dobře implementovány.

Příklady | Stažení

Posuvník obsahu Thumbelina

Výkonný, adaptivní posuvník kolotočového typu je ideální pro moderní web. Funguje správně na jakémkoli zařízení. Má horizontální a vertikální režimy. Jeho velikost je minimalizována na pouhý 1 KB. Ultra kompaktní plug-in má vynikající plynulé přechody.

Příklady | Stažení

wow posuvný kolotoč

Obsahuje více než 50 efektů, které vám mohou pomoci vytvořit originální posuvník pro váš web.

Příklady | Stažení

Responzivní posuvník obsahu jQuery bxSlider

Změňte velikost okna prohlížeče, abyste viděli, jak se posuvník přizpůsobí. Bxslider přichází s více než 50 možnostmi přizpůsobení a předvádí své funkce s různými přechodovými efekty.

Příklady | Stažení

jCarousel

jCarousel je plugin jQuery, který vám pomůže uspořádat zobrazení obrázků. Z rámce zobrazeného v příkladu budete moci snadno vytvářet vlastní karusely obrázků. Posuvník je citlivý a optimalizovaný pro mobilní platformy.

Příklady | Stažení

ScrollBox - jQuery Plugin

Scrollbox je kompaktní plugin pro tvorbu posuvníku - karuselu nebo textové běžící linky. Mezi klíčové funkce patří efekt vertikálního a horizontálního rolování s pauzou při najetí myší.

Příklady | Stažení

dbpasCarousel

Jednoduchý posuvník kolotoče. Pokud potřebujete rychlý plugin, tento je 100% vhodný. Dodává se pouze se základními funkcemi potřebnými k tomu, aby posuvník fungoval.

Příklady | Stažení

Flexisel: Responzivní plugin JQuery Carousel Slider

Tvůrci Flexiselu se inspirovali oldschoolovým pluginem jCarousel a vytvořili jeho kopii zaměřenou na správné fungování slideru na mobilních zařízeních a tabletech.

Responzivní rozložení Flexisel při běhu na mobilních zařízeních se liší od rozložení orientovaného na velikost okna prohlížeče. Flexisel je dokonale přizpůsoben pro práci na obrazovkách s nízkým i vysokým rozlišením.

Příklady | Stažení

Elastislide – citlivý posuvný kolotoč

Elastilide se dokonale přizpůsobí velikosti obrazovky zařízení. Můžete nastavit minimální počet obrázků, které se mají zobrazit při určitém rozlišení. Funguje dobře jako posuvník karuselu s galeriemi obrázků pomocí pevného obalu spolu s efektem vertikálního posouvání.

Příklad | Stažení

Flex Slider 2

Freeware slider od Woothemes. Je právem považován za jeden z nejlépe citlivých posuvníků. Plugin obsahuje několik šablon a bude užitečný jak pro začínající uživatele, tak pro odborníky.

Příklad | Stažení

Úžasný kolotoč

Úžasný kolotoč - adaptivní posuvník obrázky jQuery. Podporuje mnoho systémů pro správu obsahu, jako je WordPress, Drupal a Joomla. Podporuje také Android a IOS a desktopové verze operačních systémů bez problémů s kompatibilitou. Vestavěné úžasné šablony karuselu vám umožňují používat posuvník ve vertikálním, horizontálním a kruhovém režimu.

Příklady | Stažení

/* Tady začíná náš kolotoč. Carousel-wrapper je relativně umístěný,.carousel-položka je absolutní. . */ .carousel-wrapper( position:relative; /* Absolutně umístěná pole získají svou výšku a šířku od nadřazeného prvku. Ve výchozím nastavení jsme je zprůhlednili a poté se po kliknutí na .arrow-prev a.arrow-next zobrazí odkazy. * / .carousel-item( position:absolute; top:0; bottom:0; left:0; right:0; padding:25px50px; opacity:0; transition:all0.5sease-in-out; /* Upozornění výplň vlevo a 50 pixelů vpravo? Tímto způsobem můžeme umístit naše odkazy! Každý bude mít šířku 50 pixelů. Také používám prázdné odkazy s vzor pozadí aby odkazy vypadaly jako šipky. Zkontrolujte, zda jste se změnili Adresy URL odkazů s původní adresou URL, aby vaše odkazy nebyly jen průhledné obdélníky. */ .arrow( position:absolute; top:0; display:block; width:50px; height:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); background:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Vraťme naši šipku doleva. */ &.arrow-prev( left:0; ) /* A druhá doprava . Protože pro šipku používám stejný obrázek, otočím ji o 180 stupňů */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) / * Moc se mi líbí, jak vypadají snímky kolotoče tmavé pozadí, a pokud má blok .carousel-item třídu „light“, změníme jeho text na bílý a místo šedých použijeme bílé šipky. Znovu zkontrolujte, zda je cesta k obrázku šipky správná */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Napište dotaz na média pro změnu velikosti šipek na zařízeních s menší velikostí obrazovky.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background-position:10px50 % ;) ) ) /* Nastavit cíle odkazu pro zobrazení: žádné; Tím se zbavíme neustálého přeskakování prohlížeče na samý vrchol karuselu s každým kliknutím na šipky. Tato vlastnost se vztahuje na jakýkoli prvek, jehož ID začíná „target-item“. */ ( display:none; ) /* Nahoře jsme zprůhlednili všechny naše posuvníky karuselu, což znamená, že když se karusel načte, místo toho dostaneme velkou prázdnou krabici. Změňme hodnotu průhlednosti pro první snímek na 1 pro zobrazení. Také jsme nastavili z-index na 2 a umístili jej nad ostatní snímky. */ .item-1( z-index:2; opacity:1; ) /* Ale nechceme, aby první snímek měl vždy neprůhlednost: 1; jinak se budeme muset prodírat tímto snímkem, zatímco ostatní rotují. */ *:target~.item-1( opacity:0; ) /* ..ale pokud je #target-item-1 zaostřený a chceme zobrazit první snímek, tak jej vyberte ikonou ~ a nastavte opacity zpět na 1:-) */ #target-item-1:target~.item-1( opacity:1; ) /* Pokud jsou zaostřené jiné cílové-položky-#, vyberte je pomocí selektoru ~, zeslabte je a umístěte je navrch se z-indexem: 3. Zde můžete přidat další rozpětí s id cílové položky, pokud máte více než tři. Lze přidat 10 položek najednou.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; opacity:1; ) )

Ano, téma je dost otřepané. Ale přesto je často obtížné najít to, co skutečně potřebujete. Všechny nabízejí vysoce sofistikované skripty se spoustou funkcí navíc. A většinou se jedná již o komprimované pluginy.

Nabídnu tedy své Alternativní možnost Velmi jednoduchý kolotoč jQuery.

Může být použit jako kolotoč obrázků, kolotoč zpráv nebo jakýkoli jiný kolotoč obsahu =)

Jediné malé zvonky a píšťalky, které jsem si dovolil, byl stín u kolotoče.

UPD: 07.06.2014

Bude to vypadat nějak takto:
DEMO ke stažení

Struktura bude vypadat takto:

Pojďme si popsat styly:

Carousel ( max-width: 1080px; /* šířka celého bloku */ margin: 50px auto; width:100%; ) obsah mimo hlavní oblast */ position:relative; ) .carousel-items ( width: 10000px; / * nastavte větší šířku pro sadu položek */ position: relativní; /* umístěte rámeček vzhledem k hlavní oblasti karuselu */ ) .carousel -block ( plovoucí: vlevo; /* seřadí všechny prvky karuselu */ šířka: 250px; /* nastavení šířky každého prvku */ padding: 10px 10px 10px 0px; /* výplň tak, aby se prvky neslučovaly */ ) .carousel -block img( display:block; ) /***** ********** BUTTONS ***********/ .carousel-button-left a, .carousel-button-right a( šířka: 25px; výška: 36px; pozice: relativní ; top: 80px; kurzor: ukazatel; text-decoration:none; ) .carousel-button-left a( float: left; background: url(../images/carousel- left.png); ) .carousel-button- vpravo a( plovoucí: že jo; pozadí: url(../images/carousel-right.png); ) /*************** SHADOW ***********/ .shadow( box-shadow: 0px 0px 10px rgba(0, 0, 0, 0,6) ;)

A nakonec, jak by to mělo fungovat:

//Pomocí šipky doprava klikněte na $(document).on("click", ".carousel-button-right",function()( var carusel = $(this).parents(".carousel"); right_carusel(carusel ); návrat false; )); //Obsluha levé šipky 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").outerWidth(); $(carusel).find(".carousel-items .carousel-block").eq(- 1).clone().prependTo($(carusel).find(".carusel-items")); $(carusel).find(".carousel-items").css(("left":"-" +block_width+"px")); $(carusel).find(".carousel-items .carousel-block").eq(-1).remove(); $(carusel).find(".carousel-items" ).animate((left: "0px"), 200); ) function right_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find ("".carousel-items").animate((vlevo: "-"+ block_width +"px"), 200, function()( $(carusel).find(".carousel-items .carousel-block") . eq(0).clone().appendTo($(carusel).find(".carusel-items")); $(carusel).find(".carousel-items .carousel-block").eq(0 ) .remove(); $(carusel).find(".carousel-items").css(("left":"0px")); )); ) $(function() ( //Odkomentujte řádek níže pro povolení carousel auto scroll auto_right(".carousel:first"); )) // Auto dynamické rolování funkce auto_right(carusel)( setInterval(function()( if (!$(carusel).is(".hover")) right_carusel(carusel); ), 3000) ) // Umístění kurzoru na karusel $(document).on("mouseenter", ".carousel", function()($(this).addClass("hover"))) // Odebrán kurzor z karusel $(document).on("mouseleave", ".carousel", function()($(this).removeClass("hover")))

Podle toho lze odstín odstranit. A abyste jej mohli používat, stačí nahradit velikost hlavního bloku a vnořených „rolovacích“ bloků v css. Je také velmi snadné zacyklit tento proces tak, aby se automaticky posouval (v tento případ, stačí odkomentovat volání funkce auto_right). To znamená, že z této nenáročné galerie můžete v rámci úkolu vyrobit vše, co potřebujete!

Je třeba také poznamenat, že tento příklad je adaptivní, to znamená, že velikost karuselu se přizpůsobí velikosti obrazovky a bude se správně zobrazovat jak na obrazovce počítače nebo notebooku, tak na obrazovkách tabletů a smartphonů.

1. karusel jQuery „clickCarousel“

Blok s posouvajícími se zprávami. Šipky doleva/doprava se používají k procházení bloků. V archivu je kolotoč ve dvou stylech: světlý a tmavý.

1. karusel jQuery, plugin carouFredSel

Úhledný a svěží kolotoč obrázků jQuery.

4. jQuery Plugin: Elastislide Carousel

5. Plugin "TinyCarousel"

Skvělé posuvníky obsahu v podobě obrázkového karuselu pomocí jQuery. Ukázková stránka popisuje, jak tento kolotoč propojit s vaším webem.

Plugin "Slider Kit", lehký kolotoč s různé způsoby svitek.

7. javascriptový kolotoč

8. Plugin jQuery "Efekty navigace v mřížce"

Původní navigace mezi miniaturami obrázků. Chcete-li zobrazit efekt na pravé straně ukázkové stránky, klepněte na tlačítka Nahoru a Dolů. Toto řešení jQuery také poskytuje efekt přechodu na miniaturu a rolování kolečkem myši.

9. Snadný kolotoč

10. Blokový kolotoč Easy Paginate

Plugin jQuery "Easy Paginate". Každý obdélníkový blok je běžnou položkou seznamu li, a pokud obsahuje více než tři položky, pak k jejich zobrazení potřebujete použít posuvnou navigaci (pomocí šipek vpřed a zpět a pomocí navigačních tlačítek ve spodní části).

11. Vertikální rotátor "Vertical Ticker"

Vertikální rotátor jQuery: automatické rolování obsahu na stránce. K dispozici jsou navigační tlačítka a také možnost zastavit rotaci a znovu ji spustit. Když pohnete kurzorem myši, pohyb se zastaví. Na úrovni značek HTML jsou rolovací pole reprezentována běžnými položkami seznamu li.

12. javascript css rolovatelná oblast

javascriptové řešení „TinyScroller“ pro vytvoření rolovatelné oblasti umístěné v kontejneru DIV.

13. Plugin jQuery Smooth Div Scroll

Plugin pro implementaci horizontálního posouvání obsahu v konkrétní oblasti. Když najedete kurzorem myši na levý nebo pravý okraj oblasti, spustí se rolování.

Navigaci mezi snímky s obsahem lze provádět pomocí šipek nebo kliknutím na miniaturu. Dole je tlačítko "Zobrazit", které umožňuje skrýt/zobrazit náhledy popř Plný popis skluzavka.

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

17. Posuvník

Blok s posuvníkem, který se zobrazí, když najedete na kurzor. Obsahem můžete procházet pomocí posuvníku i kolečka myši.

Řešení podobné jQuery bylo inspirováno podobným efektem na webu Apple. Vývojáři této korporace vždy našli zajímavá řešení, která inspirovala webmastery z celého světa. Chcete-li plugin předvést, vyberte jednu z kategorií ze seznamu.

19. Úžasný posuvník

Posuvník se generuje automaticky. Údaje s názvem produktu, popisem, odkazem a adresou obrázku jsou převzaty ze souboru slider.db.txt. Použité technologie: CSS, PHP, jQuery.

20. Zablokujte rotaci pomocí jQuery

Chcete-li vidět efekt rotace bloku, klikněte na jeden z malých obdélníků na stránce ukázky

Plugin pro posouvání obsahu lze například použít k zobrazení nejnovějších zpráv nebo k zobrazení letáků Twitter na webu.

22. Dynamický blok "Zákaznické recenze"

Automatické otáčení obsahu bloku. Použité technologie: PHP, XML, CSS, jQuery.

Tento plugin převádí položky seznamu (ul li) na prvky jQuery kolotoče.

26. javascriptový kolotoč "ImageFlow"

Snímky lze snadno posouvat kolečkem myši.

27. Posouvání obsahu

Kompaktní blok s oznámením nejnovějších materiálů na webu nebo novinek. Levý sloupec zobrazuje stránkovaný seznam stručných oznámení o nejnovějších zprávách. Když vyberete jednu z nich, v pravém sloupci se zobrazí více než Detailní popis a odkaz na přečtení celého textu publikace. Implementováno pomocí jQuery.

Obrázky s odkazy se posouvají, když najedete myší, rolování se zastaví a objeví se navigační lišta. Při najetí myší na obrázek se mezi ovládacími tlačítky zobrazí i jeho název. Na stránce to vypadá skvěle

33. Posouvání obsahu, plugin Mootools "Scrollbar"

Posouvání se provádí pomocí posuvníku i kolečka myši.