Question

Здравствуйте. Такой вопрос как можно вытянуть слайдер из шаблона 1801 и вставить в 1807. С глобальным блоком PROMO все понятно, а что надо брать из таблицы стилей и надо ли что-то еще?

Answer 1

Сам код слайдера:

<section class="slider2">
<div class="carousel-wrapper">
<div class="slide-c">
<div class="img-wrapp">
<div class="under-img"><img src="/.s/t/1801/1.jpg" alt="cover"></div>
<div class="main-img"><img src="/.s/t/1801/1.jpg" alt="cover"></div>
</div>
<div class="title">
<a href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="slide-c">
<div class="img-wrapp">
<div class="under-img"><img src="/.s/t/1801/2.jpg" alt="cover"></div>
<div class="main-img"><img src="/.s/t/1801/2.jpg" alt="cover"></div>
</div>
<div class="title">
<a href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="slide-c">
<div class="img-wrapp">
<div class="under-img"><img src="/.s/t/1801/3.jpg" alt="cover"></div>
<div class="main-img"><img src="/.s/t/1801/3.jpg" alt="cover"></div>
</div>
<div class="title">
<a href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="slide-c">
<div class="img-wrapp">
<div class="under-img"><img src="/.s/t/1801/4.jpg" alt="cover"></div>
<div class="main-img"><img src="/.s/t/1801/4.jpg" alt="cover"></div>
</div>
<div class="title">
<a href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="slide-c">
<div class="img-wrapp">
<div class="under-img"><img src="/.s/t/1801/5.jpg" alt="cover"></div>
<div class="main-img"><img src="/.s/t/1801/5.jpg" alt="cover"></div>
</div>
<div class="title">
<a href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="slide-c">
<div class="img-wrapp">
<div class="under-img"><img src="/.s/t/1801/1.jpg" alt="cover"></div>
<div class="main-img"><img src="/.s/t/1801/1.jpg" alt="cover"></div>
</div>
<div class="title">
<a href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="slide-c">
<div class="img-wrapp">
<div class="under-img"><img src="/.s/t/1801/2.jpg" alt="cover"></div>
<div class="main-img"><img src="/.s/t/1801/2.jpg" alt="cover"></div>
</div>
<div class="title">
<a href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="slide-c">
<div class="img-wrapp">
<div class="under-img"><img src="/.s/t/1801/3.jpg" alt="cover"></div>
<div class="main-img"><img src="/.s/t/1801/3.jpg" alt="cover"></div>
</div>
<div class="title">
<a href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="slide-c">
<div class="img-wrapp">
<div class="under-img"><img src="/.s/t/1801/4.jpg" alt="cover"></div>
<div class="main-img"><img src="/.s/t/1801/4.jpg" alt="cover"></div>
</div>
<div class="title">
<a href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor</p>
</div>
</div>
<div class="slide-c">
<div class="img-wrapp">
<div class="under-img"><img src="/.s/t/1801/5.jpg" alt="cover"></div>
<div class="main-img"><img src="/.s/t/1801/5.jpg" alt="cover"></div>
</div>
<div class="title">
<a href="#">Lorem ipsum</a>
<p>Lorem ipsum dolor</p>
</div>
</div>
</div>
</section>
<script src="/.s/t/1801/jquery.bxslider.min.js"></script>
<script>
$(function () {
$('.slider-wrapper').bxSlider({
useCSS: false,
auto: true,
autoStart: true,
nextText: 'keyboard_arrow_right',
prevText: 'keyboard_arrow_left',
pager: false
});
$('.carousel-wrapper').bxSlider({
useCSS: false,
nextText: 'keyboard_arrow_right',
prevText: 'keyboard_arrow_left',
minSlides: 5,
maxSlides: 5,
slideWidth: 192,
slideMargin: 5,
autoStart: true,
pager: false
});
});
</script>

Comments

стили к слайдеру:

.slider2{padding:50px 40px;background:#fff;max-height:450px}
.slider2 .bx-wrapper{margin:0 auto}
.slider2 .slide-c{position:relative}
.slider2 .title a:hover{color:#ec174f}
.slider2 .bx-pager.bx-default-pager{bottom:-25px}
.slider-wrapper{color:#fff}
.slider2 a.bx-prev{left:-50px}
.slider2 a.bx-next{right:-50px}
.slider2 .img-wrapp{position:relative;padding:20px 15px}
.under-img{position:absolute;padding:30px 15px;top:0;left:0;filter:blur(7px);z-index:0}
.main-img{position:relative;height:100%}
.main-img img{-webkit-transition:filter .35s,-webkit-transform .35s;transition:filter .35s,transform .35s;filter:brightness(1)}
.main-img:hover img{filter:brightness(0.8)}
.main-img::before{position:absolute;top:10px;right:10px;bottom:10px;pointer-events:none;left:10px;z-index:10;border:1px solid rgba(255,255,255,.4);content:'';-webkit-transform:scale(1.1);transform:scale(1.1)}
.main-img::before{opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s}
.main-img:hover::before{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
.slider2 .img-wrapp .main-img img{position:relative;z-index:2;max-width:165px}
.title{padding:0 15px;text-align:center}
.title a{color:#000;font-weight:900;font-size:15px}
.title p{color:#777;font-size:12px;margin:5px 0}
.slide .photo img,.slider2 .img-wrapp img{width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover}
.slide{max-height:50vw}
.info-block{padding:20px 40px 20px 80px;position:absolute;top:0;left:0;width:50%;height:100%;background-image:linear-gradient(to top,rgba(4,6,6,0) 0,rgba(4,6,6,0.9) 100%);display:flex;align-items:center}
.text-block{padding-left:30px;width:65%}
.promo-img{width:35%}
.info-block h1{line-height:1.2;margin:10px auto;color:#fff;font-size:29px;font-weight:500}
.info-block p{color:#fff;font-size:15px;line-height:1.6;margin:5px auto}
.slider-wrapper .info-btn{display:inline-block;background-color:#ec174f;padding:9px 30px;-webkit-transition:all .3s;transition:all .3s;margin-top:10px;color:#fff;font-size:16px;letter-spacing:.56px}
.slider-wrapper .info-btn:hover{background-color:#ff5991;text-decoration:none}
.slider-wrapper .info-btn:active{background-color:#c2185b}
.slide .photo img{border:0;max-width:100%;min-height:250px;-o-object-position:center;object-position:center}
.slide .photo{-webkit-filter:brightness(.8);filter:brightness(.8)}
.slider2 .bx-controls-direction{top:125px}
.bx-wrapper,.main-menu li,.main-menu li ul>li{position:relative}
.bx-controls-direction{position:absolute;top:calc(50% - 24px);width:100%}
.bx-controls-direction a{position:absolute;font-family:'Material Icons';font-size:30px;padding:0 7px;border-radius:50%;color:#000;z-index:2;-webkit-transition:all .3s;transition:all .3s;text-rendering:optimizeLegibility;-webkit-font-feature-settings:'liga';font-feature-settings:'liga';ms-font-feature-settings:'liga'}
.bx-controls-direction a:hover{background:rgba(0,0,0,.5);text-decoration:none}
a.bx-prev{left:15px}
a.bx-next{right:15px}

@media only screen and (max-width:1240px){

.info-block{width:100%;padding:20px 80px}

.slider2 a.bx-next{right:-30px}

.slider2 a.bx-prev{left:-30px}

}

@media screen and (max-width:960px){

.slider2{border-bottom:0}

}

@media only screen and (max-width:768px){

.info-block h1{font-size:20px;margin:0}

.text-block{padding:0 30px;width:100%}

.slider2{padding:15px 15px 30px}

.slider2 a.bx-next{right:-15px}

.slider2 a.bx-prev{left:-15px}

.bx-controls-direction a{padding:0;line-height:1}

}

@media screen and (max-width:640px){

.info-block p{display:none}

.slider2 .slide-c{width:140px!important;margin-right:10px!important}

.slider2 .img-wrapp{width:142px;height:210px}

.slider2 .bx-controls-direction{top:80px}

.slider2{padding:50px 15px 30px}

.info-block{text-align:center}
}

в результате получим работающий слайдер http://joxi.ru/GrqjMbEHQDpkBm

---

Yuri_Geruk,

Спасибо большое. Скажите, а как понять какие именно нужны строки в таблице стилей я понимаю, что все, где встречается слово slider а как определить с другими строками? и нужно ли удалять стиль старого слайдера?

---

SairitVS,

Если вы в этом ничего не понимаете, я вам сейчас в нескольких словах не объясню.

---

Yuri_Geruk,

Ладно в любом случае спасибо за помощь