Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

12 полезни jQuery плъгина за създаване на slideshow 13

Сподели урока

Харесваш ли елегантните и изчистени slideshow галерии? А мислил/а ли си да създадеш своя собствена? Повярвай ми, съвсем не е толкова трудно, колкото изглежда. В тази колекция от 12 свежи jQuery плъгина ще намериш точното това, което ти е нужно, за да създадеш едно незабравимо slideshow преживяване.

[Обновена: 20.09.2012]

В коментарите към поста започнахме доста интересна дискусия дали е добре да се поясняват термините използвани в урока/поста. Смятам, че мнението на всеки е от значение, и че всеки има правото да го сподели. Тъй като този пост е насочен към по-напреднали в уеб разработването, реших да пропусна всякакъв вид разяснения относно jQuery. И смятам да го запазя така. За да уважа мнението на хората, които не знаят какво всъщност е jQuery, ще създам отделен урок, в който ще опиша най-важното, което трябва да се знае.

[Обновена: 21.10.2012]

Урока е качен. Ако си начинаещ/-а в jQuery и искаш да научиш нещо повече за това, може би е добра идея, ако първо разгледаш урока “Въведение в jQuery”. В него ще откриеш две основни неща - “Какво е jQuery?” и “Какво е плъгин?

Camera slideshow

Елегантен и същевременно лесен за използване плъгин. Има богат избор на опции, чрез които можеш да настроиш работата на му спрямо твоите изисквания. Освен всичко това, плъгина е напълно безплатен и е с отворен код, което значи, че ти също можеш да предложиш промени и/или подобрения.

Camera Slideshow Plugin

Сайт | Демо

Nivo Slider

Свален повече от 1,5 милиона пъти, този плъгин е един от най-популярните в Интернет. Слави се с 16 уникални ефекта, чист и валиден код, множество настройки, 3 теми и много други. Също така от Nivo Slider твърдят, че галериите създадени с този плъгин са responsive, което ще ги направи достъпни под множество различни резолюции.

Nivo Slider Plugin

Сайт | Демо

FlexSlider

Друг широко популярен jQuery плъгин за създаване на слайдшоу. Този плъгин идва с огромно количество настройки, което го прави приспособим към всеки сайт. Можеш да го приложиш в 3 лесни стъпки, което ще ти отнеме не повече от 10 мин.

FlexSlider Plugin

Сайт | Демо

WOW Slider

WOW Slider е responsive плъгин с множество ефекти и професионално направени шаблони. Създателите му го обновяват доста често като добавят нови и нови подобрения. Този плъгин е лесен за употреба, а на сайта му можеш да намериш подробни уроци за работа с него.

WOW Slider

Сайт | Демо

AnythingSlider

Доста солиден слайдшоу плъгин базиран на jQuery. Свойствата му са твърде много, за да ги изброявам, но определено има какво да предложи. Документацията е също доста подробна и ще ти помогне да се “измъкнеш” от всякакво положение. Кода може да бъде свален от GitHub.

AnythingSlider

Сайт | Демо

Cycle

Слайдшоу плъгин, който предоставя различни видове преходни (transition) ефекти. Поддържа pouse-on-hover, auto-stop, click triggers и много други. Разгледай ги, за да придобиеш по-добра представа. Прилагането на този плъгин е доста лесно и не изисква големи технически умения.

Cycle

Сайт | Демо

rcarousel

Този плъгин е базиран на jQuery UI, но с много повече черти. Лесен е за употреба, всяка снимка може да бъде линк, позволява създаването на множество галерии в една страница, вертикални и хоризонтални галерии, автоматична смяна на снимките, добра браузърна поддръжка (дори IE 7) и много други.

rcarousel

Сайт | Демо

Rhinoslider

Rhinoslider е гъвкав слайдер с множество ефекти. Може да бъде използван като обикновена галерия или слайдшоу с богати ефекти. Този плъгин се слави със своята лесна и интуитивна употреба. На сайта дори има инструмент, чрез който ти самият можеш да създаден свой уникален ефект. Кода се генерира автоматично, а ти само трябва да го копираш.

Rhinoslider

Сайт | Демо

Sequence.js

Responsive слайдер с усъвършенствани CSS3 преходи (transitions). Този плъгин не идва с готова тема, което ти дава възможността да създадеш свой собствен стил използвайки CSS3. Тестван е и работи под всички съвременни браузъри. Документацията е подробна и добре обяснена, така че, ако нещо те затрудни, да можеш съвсем лесно да го отстраниш.

Sequence

Сайт | Демо

Glise.js

