Редактируем шаблон HTML
Находим
<div id="slideshow"> <div class="preloader"><span class="content-loading"></span></div> <div id="slider"> <ul class="slidercontent clearfix"> <li class="slider-item-1 "> <img src="{ASSETS_IMAGES_PATH}slide.jpg?design=newyear" class="item-img"> <div class="item-html"> <div class="container"> <div class="text-border"> <h2>Новогодние подарки</h2> <h3>Для детей и взрослых</h3> <a href="{CATALOG_URL}" class="button big btn-primary">Каталог<span class="bg"></span><span class="over">Каталог</span><span class="out">Каталог</span></a> </div> </div> </div> </li> <li class="slider-item-2"> <img src="{ASSETS_IMAGES_PATH}element1.png?design=cosines" class="item-img" title="element1" alt="element1"> </li> <li class="slider-item-3"> <img src="{ASSETS_IMAGES_PATH}element2.png?design=cosines" class="item-img" title="element2" alt="element2"> </li> <li class="slider-item-4"> <img src="{ASSETS_IMAGES_PATH}element3.png?design=cosines" class="item-img" title="element3" alt="element3"> </li> <li class="slider-item-5"> <img src="{ASSETS_IMAGES_PATH}element4.png?design=cosines" class="item-img" title="element4" alt="element4"> </li> <li class="slider-item-6"> <img src="{ASSETS_IMAGES_PATH}element5.png?design=cosines" class="item-img" title="element5" alt="element5"> </li> <li class="slider-item-7"> <img src="{ASSETS_IMAGES_PATH}element6.png?design=cosines" class="item-img" title="element6" alt="element6"> </li> </ul> </div> </div>
Заменяем на
<div id="slideshow"> <div class="preloader"><span class="content-loading"></span></div> <div id="slider"> <div class="slider-item-1 "> <img src="{ASSETS_IMAGES_PATH}slide.jpg?design=newyear" class="item-img"> <div class="item-html"> <div class="container"> <div class="text-border"> <h2>Новогодние подарки</h2> <h3>Для детей и взрослых</h3> <a href="{CATALOG_URL}" class="button big btn-primary">Каталог<span class="bg"></span><span class="over">Каталог</span><span class="out">Каталог</span></a> </div> </div> </div> </div> <div class="slider-item-1 "> <img src="{ASSETS_IMAGES_PATH}slide.jpg?design=newyear" class="item-img"> <div class="item-html"> <div class="container"> <div class="text-border"> <h2>Новогодние подарки</h2> <h3>Для детей и взрослых</h3> <a href="{CATALOG_URL}" class="button big btn-primary">Каталог<span class="bg"></span><span class="over">Каталог</span><span class="out">Каталог</span></a> </div> </div> </div> </div> <div class="slider-item-1 "> <img src="{ASSETS_IMAGES_PATH}slide.jpg?design=newyear" class="item-img"> <div class="item-html"> <div class="container"> <div class="text-border"> <h2>Новогодние подарки</h2> <h3>Для детей и взрослых</h3> <a href="{CATALOG_URL}" class="button big btn-primary">Каталог<span class="bg"></span><span class="over">Каталог</span><span class="out">Каталог</span></a> </div> </div> </div> </div> </div> <ul class="slidercontent clearfix"> <li class="slider-item-2"> <img src="{ASSETS_IMAGES_PATH}element1.png?design=cosines" class="item-img" title="element1" alt="element1"> </li> <li class="slider-item-3"> <img src="{ASSETS_IMAGES_PATH}element2.png?design=cosines" class="item-img" title="element2" alt="element2"> </li> <li class="slider-item-4"> <img src="{ASSETS_IMAGES_PATH}element3.png?design=cosines" class="item-img" title="element3" alt="element3"> </li> <li class="slider-item-5"> <img src="{ASSETS_IMAGES_PATH}element4.png?design=cosines" class="item-img" title="element4" alt="element4"> </li> <li class="slider-item-6"> <img src="{ASSETS_IMAGES_PATH}element5.png?design=cosines" class="item-img" title="element5" alt="element5"> </li> <li class="slider-item-7"> <img src="{ASSETS_IMAGES_PATH}element6.png?design=cosines" class="item-img" title="element6" alt="element6"> </li> </ul> </div>
Данный кусок кода отвечает за вывод слайдов и небольшого текстового описания, который Вы можете отредактировать на свое усмотрение, заменив необходимые вам параметры. Этот код дублируем для каждого слайда заменяя изображение и текст.
<div class="slider-item-1 "> <img src="{ASSETS_IMAGES_PATH}slide.jpg?design=newyear" class="item-img"> <div class="item-html"> <div class="container"> <div class="text-border"> <h2>Новогодние подарки</h2> <h3>Для детей и взрослых</h3> <a href="{CATALOG_URL}" class="button big btn-primary">Каталог<span class="bg"></span><span class="over">Каталог</span><span class="out">Каталог</span></a> </div> </div> </div> </div>
Затем редактируем main.js
Находим
// Запуск слайдера $(document).ready(function(){ var slider = $('#slideshow .slider'); slider.owlCarousel({ items: 1, singleItem : true, autoplay: false, loop: true, dots: true, dotsSpeed: 500, dotsContainer: '.slider-navigation' }); slider.on('changed.owl.carousel', function(event) { var item_index = event.item.index + 1; $('.slider-title').html($('.slider :nth-child('+item_index+') a span').html()); $('.slider-title').attr('href', $('.slider :nth-child('+item_index+') a').attr('href')); }); });
Заменяем на
// Запуск слайдера $(document).ready(function(){ var slider = $('#slideshow #slider'); slider.owlCarousel({ items: 1, singleItem : true, autoplay: true, smartSpeed: 800, loop: true, dots: true, dotsSpeed: 500 }); slider.on('changed.owl.carousel', function(event) { var item_index = event.item.index + 1; $('.slider-title').html($('.slider :nth-child('+item_index+') a span').html()); $('.slider-title').attr('href', $('#slider :nth-child('+item_index+') a').attr('href')); }); });
Затем Находим
// Движущиеся объекты в слайдере function sliderObj() { // Parallax var itemLi = $('#slider ul li'); itemLi.has('img[title="element1"]').find('img').attr("data-depth","0.15").addClass('layer'); itemLi.has('img[title="element2"]').find('img').attr("data-depth","0.20").addClass('layer'); itemLi.has('img[title="element3"]').find('img').attr("data-depth","0.10").addClass('layer'); itemLi.has('img[title="element4"]').find('img').attr("data-depth","0.20").addClass('layer'); itemLi.has('img[title="element5"]').find('img').attr("data-depth","0.80").addClass('layer'); itemLi.has('img[title="element6"]').find('img').attr("data-depth","0.90").addClass('layer'); if($(window).width() > 768) { checkScene = $('body #slider'); if (checkScene.length) { scene = document.getElementById('slider'); var parallax = new Parallax(scene); } } }
Заменяем на
// Движущиеся объекты в слайдере function sliderObj() { // Parallax var itemLi = $('#slideshow ul li'); itemLi.has('img[title="element1"]').find('img').attr("data-depth","0.15").addClass('layer'); itemLi.has('img[title="element2"]').find('img').attr("data-depth","0.20").addClass('layer'); itemLi.has('img[title="element3"]').find('img').attr("data-depth","0.10").addClass('layer'); itemLi.has('img[title="element4"]').find('img').attr("data-depth","0.20").addClass('layer'); itemLi.has('img[title="element5"]').find('img').attr("data-depth","0.80").addClass('layer'); itemLi.has('img[title="element6"]').find('img').attr("data-depth","0.90").addClass('layer'); if($(window).width() > 768) { checkScene = $('body #slideshow'); if (checkScene.length) { scene = document.getElementById('slideshow'); var parallax = new Parallax(scene); } } }
Редактриуем main.css
Находим
/*** Слайдер ***/ #slideshow {position: relative;background: #fff9e8;padding-bottom: 90px;} #slider {margin-bottom: 30px;position: relative;} #slider ul {margin: 0;padding: 0;text-align: center;list-style: none;} #slider ul li .item-html {position: absolute;top: 30%;left: 0;text-align: right;width: 100%;z-index: 9;} #slider ul li .item-html .container {position: relative;} #slider ul li h2, #slider ul li h3 {font-size: 58px;color: #000;letter-spacing: 2px;line-height: inherit;} #slider ul li h2 {margin-bottom: 15px;} #slider ul li.slider-item-1 {display: inline-block;} #slider ul li.slider-item-1 img {max-width: 100%;height: auto;} #slider ul li img.layer {position: absolute;z-index: 10;} #slider ul li img[title="element1"] {top: 50%;left: auto;right: 7%;} #slider ul li img[title="element2"] {bottom: -10%;left: auto;right: 10%;} #slider ul li img[title="element3"] {top: -6%;left: 9%;} #slider ul li img[title="element4"] {top: 37%;left: 8%;} #slider ul li img[title="element5"] {bottom: -10%;left: 3%;} #slider ul li img[title="element6"] {top: -40%;right: -5%;} #slider .text-border .button {margin-top: 20px;}Заменяем на
/*** Слайдер ***/ #slideshow {position: relative;background: #fff9e8;padding-bottom: 120px;margin-bottom: 6px;} #slideshow .owl-carousel .owl-stage {text-align: center;} #slideshow #slider .item-html {position: absolute;top: 30%;left: 0;text-align: right;width: 100%;z-index: 9;} #slideshow #slider .item-html .container {position: relative;} #slideshow #slider h2, #slideshow #slider h3 {font-size: 58px;color: #000;letter-spacing: 2px;line-height: inherit;} #slideshow #slider h2 {margin-bottom: 15px;} #slideshow #slider .slider-item-1 {display: inline-block;} #slideshow #slider .slider-item-1 img {max-width: 100%;height: auto;} #slideshow ul {margin: 0;padding: 0;text-align: center;list-style: none;} #slideshow ul li img.layer {position: absolute;z-index: 10;} #slideshow ul li img[title="element1"] {top: 50%;left: auto;right: 7%;} #slideshow ul li img[title="element2"] {bottom: -10%;left: auto;right: 10%;} #slideshow ul li img[title="element3"] {top: -6%;left: 9%;} #slideshow ul li img[title="element4"] {top: 37%;left: 8%;} #slideshow ul li img[title="element5"] {bottom: -10%;left: 3%;} #slideshow ul li img[title="element6"] {top: -40%;right: -5%;} #slideshow .text-border .button {margin-top: 20px;} #slideshow .owl-controls {position: relative;margin-top: -24px;} #slideshow .owl-theme .owl-dots {text-align: center;-webkit-tap-highlight-color: transparent;} #slideshow .owl-theme .owl-dots .owl-dot {display: inline-block;zoom: 1;} #slideshow .owl-carousel .owl-dot {cursor: pointer;cursor: hand;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} #slideshow .owl-theme .owl-dots .owl-dot span {display: block;width: 10px;height: 10px;margin: 5px 7px;background: #c1c1c1;-webkit-backface-visibility: visible;transition: opacity .2s ease;border-radius: 30px;} #slideshow .owl-theme .owl-dots .owl-dot.active span, #slideshow .owl-theme .owl-dots .owl-dot:hover span {background: #fff9e8;}
Находим
#slider ul li h2 {font-size: 60px;} #slider ul li.slider-item-1 {display: block;} #slider ul li img.layer {display: none;} #slider ul li .item-html {text-align: center;}Заменяем на
#slideshow #slider h2 {font-size: 60px;} #slideshow #slider .slider-item-1 {display: block;} #slideshow #slider .item-html {text-align: center;} #slideshow ul li img.layer {display: none;}
Находим
#slideshow {padding-bottom: 0;} #slider {margin: 0;} #slider ul li h2, #slider ul li h3 {font-size: 48px;} #slider ul li.slider-item-1 img {display: block;} #slider ul li img {display: none;} #slider ul li .item-html {top: 10%;z-index: 1;padding: 20px;}Заменяем на
#slideshow {padding-bottom: 0;margin: 0;} #slideshow #slider h2, #slideshow #slider h3 {font-size: 48px;} #slideshow #slider .slider-item-1 img {display: block;} #slideshow ul li img {display: none;} #slideshow ul li .item-html {top: 10%;z-index: 1;padding: 20px;}
Находим
#slider ul li h2, #slider ul li h3 {font-size: 36px;} #slider .text-border {padding-bottom: 30px;}Заменяем на
#slideshow #slider h2, #slideshow #slider h3 {font-size: 36px;} #slideshow .text-border {padding-bottom: 30px;}
Находим
#slider .text-border {border-bottom: 0;padding: 0;} #slider .text-border:before, #slider .text-border:after, #slider .text-border h2:before, #slider .text-border h2:after, #slider ul li h3 {display: none;}Заменяем на
#slideshow .text-border {border-bottom: 0;padding: 0;} #slideshow .text-border:before, #slideshow .text-border:after, #slideshow .text-border h2:before, #slideshow .text-border h2:after, #slideshow #slider h3 {display: none;}
Находим
#slider ul li h2 {display: none;}Заменяем на
#slideshow #slider h2 {display: none;}