Слайдер на JQuery

простой слайдер на jquery
Метки: / /

В этой статье будет показано как сделать простой слайдер на JQuery, думаю вам будет полезно и интересно.

Также посмотрите статью: Делаем продвинутый слайдер на чистом javascript, так как, именно на базе кода из неё, был сделан слайдер здесь, только добавили JQuery

Создание слайдера на JQuery:

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

HTML:

Теперь перейдём, тут не чего сложного нет, вот файл.

Как видите обычный HTML, тут только можно выделить три момента, первый, это то, что есть два блока, в одно содержится картинки слайда, в другом какая картинка сейчас показывается.

Во вторых, мы подключаем три файла, файл стилей, почти в самом верху и  два скрипта, первый скрипт JQuery, второй, это то, где вся логика слада будет прописываться.

Если вы не знаете как подключить JQuery, то посмотрите статью: Что такое JQuery и как его подключить.

CSS:

С CSS всё просто.

Главное что тут можно отметить, это использование FlexBox, в остальном тут обычный CSS.

Если вам тут что то не понятно, то посмотрите наш учебник по CSS.

JavaScript:

Теперь перейдём к самому главному, это коду для слайдера на JavaScript, сначала мы объявим нужные переменные и возьмём нужные элементы.

Давайте не много разберём, сперва берём ширину всей видимой части, он потом пригодится во время изменения позиции, дальше берём весь слайдер.

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

Теперь перейдём к самому главному, это переключение слайда.

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

Потом  меняем цвет на нового индикатор на заселённый и переключаем слайдер, делаем это за счёт функции .animate(), которая задаёт CSS с анимацией.

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

Как видит, действительно разницы нет, только условие, и теперь всё должно работать, слайдер готов.

Также если вы более менее знаете JQuery, наверное заметили, что мы не использовали функции JQuery для изменения цвета индикатора, это потому что мы их хранили в массиве, а в массиве нельзя менять стили через него.

Вывод:

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

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: