Создание самого простого слайдера отзывов
Блог
Делимся с Вами своими знаниями и новостями
19.07.2015

Создание самого простого слайдера отзывов

Самый простой слайдер для отзывов

Создание самого простого слайдера отзывов поможет Вашему сайту стать немного более респектабельным и не унылым. А простота его использования сделает его еще и мега доступным для тех, кто только начинает изучение web-программирования. Сразу хочу забежать вперед, в интернете существует тьма всяких слайдеров и тому подобной мишуры с кучей настроек. Здесь Вы такого не увидите, но ту работу, которую выполняет данный скрипт, он делает превосходно, и что самое главное понятно. Итак, приступим. Да, совсем забыл, не забудьте скачать демо и посмотреть, как он выглядит. Учтите, вместо фотографий можно использовать любой контент.

Создание самого простого слайдера отзывов

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

Шаг первый

Создание полноценной HTML структуры. Я буду копировать и вставлять код, который использовал непосредственно в своем проекте.

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

Как видим из кода, нам этот слайдер отзывов, если отключен javascript, будет просто делать прокрутку наших отзывов вниз. Это очень удобно. А теперь самое вкусное, что нужно сделать нам. Это вставить наш код javascript.

Но для начала надо убедиться, что у нас подключена библиотека jQuerry. Если нет, то подключаем ее.

Далее, в самом начале нашего сайта, перед закрывающимся тегом </head> вставляем вот такой код в теги <script></script>. Все комментарии указаны непосредственно в коде.

Внимательно ознакомьтесь с этим кодом. Я постарался максимально его прокомментировать, но если у Вас есть вопросы, задавайте их в комментариях.

Метки: , , ,

Комментарии:

Свяжитесь с нами уже сейчас




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


Отправляя нам сообщение, содержащее Ваши персональные данные, Вы соглашаетесь с нашей политикой конфиденциальности.