Warning: require() [function.require]: open_basedir restriction in effect. File(/opt/php52/share/pear/data.inc.php) is not within the allowed path(s): (/var/www/allximik/data:.:/usr/local/stat) in /var/www/allximik/data/www/followdesign.com/engine/lib/external/CSSTidy-1.3/class.csstidy.php on line 33

Warning: require() [function.require]: open_basedir restriction in effect. File(/opt/php52/share/php/php/data.inc.php) is not within the allowed path(s): (/var/www/allximik/data:.:/usr/local/stat) in /var/www/allximik/data/www/followdesign.com/engine/lib/external/CSSTidy-1.3/class.csstidy.php on line 33

Warning: require() [function.require]: open_basedir restriction in effect. File(/opt/php52/share/pear/class.csstidy_print.php) is not within the allowed path(s): (/var/www/allximik/data:.:/usr/local/stat) in /var/www/allximik/data/www/followdesign.com/engine/lib/external/CSSTidy-1.3/class.csstidy.php on line 40

Warning: require() [function.require]: open_basedir restriction in effect. File(/opt/php52/share/php/php/class.csstidy_print.php) is not within the allowed path(s): (/var/www/allximik/data:.:/usr/local/stat) in /var/www/allximik/data/www/followdesign.com/engine/lib/external/CSSTidy-1.3/class.csstidy.php on line 40

Warning: require() [function.require]: open_basedir restriction in effect. File(/opt/php52/share/pear/class.csstidy_optimise.php) is not within the allowed path(s): (/var/www/allximik/data:.:/usr/local/stat) in /var/www/allximik/data/www/followdesign.com/engine/lib/external/CSSTidy-1.3/class.csstidy.php on line 47

Warning: require() [function.require]: open_basedir restriction in effect. File(/opt/php52/share/php/php/class.csstidy_optimise.php) is not within the allowed path(s): (/var/www/allximik/data:.:/usr/local/stat) in /var/www/allximik/data/www/followdesign.com/engine/lib/external/CSSTidy-1.3/class.csstidy.php on line 47
jQuery Mootools CSS слайдеры и слайд-шоу. Часть 1 / Разработка / Свежие новости веб-дизайна и разработки


Авторизация



Напомнить пароль
Регистрация


РазработкаjQuery Mootools CSS слайдеры и слайд-шоу. Часть 1

jQuery 3D слайдер

Огромная коллекция jQuery Mootools CSS плагинов и скриптов для реализации интересных слайдеров изображений и слайд-шоу на ваших сайтах.

В заметке приведены: слайдеры и слад-шоу с автоматической и ручной сменой слайдов, с текстовым описанием слайдов и без него, слайдеры фоновых изображений, с миниатюрами и без них, круговые сладеры, 3D слайдеры, огромное количество самых разнообразных анимированных эффектов перехода между изображениями.

Всего в данной публикации собрано 100 самых разнообразных решений, как по стилевому оформлению, так и по функционалу. Скорей всего эта самая большая подборка в рунете подобных слайдеров и слайд-шоу. Я уверен, что вы вы найдете где применить эти плагины. Скачивайте, тестируйте, настраивайте и используйте в своих проектах.

1. Превосходное jQuery слайд-шоу

jQuery слайд-шоу

Большое эффектное слайд-шоу с использованием jQuery технологий.

2. jQuery плагин «Scale Carousel»

jQuery слайд-шоу

Масштабируемое слайд-шоу с использованием jQuery. Вы сможете задать размеры для слайд-шоу, которые вам больше всего подходят.

3. jQuery плагин «slideJS»

jQuery слайдер изображений с текстовым описанием

Слайдер изображений с текстовым описанием.

4. Плагин «JSliderNews»

jQuery слайдер

5. CSS3 jQuery слайдер 

Слайдер с навигацией

При наведении курсора на стрелки навигации появляется круглая миниатюра следующего слайда.

6. Симпатичный jQuery слайдер «Presentation Cycle»

Симпатичная jQuery галерея

jQuery слайдер с индикатором загрузки изображений. Предусмотрена автоматическая смена слайдов.

7. jQuery плагин «Parallax Slider»

jQuery слайдер с объемным эффектом

Слайдер с объемным фоновым эффектом. Изюминка этого слайдера в движение фона, который состоит из нескольких слоев, каждый из которых прокручивается с различной скоростью. В итоге получается имитация объемного эффекта. Выглядит очень красиво, вы можете сами в этом убедиться. Более плавно эффект отображается в таких браузерах как: Opera, Google Chrome, IE.

8. Свежий, легкий jQuery слайдер «bxSlider 3.0»

jQuery слайдер

На демонстрационной странице в разделе «examples» вы сможете найти ссылки на все возможные варианты использования этого плагина.

9. jQuery слайдер изображений, плагин «slideJS»

jQuery слайдер изображений

Стильный jQuery слайдер, безусловно сможет украсить ваш проект.

10. jQuery плагин слайд-шоу «Easy Slides» v1.1

jQuery галерея

Простой в использовании JQuery плагин для создания слайд-шоу.

11. Плагин «jQuery Slidy»

jQuery слайд-шоу

Легкий jQuery плагин в различном исполнении. Предусмотрена автоматическая смена слайдов.

12. jQuery CSS галерея с автоматической сменой слайдов

jQuery галерея с автоматической сменой слайдов

Если посетитель в течении определенного времени не нажмет на стрелки «Вперед» или «Назад», то галерея начнет прокручиваться автоматически.

13. jQuery слайдер «Nivo Slider»

Слайдер на jQuery

Очень профессиональный качественный легкий плагин с валидным кодом. Предусмотрено много различных эффектов смены слайдов. 

14. jQuery слайдер «MobilySlider»

jQuery плагин MobilySlider

Свежий слайдер. jQuery слайдер с различными эффектами смены изображений.

15. jQuery Плагин «Slider²»

Слайдер

Легкий слайдер с автоматической сменой слайдов.

16. Свежий JavaScript слайдер

JavaScript слайдер

Слайдер с автоматической сменой изображений.

17. jQuery слайд-шоу

jQuery слайд-шоу

Плагин для реализации слайд-шоу с автоматической сменой слайдов. Есть возможность управлять показом с помощью миниатюр изображений.

18. jQuery слайдер

Слайдер

 jQuery CSS слайдер изображений с использованием плагина NivoSlider.

19. jQuery слайдер«jShowOff»

jQuery слайдер

Плагин для ротации содержимого. Три варианта использования: без навигации (с автоматической сменой в формате слайд-шоу), с навигацией в виде кнопок, с навигацией в виде миниатюр изображений.

20. Плагин «Shutter Effect Portfolio»

Плагин Shutter Effect Portfolio

Свежий jQuery плагин для оформления портфолио фотографа. В галерее реализован интересный эффект смены изображений. Фотографии сменяют друг друга с эффектом похожим на работу затвора объектива.

21. Легкий JavaScript CSS слайдер «TinySlider 2»

JavaScript слайдер

Реализация слайдера изображений с использованием JavaScript и CSS.

22. Обалденный слайдер «Tinycircleslider»

Слайдер

Стильный круглый слайдер. Переход между изображениями осуществляется с помощью перетаскивания по окружности ползунка в виде красного круга. Отлично впишется в ваш сайт, если вы в дизайне используете круглые элементы.

23. Слайдер изображений на jQuery

Слайдер jQuery

Легкий слайдер «Slider Kit». Слайдер представлен в различном исполнении: вертикальный и горизонтальный. Также реализованы различные виды навигации между изображениями: с помощью кнопок «Вперед» и «Назад», с помощью колеса мыши, с помощью клика мыши по слайду.

24. Галерея с миниатюрами «Slider Kit»

Галерея jQuery

Галерея «Slider Kit». Прокрутка миниатюр осуществляется как в вертикальном так и горизонтальном направлении. Переход между изображениями осуществляется с помощью: колеса мыши, щелчка мыши или наведения курсора на миниатюру.

25. jQuery слайдер содержимого «Slider Kit»

jQuery слайдер содержимого

Вертикальный и горизонтальный слайдер контента на jQuery.

26. jQuery слайд-шоу «Slider Kit»

jQuery слайд-шоу

Слайд-шоу с автоматической сменой слайдов.

27. Легкий профессиональный JavaScript CSS3 слайдер

jQuery слайдер

Аккуратный слайдер на jQuery и CSS3, созданный в 2011 году.

28. Простое слайд-шоу jQuery

Простое слайд-шоу jQuery

jQuery слайд-шоу с миниатюрами.

29. Простое jQuery слайд-шоу

jQuery слайд-шоу

Слайд-шоу с кнопками навигации.

30. Потрясное слайд-шоу jQuery «Skitter»

Потрясное слайд-шоу jQuery

jQuery плагин «Skitter» для создания потрясающего слайд-шоу. Плагин поддерживает 22 (!) вида различных анимационных эффектов при смене изображений. Может работать с двумя вариантами навигации по слайдам: с помощью номеров слайдов и с помощью миниатюр. Обязательно посмотрите демонстрацию, очень качественная находка. Используемые технологии: CSS, HTML, jQuery, PHP.

31. Слайд-шоу «Awkward»

Слайд-шоу на jQuery

Функциональное слайд-шоу. В виде слайдов могут выступать: простые изображения, изображения с подписями, изображения с всплывающими подсказками, видео-ролики. Для навигации можно использовать стрелки, ссылки на номера слайдов и клавиши вправо/влево на клавиатуре. Слайд-шоу выполнено в нескольких вариантах: с миниатюрами и без них. Для просмотра всех вариантов пройдитесь по ссылкам Demo #1 — Demo #6 расположенным сверху на демонстрационной странице.

32. Креативный jQuery слайдер «Rotating Image Slider»

Креативный jQuery слайдер «Rotating Image Slider»

Очень оригинальное оформление слайдера изображений, напоминающее веер. Анимированная смена слайдов. Навигация между изображениями осуществляется с помощью стрелок. Предусмотрена также автоматическая смена, которую можно включать и выключать с помощью кнопки Play/Pause, расположенной сверху.

33. Слайдер фоновых изображений

Слайдер фоновых изображений

Анимированный jQuery слайдер. Фоновые изображения автоматически масштабируются при изменении размеров окна браузера. Для каждого изображения выплывает блок с описанием.

34. «Flux Slider» слайдер на jQuery и CSS3

jQuery слайдер

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

35. jQuery плагин «jSwitch»

Галерея jQuery

Анимированная jQuery галерея.

36. jQuery слайд-шоу

Легкий сладер

Легкое слайд-шоу на jQuery c автоматической сменой слайдов.

37. Новая версия плагина «SlideDeck 1.2.2»

Профессиональный слайдер контента

Профессиональный слайдер контента. Возможны варианты с автоматической сменой слайдо, а также вариант с использованием колеса мыши для перехода между слайдами.

38. jQuery слайдер «Sudo Slider»

jQuery слайдер

Легкий сладер изображений на jQuery. Очень много вариантов реализации: горизонтальная и вертикальная смена изображений, со ссылками на номер слайда и без них, с подписями изображений и без, различные эффекты смены изображений. Есть функция автоматической смены слайдов. Ссылки на все примеры реализации можно найти на демонстрационной странице.

39. jQuery CSS3 слайд-шоу

jQuery слайд-шоу

Слайд-шоу с миниатюрами поддерживает режим автоматической смены слайдов.

40. jQuery cлайдер «Flux Slider» 

Слайдер

Слайдер с множеством эффектов смены изображений.

41. Простой jQuery слайдер

jQuery слайдер

Стильный слайдер изображений на jQuery.

42. «Craftyslide» cлайд-шоу jQuery

jQuery слайд-шоу

43. Полноэкранное jQuery cлайд-шоу 

jQuery слайд-шоу

jQuery HTML5 cлайд-шоу, растягивающееся на всю ширину экрана со звуковым сопровождением. 

44. jQuery слайд-шоу

jQuery слайд-шоу

Простое слайд-шоу на jQuery.

45. jQuery слайд-шоу

Слайд-шо на jQuery

Слайд-шоу с оригинальным эффектом смены изображений.

46. Слайдер «gSlide»

Слайдер на jQuery

jQuery слайдер. При нажатии на плюс можно увеличить изображение.

47. Слайд-шоу

Слайд-шоу на jQuery

В правом верхнем углу слайда можно включить/выключить автоматическую смену слайдов.

48. jQuery слайд-шоу. Плагин «Diapo»

Слайд-шоу

Очень функциональный слайдер контента. Помимо изображений вы сможете помещать в слайдер с различными анимированными эффектами любое HTML содержимое и даже видео-ролики. Обязательно обратите внимание на это решение

49. jQuery cлайдер  «FlexSlider»

Слайд-шоу

Простой jQuery слайдер.

50. jQuery 3D слайдер «Slicebox»

jQuery 3D слайдер

Эффект очень похож на ранее упоминаемую в блоге Flash галерею 3D CU3ER (демо, скачать), только выполнен этот 3D слайдер не с помощью flash технологий, а с помощью JavaScript. На демонстрационной странице можно посмотреть 6 вариантов исполнения.

51. Мега jQuery cлайдер  «СhopSlider 2.0»

Слайд-шоу

jQuery слайдер. Около 150 (!!!)  возможных эффектов перехода между слайдами.

52. Эффектный jQuery слайдер

Слайдер, для оформления временных интервалов

Слайдер представлен в трех вариантах: вертикальный, горизонтальный и слайдер с автоматической прокруткой. Подойдет для креативного представления хронологии событий на сайте.

53. Плагин «Blueberry»

Слайд-шоу

jQuery cлайдер для сайта.

54. Легкое слайд-шоу с кратким описанием слайдов

Слайд-шоу

Автоматическая смена слайдов на jQuery.

55. Mootools слайд-шоу

Mootools плагин

56. jQuery cлайдер «wmuSlider»

jQuery cлайдер wmuSlider

Эффектный JavaScript слайдер изображений.

57. Слайдер «Infinite Carousel Plugin»

Слайдер с автоматической сменой

Чтобы включить/отключить автоматическую смену изображений надо кликнуть на иконку в верхнем правом углу слайда.

58. CSS3 слайдер

CSS3 слайдер

Легкий CSS3 слайдер без использования JavaScript.

59. CSS3 слайдер изображений

CSS3 слайдер изображений

Легкий слайдер изобрайжений с использованием CSS3.

60. jqFancy галерея

jqFancy галерея

Отличная jQuery-галерея с прикольным эффектом смены слайдов

61. jQuery слайд-шоу

Слайд-шоу

Без сомнения, использование слайд-шоу не только привлекает внимание посетителей в нужную область, но делает ваш сайт более живым

62. Аккуратный слайдер Easy slider 1.7

Аккуратная галерея Easy slider 1.7

Неплохая галерея с различными видами отображения

63. Coin Slider

Классная галерея Coin Slider

Уникальные красивые эффекты перехода. Полностью настраиваемый дизайн с помощью CSS

64. JQuery слайд-шоу, растягивается на весь экран 

JQuery Галерея полностью растягивающаяся на весь экран

Очень интересная реализация. Изображения масштабируются, чтобы заполнить окно браузера, т.е. при уменьшении или увеличении окна галерея автоматически изменяет размеры, имеются кнопки управления слайдами (следующий слайд/предыдущий слайд, начать автоматический просмотр/остановить прокрутку слайдов)

65. Слайдер на базе JQuery

Слайд-шоу на базе JQuery

Широкий набор функций: в слайд может быть помещен любой HTML контент (текст, изображения и др), навигационные вкладки с номером слайда добавляются и удаляются автоматически при добавлении или удалении слайда, навигационные вкладки так же можно включать и отключать, при этом можно использовать неограниченное количество слайдов, функция автоматической смены слайдов (опционально, можно включать или отключать смену слайдов), регулировка длительности эффекта смены слайдов и длительности показа, возможность создавать ссылки на тот или иной слайд и многое другое

66. Слайд-шоу с автоматической сменой слайдов и миниатюрами

Слайд-шоу с автоматической сменой слайдов

Содержимым слайда может быть любой HTML контент. Каждый слайд имеет уникальные миниатюры, при нажатии на которые происходит переход на соответствующий слайд. Стрелка на миниатюре указывает активный слайд. Описание слайда накладывается на полупрозрачном фоне

67. Старт/стоп слайдер

Старт/стоп слайд-шоу

Слайд-шоу с применением JQuery. Красивый эффект смены слайдов. Наличие кнопки старт/стоп для управления автоматической сменой. Содержимое разбито на блоки: описание и изображение. Это слайд-шоу отлично подойдет для интернет-магазина как презентация продуктов. Легко настраиваемый дизайн и простота интеграции

68. Интересная реализация слайдера изображений

Демонстрация фото-галереи

Блоки с фотографией и описанием можно перемещать как при помощи стрелок, так и путем нажатия мышью на сами фотографии. Активная фотография увеличивается, как бы вытесняя соседние за края блока.

69. Nivo слайдер

Nivo галерея

Отличная галерея с 9 уникальными эффектами перехода между слайдами. Чистая, валидная разметка страницы, наличие параметров настройки отображения, легкая (архив весит всего 7кб)

70. Отличный слайдер   s3Slider jQuery

Отличная галерея s3Slider jQuery

Описание слайда может появляться на полупрозрачном фоне с разных сторон слайда. Изображения меняются автоматически.

71. jQuery ротатор контента, плагин «slideJS»

jQuery слайдер контента

jQuery слайдер контента: один из вариантов использования плагина «slideJS».

72. jQuery плагин «Product Slider»

Плагин jQuery для показа продуктов

Товары с помощью стрелок вращаются в виде карусели. Изображение активного товара эффектно увеличивается. При нажатии на ссылку «More views» можно детально просмотреть несколько фотографий товара, представленных в виде галереи «FancyBox».

73. Mootools ротатор изображений «ImageCarousel»

Mootools слайд-шоу

Легкий ротатор изображений.

74. jQuery cлайд-шоу «Мозайка»

Слайд-шоу jQuery

75. jQuery слайдшоу

jQuery слайдшоу

Отличная, аккуратная jQuery галерея.

76. jQuery слайд-шоу фоновых изображений

Плагин jQuery

Для смены фонового изображения на демонстрационной странице вы можете воспользоваться кнопками навигации.

77. jQuery слайд-шоу

Слайд-шоу jQuery

Слайд-шоу с различными эффектами смены фотографий.

78. jQuery слайд-шоу

Слайдер jQuery

Автоматическая смена слайдов. Для того, чтобы скачать jQuery плагин, нажмите на странице загрузки кнопку «Download».

79. Mootools слайд-шоу «Gradually»

Mootools слайд-шоу

80. Превосходное CSS3 слайд-шоу на jQuery

jQuery слайд-шоу

Просто изумительный анимированный эффект. Перед показом следующего изображения предыдущее поворачивается на 180 градусов вокруг центральной оси и исчезает. Обязательно посмотрите плагин в действии на демонстрационной странице, чтобы понять о чем идет речь.

81. MooTools 3D карусель «Moo3DCarousel»

Mootools карусель

Вращать карусель изображений можно с помощью колеса мышки. Также предусмотрена возможность автоматического движения карусели. Плагин доступен в двух вариантах вращения: горизонтальном и вертикальном.