Адаптивен и гъвкав jQuery плъгин, който изцяло можеш да настроиш спрямо твоите нужди. Някои от отличителните му черти са навигация чрез клавиатура, анимация изцяло направена с CSS3, 7 различни преходни ефекта и възможност за разглеждане на снимките в пълен екран.

Glise

Сайт | Демо

μslider

jQuery плъгин, който е много лесен за употреба, защото има няколко основни настройки, които могат да бъдат променени по доста разбираем начин. Може да се промени височината и ширината, как да бъде стартирана анимацията и нейната продължителност, преходните ефекти, поддръжка на текст, видео и аудио. На сайта можеш да намериш примери с подробно обяснение.

Mslider

Сайт | Демо

ResponsiveSlider

ResponsiveSlider е лек и супер лесен за употреба слайдшоу плъгин, който идва със сравнително голямо количество опции. Както името ни подсказва, галериите създадени чрез този jQuery плъгин се приспособяват към различни резолюции. Някои от другите му черти са: множество слайдшоу галерии на една страница, работи безпроблемно под повечето съвременни браузъри, снимките могат да бъдат оградени с линк, малък размер на файла, интуитивен и изчистен код и много други.

ResponsiveSlider

Сайт | Демо

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

13 страхотни коментара

  1. 1

    Дани
    16 септ 2012 19:57

    Здравей (:
    Приятни галерии. Защо не направиш линковете да се отварят в нов таб?
    Поздрави!

  2. 2

    Джават Ушев (автор)
    17 септ 2012 09:35

    Здравей. Благодаря за идеята. Ще я обмисля и ще пробвам да я приложа :)

  3. 3

    Антон
    19 септ 2012 13:54

    Здравей, Джават. Извинявам се обаче били обяснил какво е това jQuery? Аз лично за пръв път срещам това наименование и изобщо не знам за какво става въпрос. Сигурно някой който чете това ще се смее, обаче изобщо си нямам на идея какво е това. Имам и друга молба би ли дал дефиниция за "плъгин", за какво служи и какво е това?

    Между другото ще си позволя едно предложение към теб тъй като си написал, че този сайт е направен за да помага. Предложението ми е следното: Слагай дефиниции, кратки и разбираеми, за аматьори като мен на наименования като "плъгин", "jQuery" и с каквито нови неща ни запознаваш.
    Поздрави, Антон

  4. 4

    raxbg
    19 септ 2012 22:09

    Антон, на такива неща дефиниции не се дават. Това е като да говориш за подправка на супи и да даваш дефиниция на супа. Ако те интересува нещо какво е първо питай гугъл, ако той не знае тогава питай в някой форум. Ето ти какво е jQuery ама се съмнявам да разбереш, след като не знаеш що е плъгин. Иначе е хубаво, че си отделил време да прочетеш нещо, чието заглавие най-вероятно не ти говори нищо.
    П.П. Не се заяждам, да не ме разбереш погрешно, просто не мисля че статията е за теб.

  5. 5

    Джават Ушев (автор)
    19 септ 2012 22:13

    @Антон: Здравей. Благодаря за предложението. Съвсем скоро ще обновя поста и най-отгоре ще сложа кратки дефиниции на "jQuery" и "плъгин".
    Също така в бъдещи уроци/постове ще се постарая да включвам и някакво обяснение на термините, които съм използвал. :)

    @raxbg: Благодаря за коментара и полезните линкове. Наистина този пост е насочен за малко по-напреднали. Също така е вярно, че всеки има право да пита, дори и елементарни въпроси. Надявам се да бъдем коректни един към друг и да споделяме знанията и опита си. :)

  6. 6

    raxbg
    19 септ 2012 23:01

    Джават, не казвам да не се пита, а просто първо човека да се помъчи сам да намери отговорите. Защо трябва да си губи времето да пита тук вместо за същото време да пита в гугъл. И защо да чака не знайно колко време някой да отговори евентуално, вместо да прочете за половин минута това, което го интересува. Ясно е, че не на всичко си има отговори в гугъл, или поне не се намират толкова лесно, и тогава е нормално да се пита, да. И не мисля, че е добра идея да пишеш обяснения на термини в постовете си. Все пак, който чете такива неща се предполага че знае за какво иде реч. Виж ако е нещо специфично, тогава може да пишеш кратки описания, или просто да правиш непознатата дума, линк към дефиницията ѝ.

  7. 7

    Антон
    21 септ 2012 13:36

    raxbg няма проблем, не съм те разбрал погрешно. От доста години имам сайт. Няма да му помествам линка, за да не се получи спамене. Джават знае кой е. Самоук съм и почти всички страници на сайта ми вече са Strict, което за мен е важно ... имайки в предвид индексирането му в Гугъл, огромния обема от работа и продажбите, които реализира самия сайт. Аз сам си го поддържам и съответно си ръководя и фирмата.

    Питам по този начин, защото аз не съм професионалист и деня ми минава в сделки и разговори, които нямат нищо общо с материята тук, НО много голямо НО - тъй като сам се учех да си правя сайта и постоянно съм ползвал статии и уроци от Гугъл съм стигнал до извода, че не всяка информация в Гугъл е вярна и "съм губил доста време" и НЕРВИ. Тук, в сайта на Джават, за пръв път от толкова години насам намерих човек, който ПЕРСОНАЛНО помага или най-точно казано ме учи, дава ми конкретни примери които ги прилагам и те работят. Това е УНИКАЛНО. Никъде другаде, в който и да е сайт в България, не съм попадал на човек като Джават безвъзмездно да споделя знанията и опита си. Ето за това съм му задал въпроса за "jQuery" и "плъгин" по този начин.

    raxbg относно статията може и да си прав, че не е за мен. Аз като цяло, едно че съм аматьор, едно че съм праволинеен тъй като сайта ми продава доста и аз като собственик винаги търся нещо, което да помогне за повишаването на продажбите му, а не толкова за неговата визия, но това е продиктувано от портфолиото ми и най-вече от клиентите ми. От друга страна продуктите, които предлагам аз са свързани с дефиниция и приложение и самите клиенти споделят че така е много разбираемо за тях. Ето затова по този начин му направих предложението.

    Примера за "подправката за супи" е уникален. И при мен, в моята материя, е така и то ежеминутно.
    Джават, ще чакам да пуснеш дефиниции, които са разбираеми и смилаеми та дори и примери, които си правил. Както казах, ще разчитам на теб, а не на Гугъл.
    Поздрави

  8. 8

    Джават Ушев (автор)
    22 септ 2012 19:56

    Благодаря за откровения и позитивен коментар :)

    Уроците/постовете, които качвам са изцяло насочени към теб и всички други, които имат желание да научат нещо повече за създаването на собствен уеб сайт. С течение на времето ще се опитам да споделям неща в различни теми, за да може повече хора да се възползват. Някои постове ще бъдат за начинаещи, други за по-напреднали. Друг път пък, ще споделям качествени ресурси. Ще се опитам да балансирам нещата, доколкото мога.

    Твоето посещение в сайта, както и многото други, допълнително ме мотивира да продължавам да работя. Нямам намерение да изоставям сайта, затова се надявам да го направим добро място за споделяне на знание :)

  9. 9

    Дани
    23 септ 2012 17:12

    Джават, имам идея, която не мога да реализирам сам. Сглобих си един часовник и календар. Има следния вид: Днес е 23 септември 2012 г. (неделя), 5:08:27 ч. след обед. Иска ми се е от доста време да му приложа стил, така че зад думите/цифрите да има фоново изображение. Но не ми достигат знанията. Има ли начин да ти пратя лично адреса за да видиш, както и пример, без да спамя излишно тук?

    Разбира се нямам нищо против крайният резултат да бъде публикуван тук, за да се възползва всеки, за който представлява интерес.
    Поздрави!

  10. 10

    Джават Ушев (автор)
    25 септ 2012 15:06

    Здравей. Бих се радвал да ти помогна със съвети как да го направиш. Може би и с код, но предварително искам да ти кача, че не мога да отделя прекалено много време, защото съм доста зает. Свържи се с мен чрез e-mail. Можеш да го намериш в За мен. Поздрави

  11. 11

    Дани
    03 ноември 2012 16:38

    Гласувах в конкурса за сайта ти :)
    Джават, вдяваш ли от swf флаш?

  12. 12

    Джават Ушев (автор)
    04 ноември 2012 00:03

    Благодаря ти за подкрепата :)
    Какво имаш в предвид с swf флаш? Преди години се занимавах, но спрях, защото според мен тази технология няма светло бъдеще. Ако питането ти е за създаване на анимация или писане на ActionScript, тогава няма да успея да помогна. Ако пък проблема е с поставяне на swf в уеб страница, тогава може и да успея. Хвърли малко повече светлина :)
    Поздрави.

  13. 13

    Дани
    10 ноември 2012 18:04

    Прощавай, че се запилях, бях извън града. Искам да стартирам флаш, което е ясно, но и да му добавя х за затваряне, с което да изчезне. Имаш ли идея как да се реализира? Доколкото гледам в нета java го реализира, а не промяна на самия флаш файл.
    Поздрави!

Твоят коментар

* - задължителни полета