Меню
ГлавнаяСкачать DLL

Примеры бесплатных JQuery слайдеров для изображений. Простой адаптивный тач jQuery слайдер Слайдер изображений с автоматической сменой

Нужно добавить кнопки "вперед" и "назад".

Для этого нужно дополнить написанный ранее код.

HTML код для нового слайдера

Вся структура слайдера останется прежней. К разметке добавятся два контейнера, которые будут выполнять функцию кнопок.

Стили слайдера

Кнопки займут свое место благодаря абсолютному позиционированию относительно контейнера.slider-box

Slider-box{ position : relative ; width : 320px ; height : 210px ; overflow : hidden ; } .slider{ position : relative ; width : 10000px ; height : 210px ; } .slider img{ float : left ; } .slider-box .prev , .slider-box .next{ position : absolute ; top : 100px ; display : block ; width : 29px ; height : 29px ; cursor : pointer ; } .slider-box .prev{ left : 10px ; background : url (../images/slider_controls.png ) no-repeat 0 0 ; } .slider-box .next{ right : 10px ; background : url (../images/slider_controls.png ) no-repeat -29px 0 ; }

Скрипт

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

Изображения в слайдере не должны меняться когда курсор находится в пределах слайдера. Для чего это делается? Все просто. Если курсор мыши расположен на слайдере, значит, посетитель сайта заинтересовался его содержимым. В это время не стоит менять слайды автоматически.

$(function () { var slider = $(".slider" ) , sliderContent = slider.html () , // Содержимое слайдера slideWidth = $(".slider-box" ) .outerWidth () , // Ширина слайдера slideCount = $(".slider img" ) .length , // Количество слайдов prev = $(".slider-box .prev" ) , // Кнопка "назад" next = $(".slider-box .next" ) , // Кнопка "вперед" sliderInterval = 3300 , // Интервал смены слайдов animateTime = 1000 , // Время смены слайдов course = 1 , // Направление движения слайдера (1 или -1) margin = - slideWidth; // Первоначальное смещение слайдов $(".slider img:last" ) .clone () .prependTo (".slider" ) ; // Копия последнего слайда помещается в начало. $(".slider img" ) .eq (1 ) .clone () .appendTo (".slider" ) ; // Копия первого слайда помещается в конец. $(".slider" ) .css ("margin-left" , - slideWidth) ; // Контейнер.slider сдвигается влево на ширину одного слайда. function nextSlide() { // Запускается функция animation(), выполняющая смену слайдов. interval = window.setInterval (animate, sliderInterval) ; } function animate() { if (margin==- slideCount* slideWidth- slideWidth) { // Если слайдер дошел до конца slider.css ({ "marginLeft" :- slideWidth} ) ; // то блок.slider возвращается в начальное положение margin=- slideWidth* 2 ; } else if (margin== 0 && course==- 1 ) { // Если слайдер находится в начале и нажата кнопка "назад" slider.css ({ "marginLeft" :- slideWidth* slideCount} ) ; // то блок.slider перемещается в конечное положение margin=- slideWidth* slideCount+ slideWidth; } else { // Если условия выше не сработали, margin = margin - slideWidth* (course) ; // значение margin устанавливается для показа следующего слайда } slider.animate ({ "marginLeft" : margin} , animateTime) ; // Блок.slider смещается влево на 1 слайд. } function sliderStop() { // Функция преостанавливающая работу слайдера window.clearInterval (interval) ; } prev.click (function () { // Нажата кнопка "назад" var course2 = course; course = - 1 ; animate() ; // Вызов функции animate() course = course2 ; } ) ; next.click (function () { // Нажата кнопка "назад" if (slider.is (":animated" ) ) { return false ; } // Если не происходит анимация var course2 = course; // Временная переменная для хранения значения course course = 1 ; // Устанавливается направление слайдера справа налево animate() ; // Вызов функции animate() course = course2 ; // Переменная course принимает первоначальное значение } ) ; slider.add (next) .add (prev) .hover (function () { // Если курсор мыши в пределах слайдера sliderStop() ; // Вызывается функция sliderStop() для приостановки работы слайдера } , nextSlide) ; // Когда курсор уходит со слайдера, анимация возобновляется. nextSlide() ; // Вызов функции nextSlide() } ) ;

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

Но так как мы разбираем с вами основы JS, то для изучения базы я опишу, как создать простейший слайдер только при помощи языка JavaScript. Ну что ж, давайте приступим к разбору материала!

Какие виды слайдеров бывают и где они могут понадобится?

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

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

В основном заказчики просят внедрять на веб-страницы галереи типа «Карусель». Это удобный инструмент для просмотра изображений в крупном размере с возможностью переключения юзером слайдов вперед и назад. При этом сами картинки обычно переключаются автоматически через определенное время. Каруселью такой механизм прозвали из-за того, что показ картинок повторяется по кругу.

На сегодняшний день при желании в интернете можно найти самые необычные и привлекательные плагины для просмотра набора фотографий.

Самостоятельная деятельность

Ну а теперь займемся созданием своего слайдера. На данном этапе обучения для его реализации я предлагаю вам использовать чистый JavaScript . Это будет автоматический переключатель картинок по кругу.

Ниже я прикрепил программный код своего приложения. По ходу кода я оставлял для вас комментарии.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 /*Описываю внешний вид каркаса, основы для будущего слайдера */ #slides{ position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; } /* Редактирую отображение картинок*/ img { width: auto; height: 390px; padding: 13px; } /*Указываю, что содержимое пунктов списка будет отображаться по центру элемента-родителя, т.е. в данном случае по центру элемента ul - основы для слайдов */ li { text-align: center; } /*Описываю внешний вид самих слайдов */ .slide{ position: absolute; opacity: 0; top: 0px; left: 0px; height: 100%; z-index: 3; width: 100%; background: blue; -moz-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition: opacity 1.5s; } /*При отображении объект становится видимым и выдвигается на передний план*/ .showing{ opacity: 1; z-index: 4; }
var MySlider = document.querySelectorAll("#slides .slide"); var currentPicture = 0; var IntervalForChange = setInterval(nextSlide,2700); function nextSlide(){ MySlider.className = "slide"; currentPicture = (currentPicture+1)%MySlider.length; MySlider.className = "slide showing"; }

Автоматический переключатель изображений /*Описываю внешний вид каркаса, основы для будущего слайдера */ #slides{ position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue, 0 0 15px #010, 0 0 35px #010; } /* Редактирую отображение картинок*/ img { width: auto; height: 390px; padding: 13px; } /*Указываю, что содержимое пунктов списка будет отображаться по центру элемента-родителя, т.е. в данном случае по центру элемента ul - основы для слайдов */ li { text-align: center; } /*Описываю внешний вид самих слайдов */ .slide{ position: absolute; opacity: 0; top: 0px; left: 0px; height: 100%; z-index: 3; width: 100%; background: blue; -moz-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition: opacity 1.5s; } /*При отображении объект становится видимым и выдвигается на передний план*/ .showing{ opacity: 1; z-index: 4; }

var MySlider = document.querySelectorAll("#slides .slide"); var currentPicture = 0; var IntervalForChange = setInterval(nextSlide,2700); function nextSlide(){ MySlider.className = "slide"; currentPicture = (currentPicture+1)%MySlider.length; MySlider.className = "slide showing"; }

Я надеюсь, что никаких проблем с кодом на css и html у вас не возникло. А вот работу скрипта я считаю нужным разобрать. Поэтому давайте перейдем к расшифровке написанного.

Итак, сначала при помощи метода querySelectorAll переменной MySlider я присваиваю список всех элементов в переделах указанных. Указывает это запись

document.querySelectorAll ("#slides .slide")

Таким образом, в MySlider хранится коллекция из четырех элементов.

Далее я задаю, с какого изображения начинать показ, присваивая переменной currentPicture нуль. После указываю, что смена слайдов происходит через 2,7 секунды и при этом должна быть вызвана функция обработки nextSlide .

Переходим к самой функции.

Изначально для текущего элемента списка я меняю описание классов, т.е. переписываю «slide showing » на «slide ». Следовательно, изображение становится невидимым.

Теперь определяю новый элемент коллекции, который будет отображаться на экране. Для этого я беру текущую позицию +1. Вы могли заметить, что я также использую деление с остатком (%) на количество имеющихся слайдов. Этот финт ушами необходим для того, чтобы запустить показ по новому кругу. Вот как это будет выглядеть буквально.

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

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

HTML код

В том месте, где хотите вывести сам слайдер, нужно добавить HTML код нашего будущего слайдера.

  • sl_ctr - основной контейнер слайдера, что содержит в себе все элементы слайдера.
  • sldr - контейнер с изображениями. внутри которого располагаются 4 изображения. Можете размещать сколько вам угодно изображений.
  • prv_b - кнопка перемещения слайдов назад.
  • nxt_b - кнопка перемещения слайдов вперед.
CSS стили

Sl_ctr{ position:relative; width:450px; height:300px; overflow:hidden; } .sldr{ position:relative; width:10000px; height:300px; } .sldr img{ float:left; } .prv_b, .nxt_b{ position:absolute; top:135px; display:block; width:35px; height:35px; cursor:pointer; } .prv_b:hover, .nxt_b:hover{opacity:.6;} .prv_b{ left:10px; background:url(images/prv.png) no-repeat; } .nxt_b{ right:10px; background:url(images/nxt.png) no-repeat; }

  • sl_ctr - мы задаем нашему контейнеру размеры слайдера, в данном случаи 450 пикселей ширины и 300 высоты. Так же задан параметр overflow:hidden, для обрезки всего что выходит за границы этого контейнера. В нашем случаи это изображения что расположены в одну строку.
  • sldr - контейнеру с картинками задаем большую ширину в 10000 пикселей, чтобы у нас вместились все картинки, сколько бы их не было. также задается высота, как и основному контейнеру в 300 пикселей.
  • sldr img - все картинки прижимаем влево, для того чтобы они стали в ряд.
  • .prv_b, .nxt_b - задаем общие стили для кнопок управления, потом для каждой по отдельности.
Подключение скриптов

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

$(function() { var sldr = $(".sldr"), sldrContent = sldr.html(), slideWidth = $(".sl_ctr").outerWidth(), slideCount = $(".sldr img").length, prv_b = $(".prv_b"), nxt_b = $(".nxt_b"), sldrInterval = 3300, animateTime = 1000, course = 1, margin = - slideWidth; $(".sldr img:last").clone().prependTo(".sldr");$(".sldr img").eq(1).clone().appendTo(".sldr");$(".sldr").css("margin-left",-slideWidth);function nxt_bSlide(){interval=window.setInterval(animate,sldrInterval)}function animate(){if(margin==-slideCount*slideWidth-slideWidth){sldr.css({"marginLeft":-slideWidth});margin=-slideWidth*2}else if(margin==0&&course==-1){sldr.css({"marginLeft":-slideWidth*slideCount});margin=-slideWidth*slideCount+slideWidth}else{margin=margin-slideWidth*(course)}sldr.animate({"marginLeft":margin},animateTime)}function sldrStop(){window.clearInterval(interval)}prv_b.click(function(){if(sldr.is(":animated")){return false}var course2=course;course=-1;animate();course=course2});nxt_b.click(function(){if(sldr.is(":animated")){return false}var course2=course;course=1;animate();course=course2});sldr.add(nxt_b).add(prv_b).hover(function(){sldrStop()},nxt_bSlide);nxt_bSlide()});

Ну и разберем основные настройки в скрипте.

  • var sldr = $(".sldr") - задаем переменную из нашего контейнера для изображений. Если будете менять название класса, то делайте это очень внимательно, чтобы они совпадали как в HTML, так и в CSS и в скрипте.
  • slideWidth = $(".sl_ctr").outerWidth() - определяем ширину нашего слайдера.
  • slideCount = $(".sldr img").length - определяем количество слайдов, то бишь сколько вы добавили в код картинок.
  • prv_b = $(".prv_b") - определяем блок с кнопкой назад, управления слайдами.
  • prv_b = $(".nxt_b") - определяем блок с кнопкой вперед, управления слайдами.
  • sldrInterval = 3300 - время, сколько показывается одно изображение. 3,3 секунды
  • animateTime = 1000 - время анимации, смены слайда. 1 секунда.
  • course = 1 - направление движения слайдов. В данном случаи изображения сдвигаются влево, показывая нам те что расположены правее. Если установить значение -1, то направление поменяется.
  • margin = - slideWidth; - первоначальное смещение слайдов.

Так же слайдер останавливает свою анимацию, если на него навести курсор.

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

На этом все, спасибо за внимание. 🙂

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

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

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

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

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

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

4. Плагин «JSliderNews» 5. CSS3 jQuery слайдер

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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