Как можно сделать простой слайдер

Слайдер

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

Особо долго не копая сеть на наличие чего-то подходящего, по-быстрому накидал свой вариант слайдера и сделал простую загрузку в него изображений и описаний на основе распространенного плагина Advanced Custom Fields с его дополнительным расширением Repeater Field.

О таком подходе и хочу рассказать

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

Настройка полей

Здесь создаем группу полей. Я ее назвал «Для главной». В группе создал поле «Картинки для слайдера», для поля задали тип Repeater (повторяемое). Этот тип поля появляется только при установке аддона Repeater Field.

Для группы настроил отображение только на главной странице сайта

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

Переходим к настройкам описаний поля

Настройка поля Картинки для лайдера

и дальше к формированию списка необходимых полей для каждого кадра слайдера

Настройка необходимых полей

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

Наполнение слайдера

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

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

<div class="slider">
<?foreach(get_field('slider')as $sl):?>
 <a href="<?=$sl['href']?>">
 <img title="<?=$sl['img']['title']?>" src="<?=$sl['img']['url']?>" alt="<?=$sl['img']['alt']?>" />
 </a> 
<? endforeach;?>
<div class="opis">
<div class="header"></div>
<div class="description"></div>
<div class="dotted"></div>
</div>

</div>
<div class="clear">

Вся информация из слайдера хранится в параметрах картинки кроме ссылки на нужную страницу сайта, которая сразу же выводится в атрибут href тега <a>. В дальнейшем, с помощью javascript получаю эту информацию и отображаю ее в слайдере в нужных мне местах.

javascript файл запускающий слайдер можете скачать отдельно здесь — slider или весь файл целиком на сайте мои-жалюзи.рф

И кусок css, для отображения слайдера — style

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

Добавить комментарий

или войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *