Как сделать слайдер в php
Обновлено: 07.07.2024
В этом уроке для веб разработчиков мы продемонстрируем создание слайдера на HTML, CSS, и JavaScript (jQuery) и добьёмся, чтобы он работал во всех браузерах (с активированным и дезактивированным JavaScript).
Начало работы
Одним из самых важных аспектов работы над новым проектом, является создание HTML структуры. Мы должны добиться того, чтобы данный слайдер одинаково отображался во всех браузерах и работал даже на тех, где отключен JavaScript.
Блок 1: HTML
Вы можете заметить, что в приведённом фрагменте кода нет ничего связанного с элементами контроля нашего слайдера. Мы их добавим в DOM позже, посредством JavaScript скрипта. Если их добавить сейчас, то они будут смущать тех, кто отключает поддержку CSS или JavaScript.
Вариант 1: Полноценный слайдер
Заметка: Проверяйте работу после каждого изменения. Если вы занимаетесь разработкой чего-то нового, то всегда тестируйте работу проведённых изменений, будь то даже изменение HTML структуры. Вы можете использовать специальный инструмент WebAnywhere для тестирования содержания.
Стилизуем слайдер
Следующим действием мы оформим наш дизайн и предусмотрим несколько вещей для тех пользователей, которые отключают JavaScript.
Нам необходимо немного уменьшить ширину блока с классом .slide на 20px для того, чтобы появилось место для области прокрутки слайдов для тех, у кого отключен JavaScript.
Блок 3: CSS класс .slide
С отключённым JavaScript, наш контент всё равно доступен для пользователей; благодаря прокрутке они могут просматривать слайды.
Вариант 2: Слайдер без JavaScript
В качестве альтернативы, вы можете добавить классу .slide дополнительное свойство float:left; для того чтобы пользователи без JavaScript могли прокручивать слайды горизонтально.
Стрелки вправо и влево
Для того чтобы добиться большей производительности, мы добавим элементы контроля над слайдером посредством изменения DOM при помощи jQuery.
Элементы будут представлять из себя span элемент, поэтому мы назначили свойству cursor значение pointer для создания эффекта наведения мыши на кнопку. Так же мы используем свойство text-indent для того, чтобы спрятать текст.
Блок 4: Элементы контроля
Самое интересное… JavaScript
После того, как мы подготовили наш HTML и CSS, самое время заняться основным скриптом. Для создания анимации и прочих фишек мы будем использовать библиотеку jQuery.
Теория
В конце концов, мы вставим элементы контроля (с классом .control) для того, чтобы пользователи могли переключать слайды; это мы сделаем средствами JavaScript, чтобы тем, у кого он отключён, элементы контроля не отобразились.
Вашему вниманию я представляю код JavaScript детальное описание которого последует ниже.
Блок 5: Главный скрипт jQuery
Создаём объекты
В первую очередь, мы инициализируем некоторые переменные в самом начале скрипта.
currentPosition будет содержать текущую позицию. slideshow.slideWidth - это ширина каждого блока .slide, которая равна 560px. Я предпочёл объявить объект для селектора $('.slide'), для того чтобы код смотрелся немного чище, но вы можете поступить по-другому и в дальнейшем использовать запись ($('.slide')).
И наконец, мы определяем количество слайдов в нашем слайдере, используя метод .length.
Блок 6: Переменные и константы
Убираем прокрутку
Когда скрипт запустится для тех, у кого включён JavaScript, мы уберём элемент прокрутки, установив значение hidden элементу slidesContainer, и это будет заменять переполнение overflow:auto CSS (смотри Блок 3).
Блок 7: Изменения значения свойства CSS overflow на hidden
Вставка div в DOM
Мы будем использовать свойство margin для перемещения слайдов влево и вправо (но чуть позже). Для этого нам необходимо создать специальный блок, в который будут вписаны все блоки с классом .slide, совпадающие с ним по ширине и высоте. Изменяя значение внешних отступов для этого элемента, мы создадим эффект перемещения в разные стороны.
Утилизируем слайды при помощи JavaScript
Если JavaScript включён, мы хотим расположить слайды друг за другом. Также каждому из низ мы зададим фиксированную ширину в 560px – таков и будет размер нашего слайдера.
Мы можем совместить метод .css с методом .wrapAll(), который мы использовали в Блоке 8.
Блок 10: Присвоение .slide блокам overflow:hidden
Вставка стрелок в DOM
Мы вставим необходимые элементы, посредством манипулирования элементами DOM; таким образом, обеспечим пользователям, которые отключают JavaScript и другим устройствам простую картинку без всякого функционала. Так у них не появится никаких лишних вопросов.
Блок 11: Вставка элементов контроля в DOM
Управления стрелками посредством функций
Для того чтобы иметь возможность управлять элементами контроля, мы создадим функцию с именем manageControls, которая скрывает и показывает правую и левую стрелку в зависимости от того, в какой части слайдера мы сейчас находимся.
Если мы смотрим первый слайд, то нам необходимо, по понятным причинам, спрятать левую стрелку. Когда мы будем на правом слайде, то нам нет никакого резона отображать правую стрелку нашего слайдера. Показ и скрытие данных элементов мы осуществим при помощи jQuery методов .hide() и .show(), которые предназначены специально для подобных целей.
Блок 12: функция manageControls()
Вызываем manageControls(), когда DOM готов
Когда наш скрипт окончательно загрузится, мы должны вызывать метод manageControls(), для того чтобы спрятать левую стрелку контроля. Это просто, мы передаём аргумент currentPosition, который должен быть равен 0.
Блок 13: вызов manageControls() при полной загрузке документа
Отлавливаем события
Всё что нам осталось сделать для нашего jQuery слайдера, так это создать функционал для отлавливания кликов по элементам контроля. Этот функционал будет активироваться в том случае, если пользователь нажмёт на одну из стрелок: правую или левую.
Блок 14: Отлавливаем клик на класс .control
Обновляем значение для currentPosition
Блок 15: Новое значение для currentPosition
Вызов manageControls() после обновления значения currentPosition
После того, как мы определи значение переменной currentPosition, снова вызываем manageControls(), для того чтобы скрыть и отобразить инструменты контроля над слайдами.
Блок 16: Вызов manageControls() внутри метода .bind
Анимируем слайды
Блок 17: Используем метод .animate при смене CSS свойства margin-left
Заключение
В этом уроке, мы создали простой слайдер при помощи HTML, CSS, и JavaScript (jQuery). Также мы использовали специальные техники, которые позволят слайдеру работать с отключёнными CSS и JavaScript. Спасибо за внимание.
5 последних уроков рубрики "jQuery"
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Обучение веб-разработке на практике эффективнее голой теории: всё наглядно, а полученные в ходе разработки решения можно использовать в будущих проектах. Именно поэтому мы совместно с онлайн-школой GeekBrains подготовили туториал по созданию простого слайдера изображений с объяснением каждого шага. Вот так будет выглядеть финальная версия:
Примечание Данная статья — лишь небольшое погружение в мир фронтенд-разработки, ведь современный веб не ограничивается знанием HTML/CSS/JavaScript. Чтобы стать востребованным веб-разработчиком, необходимо осваивать дополнительные библиотеки и фреймворки, которые часто строго разделены между фронтендом и бэкендом.
Что понадобится?
Можно сразу скачать IDE вроде WebStorm, но при обучении веб-разработке с нуля можно начать и в онлайн-редакторе. Мы будем использовать CodePen — популярный онлайн-редактор для веб-разработчиков с мгновенным отображением результата. Но если вы уже начали работу в какой-либо другой среде и считаете, что она намного удобнее, просто убедитесь, что есть поддержка HTML/CSS/JavaScript.
Пишем код
На различных курсах веб-разработки знакомство с фронтендом начинается с описания основных технологий, а именно:
Обучение веб-разработке стоит начать с HTML, так как это каркас сайта. Каждый HTML-документ имеет стандартную структуру:
Но в нашем примере прописывать структуру всей страницы не нужно, ведь мы работаем с отдельным компонентом, который потом будет размещаться между тегами
Для пробы создал на denwer мини сайт для пробы , вывел статьи из базы и так же создал слайдер на owl-carousel .
Циклом выводил url адреса изображений и через include подключил slider.php к index.php . Но изображения не выводятся, а выводится лишь самое первое. Сам эффект в слайдере работает; вся функциональность есть но, не выводятся все(!) изображения.
От того, как вопрос выглядит зависит сколько людей решат уделить на него время. Если у вас нет времени позаботиться о том, чтобы отвечающим было удобно читать, то зачем им тратить на вас время? Учтите, что хороших вопросов здесь много и публикуются они часто.
Здравствуйте, друзья. Нашел у себя в заначке (в папке "Выложить на сайт") вот такой ништяковский слайдер для сайта. Очень простой, но самый нужный. Слайдер имеет адаптивную верстку под мобильные устройства, поэтому на любом разрешении слайдер будет смотреться адекватно: изображения указаны в процентном пропорциональном соотношении, стрелки и навигация уменьшаются в размерах, а анимация не глючит. Также я проверил: слайд-шоу работает во всех современных браузерах версиях годовой давности. Думаю он работает нормально и в IE8.
Описывать слайдер не имеет большого смысла, так как он действительно очень прост: слайды с позиционированием по центру, стрелки по бокам, прижатые к стенкам браузера. Также есть навигация в виде буллитов снизу. Все прекрасно работает, я имею ввиду анимацию. Никаких глюков, неровностей и кривостей я не заметил. Слайдер весит немного, а вставить его в Ваш сайт не составит никакого труда.
Инструкции к вставке на сайт
1. Скачиваем файл
Качаем файл, разархивируем его, и заливаем в корень сайта папки images, css и js.
2. Подключаем скрипты и стили
Мужду тегами вставляем следующий код
тем самым мы подключили скрипты и файл modernizr.custom.js, который отвечает за правильную работу HTML5 и CSS3 в вашем браузере и браузерах посетителей вашего сайта. В файлах default.css и component.css присутствуют атрибуты и параметры, которые могут внести изменения в дизайн вашего сайта. Если такое происходит винить можно файл default.css, так как там содержаться стили для таких стандартных параметров как body, a и так далее. Просто удаляете то, что конфликтует и все будет нормально.
3. Вставляем код слайдера
На страницу, где вы хотите видеть слайдер и куда вы подключили скрипты и стили, вставляете html код слайдера:
Слайдеры сейчас в моде, и не зря! Вы можете добавлять на свой сайт фотографии, контент, видео и многое другое, что привлекает внимание посетителей. В этом уроке рассмотрим, как самому создать красивый слайдер с изображениями на основе FlexSlider .
И хотя существует множество плагинов слайдеров (мой текущий фаворит - Nivo Slider ), не существует плагина для FlexSlider - слайдера, у которого есть клавиатурные сокращения и который работает со скольжением на тачскринах.
Для начала скачайте исходники с кодом, который нам вскоре понадобится.
Вот как будет выглядеть сам слайдер:
Шаг 1. Подготовка
Первое, что нам необходимо сделать, - это установить плагин. Создайте папку /envato-flex-slider/, и в ней файл под названием ‘envato-flex-slider.php’. Сюда мы будем добавлять всю необходимую информацию и код для нашего плагина, начиная с блока объявления плагина:
Я также хочу установить несколько констант для информации, которую я буду часто использовать в плагине. Под объявлением блока, но перед закрытием тега php, я добавляю следующую информацию:
Я создал три константы: путь к плагину, имя плагина и версию плагина, которая необходима для обновлений и для того, чтобы в случае необходимости известить WordPress Plugin Directory об изменениях.
Обратите внимание, я начинаю все мои константы с "EFS". Я буду делать то же самое с названиями функций, чтобы не создать конфликтов с другими плагинами или ядром WordPress.
Теперь, когда мы закончили с подготовкой, давайте добавим файлы и код FlexSlider.
Шаг 2. Добавление FlexSlider
Теперь пора добавить важную часть: javascript и CSS для FlexSlider. Мы сделаем это, используя wp_enqueue_script и wp_enqueue_style самого WordPress, чтобы избежать конфликтов. Вы можете скачать FlexSlider здесь . Нам понадобятся 2 файла: jquery.flexslider-min.js, и flexslider.css, в папке /theme/.
В обеих строках мы присваиваем имя каждому скрипту, затем привязываем файлы .js и .css. Обратите внимание, что мы используем нашу константу ESF_PATH. Нам нужно использовать полный путь, иначе файлы не привяжутся правильно.
Вы также можете заметить, что у нас есть третий параметр в wp_enqueue_script. Это массив других скриптов, от которых зависит наш скрипт. В данном случае, такой скрипт один – это JQuery. Здесь есть полный список скриптов, включенных в WordPress. Вы можете использовать любой из них, используя указанный массив зависимостей.
Следующее, что мы хотим сделать, это включить собственно JavaScript, который заставит скрипт работать. Мы сделаем это с помощью нашей собственной функции и Action -функции WordPress.
Важная строка здесь – add_action('wp_head', 'efs_script');, которая запустит нашу функцию efs_script(), когда будет вызвана wp_head. Наша функция просто выводит Javascript, необходимый для того, чтобы заставить FlexSlide делать свою работу.
Вы можете заметить, что я использую ‘JQuery’ вместо традиционного ‘$’, который обычно используется в скриптах JQuery. Я делаю это для того, чтобы наш скрипт не конфликтовал с другими библиотеками JavaScript, например, Scriptaculous .
Наконец, просто скопируйте папку /theme/ в вашу папку /envato-flex-slider/.
Шаг 3. Короткий код и тег шаблона
Дальше мы создадим наш шорткод (shortcode, короткий код) и тег шаблона. Шорткод позволит пользователям вставить слайдер в любую страницу или пост. Вводное руководство по шорткодам вы можете посмотреть здесь .
Тег шаблона позволит разработчикам тем вставлять слайдер прямо в их темы. Как разработчик тем, считаю чрезвычайно важным создавать и то, и то, и делать их легкодоступными в документации. Вы никогда не знаете, кто будет использовать ваш плагин.
Сейчас этот код выглядит достаточно просто. Для шорткода мы вызываем нашу общую функцию efs_get_slider() и возвращаем результат. Для тега шаблона мы выводим результат. Я специально упустил внедрение efs_get_slider(), поскольку мы пока не установили, откуда мы собираемся брать изображения.
Чтобы сделать добавление любого количества картинок в слайдер удобным для пользователя, мы создадим отдельный тип поста.
Шаг 4. Пользовательский тип поста Slider Image
Первое, что мы сделаем, - это создадим новый файл под названием ‘slider-img-type.php’, где будет весь наш код для пользовательского типа поста. Сначала мы сделаем некоторую подготовку, как мы делали это для плагина.
Как вы видите, все, что я пока сделал, это создал несколько констант (которые будут очень удобными для более сложных пользовательских типов постов) и добавил поддержку миниатюр для нашего нового типа.
Единственная вещь, которую мы еще сделаем здесь, это зарегистрируем новый пользовательский тип поста. Больше о пользовательских типах постов вы можете найти в рук оводстве по созданию отличного портфолио. Прямо перед закрытием php тега, мы добавим следующий код:
Мы создали функцию для регистрации пользовательского типа поста, который использует блоки для названия, редактирования и миниатюры. Далее мы добавили Action WordPress, чтобы вызвать эту функцию сразу же после инициализации WordPress.
Все! Последнее, что нам нужно сделать, это включить наш новый файл, добавив require_once('slider-img-type.php'); в envato-flex-slider.php. Я добавил его прямо над вызовом наших скриптов.
Теперь, когда мы знаем, как внедрять картинки в слайдер, давайте вернемся назад и заполним нашу общую функцию для слайдера.
Шаг 5. Генерация слайдера
Вернитесь к объявлению efs_get_slider() и замените //We'll fill this in later на следующее:
Первые две строки обязательны из-за метода работы FlexSlider. Он возьмет неупорядоченный список, который называется ‘slides’ внутри слоя ‘flexslider’ и применит к нему javascript анимацию. В нашем CSS также определены .flexslider и ul.slides.
После этого, мы создаем цикл WordPress, собирая все посты типа slider-image (наш пользовательский тип поста) и выводим большую версию картинки.
Далее мы возвращаем весь сгенерированный HTML как переменную, которая может быть выведена (нашим тегом шаблона), или возвращена (нашим шорткодом).
Несколько замечаний
- С нашим новым пользовательским типом поста, мы можем добавлять заголовок и картинку, мы также добавили блок редактирования поста. И хотя сейчас мы используем только изображение (и заголовок, для атрибута alt), мы включили также редактор на случай, если, например, в будущем мы захотим сделать поддержку размещения надписи на слайдере.
- Добавляя новый пост типа Slider Image, мы должны загрузить изображение Миниатюры, чтобы слайдер работал. Он не может просто взять прикрепленный к посту файл.
Шаг 6. Тестирование
Теперь время тестировать! Как только вы добавили несколько изображений в ваш пользовательский тип поста, создайте новую страницу (я назвал свою просто Slider) и добавьте в нее наш созданный недавно шорткод [ef_slider]. Сохраните страницу и просмотрите ее. Вы должны увидеть нечто вроде этого:
Заключение
На этом все. Конечно, есть еще несколько вещей, которые можно улучшить в плагине. Например, добавить поддержку вариантов для расширенной настройки, которую может предложить FlexSlider, или добавление поддержки названий.
Как было сказано, этот плагин дает вам все необходимое для создания действительно простой, легкой в управлении, легкой для вставки версии FlexSlider для WordPress!
Если вы не уверены по поводу вставок или добавления файлов, вы можете загрузить исходники по ссылке вверху руководства. Удачи!
Читайте также: