Меню

WordPress Слайдер контента без плагинов

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

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

Файлы для адаптивной карусели

Для реализации нам потребуется:

  1. любой сайт на любом движке, на который будем устанавливать слайдер.
  2. файлы из owlcarousel — это некоторые скрипты и стили, доступные для бесплатного скачивания с официального сайта разработчиков http://owlgraphic.com/owlcarousel/owl.carousel.zip.
  3. немного терпения и внимательности.

Подключение стилей, jQuery и owlcarousel

Нам нужно найти файл, где имеется открывающий тег <header>, то есть перейти к редактированию заголовка. В Вордпрессе — это файл header.php. Вставляем туда следующий код:

<!-- Основные стили -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">

<!-- Тема по умолчанию -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!-- Подключаем jQuery  -->
<script src="owl-carousel/jquery-1.9.1.min.js"></script>

<!-- Подключаем owlcarousel -->
<script src="owl-carousel/owl.carousel.js"></script>

на это этапе на хостинге в корневой директории должна быть создана папка с именем «owl-carousel». В ней должны быть следующие файлы:

  1. AjaxLoader.gif
  2. grabbing.png
  3. jquery-1.9.1.min.js
  4. owl.carousel.css
  5. owl.carousel.js
  6. owl.carousel.min.js
  7. owl.theme.css
  8. owl.transitions.css

Все эти файлы вы должны взять в скачанном файле owl.carousel.zip — имейте ввиду, они там располагаются в различных папках. Код в заголовке тем самым может быть таким:

<head>

		<meta charset="<?php bloginfo( 'charset' ); ?>"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title><?php wp_title( '&#124;', true, 'right' ); ?></title>

		<link rel="profile" href="http://gmpg.org/xfn/11"/>
		<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"/>
<!-- Основные стили -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">

<!-- Тема по умолчанию -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!-- Подключаем jQuery  -->
<script src="owl-carousel/jquery-1.9.1.min.js"></script>

<!-- Подключаем owlcarousel -->
<script src="owl-carousel/owl.carousel.js"></script>
		<?php wp_head(); ?>
	</head>

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

<script>
$(document).ready(function() {
$(".owl-carousel").owlCarousel({

navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem : false,
stopOnHover : true,
autoPlay : 4000,
lazyLoad : true,
transitionStyle : "fade"

});
});
</script>
<div id="owl-example" class="owl-carousel">
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
</div>

Это может быть главная страница или сайдбар, или отдельная запись сайта. При вставке в шаблон нужно учитывать закрывающие теги php. Вообще, достаточно только такой конструкции:

<script>
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
});
});
</script>
<div id="owl-example" class="owl-carousel">
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
 <div> Your Content </div>
</div>

Остальное — это указание дополнительных функций.

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

slayder

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

Теперь остаётся добавить вместо «Your Content» свой текст, картинки, видео или другое содержание, которое мы бы хотели видеть в слайдах и сохранить изменения.

➤