Как разместить слайдер на главной и на всех остальных страницах сайта?

голоса: 0
Добрый вечер, Гуру! Подскажите, пожалуйста, как слайдер с главной страницы моего сайта разместить на другой страничке? Все попытки приводят к тому, что сами слайды распологаются один над другим.  Код слайдера располагал в  том же месте, что и на главной страничке. Таблицы стилей и скрипты копировал с шаблона главной на целевую, но не получается. Спасибо.
Адрес сайта http://3l4foto.ru
| Автор: | Категория: Дизайн сайта
Изменение категории | | Автор: Yuri_Geruk

Ответов: 1

Голоса: +1
 
Лучший ответ

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

<!-- Слайдер -->
 <div class="xily-slider-holder fullheight">

 <!-- Первый слайд -->
 <div class="slide-item xl-text-light xl-overlay-20 xl-bottom-fade" data-background="/img/slider/home-slider-1.jpg">
 <div class="container xily-full-height">
 <div class="slide-content">
 <div class="slide-text">
 <div class="title">Садебная фотография</div>
 <div class="subtitle">Реальность, которую мы видим, бесконечна,</div>
 <div class="buttons"><a href="/portfolio/">Портфолио</a></div>
 </div>
 </div>
 </div>
 </div>
 <!-- конец // Первый слайд -->

 <!-- Второй слайд -->
 <div class="slide-item xl-text-light xl-overlay-20 xl-bottom-fade" data-background="/img/slider/home-slider-2.jpg">
 <div class="container xily-full-height">
 <div class="slide-content">
 <div class="slide-text">
 <div class="title">Семейное фото. Фото портрет.</div>
 <div class="subtitle">но лишь её избранные, значимые, решающие моменты,</div>
 <div class="buttons"><a href="/03/svadba.html">Портфолио</a></div>
 </div>
 </div>
 </div>
 </div>
 <!-- конец // Второй слайд -->

<!-- Третий слайд -->
 <div class="slide-item xl-text-light xl-overlay-20 xl-bottom-fade" data-background="/img/slider/home-slider-3.jpg">
 <div class="container xily-full-height">
 <div class="slide-content">
 <div class="slide-text">
 <div class="title">Лавстори.</div>
 <div class="subtitle">которые нас чем-то поразили, остаются в нашей памяти.</div>
 <div class="buttons"><a href="/love_story">Портфолио</a></div>
 </div>
 </div>
 </div>
 </div>
 <!-- конец // Третий слайд -->

<!-- Четвёртый слайд -->
 <div class="slide-item xl-text-light xl-overlay-20 xl-bottom-fade" data-background="/img/slider/home-slider-4.jpg">
 <div class="container xily-full-height">
 <div class="slide-content">
 <div class="slide-text">
 <div class="title">Фотосъёмка венчания</div>
 <div class="subtitle">Из всех средств изображения только фотография может зафиксировать такой точный момент,</div>
 <div class="buttons"><a href="/venchanie">Портфолио</a></div>
 </div>
 </div>
 </div>
 </div>
 <!-- конец // Четвёртый слайд -->

<!-- Пятый слайд -->
 <div class="slide-item xl-text-light xl-overlay-20 xl-bottom-fade" data-background="/img/slider/home-slider-5.jpg">
 <div class="container xily-full-height">
 <div class="slide-content">
 <div class="slide-text">
 <div class="title">Интерьероное фото</div>
 <div class="subtitle">мы играем с вещами, которые исчезают, и когда они исчезли, невозможно заставить их вернуться вновь.
 Анри Картье Брессон.</div>
 <div class="buttons"><a href="/interer">Портфолио</a></div>
 </div>
 </div>
 </div>
 </div>
 <!-- конец // Пятый слайд -->

 </div>
 <!-- конец // Слайдер -->

 <script type="text/javascript">
 var sliderAutoplay = false;
 </script>

эти скрипты перед </body> разместить:

<script type="text/javascript" src="/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="/js/imagesloaded.pkgd.min.js"></script> 
<script type="text/javascript" src="/js/jquery.easing.min.js"></script>

и стили в <head></head>

<link rel="stylesheet" href="/css/owl.carousel.min.css">
| Автор:
Выбор ответа лучшим | | Автор: Сергей Бусаров
Так приятно получать ЧЁТКИЕ ответы! Вот бы всегда так! Спасибо всё заработало.  Теперь нужно понять нужен ли мне ещё один слайдер.
...