82. jQuery слайдер;

Плагин jQuery

Автоматическая смена изображений.

83. jQuery слайдер для главной страницы

Плагин jQuery

Отличный jQuery слайдер, который прекрасно подойдет для оформления главной страницы сайта.

84. jQuery слайдер jFlow

Слайдер jQuery

Для перехода между изображениями воспользуйтесь большими синими стрелками.

85. jQuery слайдер

Слайдер jQuery

 Красивый слайдер. Для того, чтобы скачать jQuery плагин, нажмите на странице загрузки кнопку «Download».

86. MooTools плагин «ImageDrawer»

Mootools плагин

Интересные анимированные эффекты смены изображений.

87. Слайдер контента без JavaScript

Слайдер контента

Легкий, качественный слайдер содержимого без JavaScript. Для переключения между слайдами используются кнопки с номером слайда.

88. JavaScript слайд-шоу

Слайд-шоу

Легкое JavaScript слайд-шоу.

89. jQuery слайдер контента

jQuery слайдер контента

Горизонтальный слайдер контента с использованием jQuery и CSS.

90. jQuery слайдер с миниатюрами для предпросмотра

jQuery слайдер контента

jQuery галерея. Прикольный эффект при наведении курсора мыши на миниатюры.

91. jQuery слайдер

jQuery слайд-шоу

Навигация между изображениями может осуществляться с помощью кнопок «Вперед» «Назад» и при помощи ссылок на номер изображения, при этом смена изображений происходит с различными анимированными эффектами. Стилевое оформление можно прописать в CSS файле.

92. Легкий jQuery плагин «JQuery Slide Effect»

jQuery плагин при наведении

Интересный эффект при наведении курсора мыши на изображение.

93. jQuery Photo Slider

jQuery галерея

94. Легкий jQuery слайдер

jQuery слайдер

95. jQuery реализация анимированных банеров

jQuery реализация баннера

Создание анимированных баннеров с помощью jQuery. 

96. Качественный jQuery слайдер

jQuery плагин

97. jQuery слайд-шоу с автоматической сменой слайдов

jQuery слайдер

98. jQuery слайдер

jQuery слайдер

Оригинальный слайдер контента на jQuery.

99. Плагин jQuery слайдер «jFlow Plus»

Слайдер

100. Gallery/News Slider с подписями к изображениям

ajax загрузка контента

Легкий слайдер. Есть возможность авторотации изображений.

101. Простенький плагин jQuery для смены фоновых изображений

JavaScript смена слайдов

Ротация фоновых изображений.

Подготовлено по материалам: efimov.ws

  • 0
  • Автор: efimov
  • Дата: 23 ноября 2011, 14:39
  • В избранное:


Комментарии (4)

rss свернуть / развернуть
jSlider два раза упомянули )
а вообще — добрая подборочка вышла! спасибо!
свернуть ветку
Никак не удаётся прикрутить к сайту плагин «JSliderNews». Причём в браузере Google эта галерея хоть и коряво, но отображается. В Опере же постоянно кружочек загрузки крутится и белый фон вместо изодражения, хотя Demo этого плагина везде отображается корректно… Подскажите, в чём может быть дело?
свернуть ветку
Народ, срочна нужна ваша помощь, кто подскажет где найти скрипт слайдера такой же как вот на этом сайте http://ku-mir.net только нужен скрипт под jQuery т.к. на том сайте он написан под mootools (скрипт наз. ice slider) уже все перерыл чет похожего близко нет…
свернуть ветку
кэшбэк на алиэкспресс развод
[url=http://www.youtube.com/watch?v=YqhcaOdU3gcs][img]http://ali33.ru/Cashback-aliexpress-epn.jpg[/img][/url]
Возврат средств Алиэкспресс. Как возвратить денежки с Алиэкспресс ВИДЕО — www.youtube.com/watch?v=YqhcaOdU3gcs
Погляди и все узнаешь
свернуть ветку
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.