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

голоса: 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">
| Автор:
Выбор ответа лучшим | | Автор: Сергей Бусаров
Так приятно получать ЧЁТКИЕ ответы! Вот бы всегда так! Спасибо всё заработало.  Теперь нужно понять нужен ли мне ещё один слайдер.
...