Содержание
В стандартных шаблонах uCoz имеется много слайдеров и часто возникает необходимость один из этих слайдеров установить на свой сайт в uCoz, но на другом шаблоне, который вы не хотите менять на другой в котором есть слайдер который вам нужен. Сегодня мы рассмотрим материал о том, как установить слайдер с шаблона 1802 себе на сайт. Данный шаблон наверное имеет больше всех встроенных системных слайдеров, их 4 штуки (слайдер сотрудников компании, слайдер об услугах компании, слайдер новостей и слайдер последних комментариев).
Первым делом вам нужно перейти в глобальный блок "Верхняя часть сайта" или глобальный блок Promo или Slider который вы специально для данной задачи создали.
Первым будет слайдер об услугах компании. Устанавливать его более желательно в Верхнюю часть сайта или в блок промо или слайдер, вам решать куда вам нужно. Далее перейти в внутрь глобального блока установить код слайдера:
<div class="devices-wrap inside-wrapper"> <h3 class="block-title">Devices</h3> <ul class="slides" id="devices-slider"> <li class="devices-example"> <div class="devices-img"><img src="ссылка на слайд 1" alt="example"></div> <div class="devices-text"> <h5>Заголовок</h5> <p>Описание</p> </div> </li> <li class="devices-example"> <div class="devices-img"><img src="ссылка на слайд 2" alt="example"></div> <div class="devices-text"> <h5>Заголовок</h5> <p>Описание</p> </div> </li> <li class="devices-example"> <div class="devices-img"><img src="ссылка на слайд 3" alt="example"></div> <div class="devices-text"> <h5>Заголовок</h5> <p>Описание</p> </div> </li> <li class="devices-example"> <div class="devices-img"><img src="ссылка на слайд 4" alt="example"></div> <div class="devices-text"> <h5>Заголовок</h5> <p>Описание</p> </div> </li> </ul> <div id="bx-pager"> <a data-slide-index="0" href="" class="active"><img src="ссылка на слайд 1"></a> <a data-slide-index="1" href=""><img src="ссылка на слайд 2"></a> <a data-slide-index="2" href=""><img src="ссылка на слайд 3"></a> <a data-slide-index="3" href=""><img src="ссылка на слайд 4"></a> </div> <script> $(window).on('load', function () { $('#devices-slider').bxSlider({ useCSS: false, nextText: 'keyboard_arrow_right', prevText: 'keyboard_arrow_left', pagerCustom: '#bx-pager', autoStart: true }); }); </script> </div>
Этот слайдер подходит для списка сотрудников компании который можно использовать как для сайта магазина так и для сайта строительной компании и прочих сайтов для бизнеса. Устанавливать данный слайдер, желательно где-то в глобальный блок Нижняя часть сайта или в блок Bottom или слайдер, вам решать куда вам нужно. Далее перейти в внутрь глобального блока установить код слайдера:
<div class="specialties inside-wrapper"> <h3 class="block-title">Our doctors</h3> <ul class="slides" id="services-slider"> <li class="doctor"> <img src="ссылка на слайд 1" alt="example"> <div class="info"> <p class="name">Заголовок</p> <p>Описание</p> </div> </li> <li class="doctor"> <img src="ссылка на слайд 2" alt="example"> <div class="info"> <p class="name">Заголовок</p> <p>Описание</p> </div> </li> <li class="doctor"> <img src="ссылка на слайд 3" alt="example"> <div class="info"> <p class="name">Заголовок</p> <p>Описание</p> </div> </li> <li class="doctor"> <img src="ссылка на слайд 4" alt="example"> <div class="info"> <p class="name">Заголовок</p> <p>Описание</p> </div> </li> <li class="doctor"> <img src="ссылка на слайд 5" alt="example"> <div class="info"> <p class="name">Заголовок</p> <p>Описание</p> </div> </li> <li class="doctor"> <img src="ссылка на слайд 6" alt="example"> <div class="info"> <p class="name">Заголовок</p> <p>Описание</p> </div> </li> </ul> <script type="text/javascript" src="/.s/t/1802/jquery.bxslider.min.js"></script> <script> $(window).on('load', function () { $('#services-slider').bxSlider({ useCSS: false, nextText: 'keyboard_arrow_right', prevText: 'keyboard_arrow_left', minSlides: 2, maxSlides: 3, moveSlides: 1, slideWidth: 365, slideMargin: 30, pager: false, autoStart: true }); }); </script> </div>
Этот слайдер создан специально для новостей сайта с модуля (Новости) и работает на уровне информеров. Для установки данного слайдера более желательно выбирать глобальный блок Нижняя часть сайта или блок Bottom. Если у вас слишком широкий правый или левый контейнер, можно и в него установить данный слайдер.
Код слайдера:
<div class="news-wrap"> <h3 class="block-title">Заголовок перед слайдером</h3> <ul class="slides" id="news-slider"> $MYINF_5$ </ul> <script> $(window).on('load', function () { $('#news-slider').bxSlider({ useCSS: false, mode: 'vertical', nextText: 'keyboard_arrow_right', prevText: 'keyboard_arrow_left', minSlides: 2, maxSlides: 2, slideWidth: 460, slideMargin: 30, pager: false, autoStart: true }); }); </script> </div>
Как видно с кода выше, данный слайдер работает с использованием информеров. В коде выше прописан код $MYINF_5$ вам нужно будет вместо данного кода прописать свой код информера. При создании данного слайдера информера можете выбрать как модуль новости так и модуль блог или каталоги (файлов, статей, объявлений, сайтов и игр).
После создания слайдера замените стандартный код шаблона информера на такой код:
<li class="news"><?if($IMG_URL1$)?><div class="news-img"><img src="$IMG_URL1$" alt="cover"></div><?endif?><h5><a href="$ENTRY_URL$">$TITLE$</a></h5><p>$MESSAGE$</p></li>
вот и все, с слайдером последних материалов мы закончили.
Данный слайдер так же работает с использованием информеров и служит он для последних комментариев. Для установки подойдет как выше уже упоминалось глобальный блок Нижняя часть сайта или блок Bottom. Если у вас слишком широкий правый или левый контейнер, можно и в него установить данный слайдер.
Код слайдера:
<div class="review-wrap"> <h3 class="block-title">Заголовок над слайдером</h3> <ul class="slides" id="review-slider"> $MYINF_6$ </ul> <script> $(window).on('load', function () { $('#review-slider').bxSlider({ useCSS: false, mode: 'fade', nextText: 'keyboard_arrow_right', prevText: 'keyboard_arrow_left', pager: false, autoStart: true }); }); </script> </div>
В коде выше прописан код $MYINF_6$ вам нужно будет вместо данного кода прописать свой код информера. При создании данного слайдера информера выбрать раздел Комментарии, далее желательно выбрать пункт Все модули чтобы комментарии подгружались с всех модулей. Если вам нужны комментарии с отдельного модуля, можете выбирать один отдельный вместо пункт Все модули.
После создания слайдера замените стандартный код шаблона информера на такой код:
<li class="review"><div class="review-text"><p>$MESSAGE$</p><p class="name">$USERNAME$</p></div><div class="review-img"><?if($USER_AVATAR_URL$)?><img src="$USER_AVATAR_URL$" alt="example"><?else?><span class="no_avatar material-icons">person</span><?endif?></div></li>
сохраняем изменения. Частично мы выполнили установку слайдера, пока лишь тело, осталось еще стили установить.
Перейдите в таблицу стилей CSS и установите следующие стили:
.flex-viewport{text-align:left}
.bx-wrapper{display:flex;flex-direction:column-reverse}
.bx-controls.bx-has-controls-direction{padding:0 0 15px 0}
.bx-controls-direction{text-align:left}
.promo img{display:block;max-width:100%;width:100%;margin:0 auto}
.slides,.slide{padding:0;margin:0;list-style:none}
.promo{position:relative;overflow:hidden;max-height:100vh}
.slide:first-child{display:block;position:relative!important}
.caption-wrap{position:absolute;background:rgba(255,255,255,.75);padding:0 20px;top:0;height:100%;left:0;z-index:15;flex-direction:column;align-content:center;justify-content:center;display:flex}
.caption{max-width:1240px;padding:0 20px;margin:0 auto}
.cap-ttl{padding:20px 0 10px;color:#000;font-family:Montserrat;font-weight:700;font-size:42px;line-height:1.3}
.cap-ttl,.cap-ds{position:relative;z-index:100;max-width:500px}
.cap-ds{padding:10px 0 0;line-height:1.4}
.specialties .works{display:-webkit-box;display:-ms-flexbox;display:flex}
.text-center{padding:0 15px}
.doctor{background:#fff;max-width:358px;border:1px solid #ccc;border-radius:6px}
.doctor img{border-radius:6px 6px 0 0;display:block}
.info{padding:0 20px;text-align:center}
.doctor .name{color:#000;font-family:Montserrat;font-size:18px;font-weight:700;letter-spacing:-0.45px}
.doctor p{margin:0;padding:10px 0}
a.work-title:hover{color:#26bf66}
h3.block-title{font-size:37px;line-height:1.22;padding-bottom:30px}
.inside-wrapper{padding:70px 30px;background:#fff}
.news-review-wrap{display:flex;justify-content:space-between;flex-wrap:wrap}
.news{overflow:hidden;max-height:145px}
.news::before{background:-webkit-linear-gradient(top,transparent 90%,#fff 100%);content:'';z-index:1;max-width:460px;width:100%;pointer-events:none;height:100%;position:absolute;bottom:0}
.news h5 a{color:#000}
.news h5 a:hover{color:#097546}
.news-img{float:left;padding-right:30px}
.news-img img{border-radius:6px;max-width:130px}
.review-text{border:1px solid #ccc;padding:25px;border-radius:6px;margin-bottom:40px;position:relative}
.review-img img{max-width:65px;border-radius:6px}
.review-img span.no_avatar{width:65px;height:65px}
.review-text::before{content:'';display:block;width:0;height:0;border-style:solid;border-width:21px 21px 0 0;border-color:#ccc transparent transparent transparent;position:absolute;bottom:-22px;left:24px}
.review-text::after{content:'';display:block;width:0;height:0;border-style:solid;border-width:20px 20px 0 0;border-color:#fff transparent transparent transparent;position:absolute;bottom:-20px;left:25px}
.name{font-family:"Roboto Condensed";font-size:16px;font-weight:700;line-height:1.38}
.review-wrap{padding-left:80px;width:55%}
.news-wrap{width:45%}
h4.post-title a{text-decoration:none;color:#121111;font-size:25px;-webkit-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.post-content{text-align:left;padding:10px 30px 35px}
.services{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:30px 0 10px}
.text{width:50%;-webkit-box-flex:1;flex-grow:1;text-align:left;padding-left:140px;padding-right:80px;position:relative;margin-bottom:25px}
.text i{position:absolute;left:0;height:110px;width:110px;padding:20px;line-height:110px;border-radius:50%;text-align:center;background-color:#f1f1f1}
.text i img{max-width:50px}
a.bx-next,a.bx-prev{font-family:"Material Icons";color:#000;font-size:20px;padding:6px;border:1px solid #ccc;border-radius:6px;margin-right:10px;transition:all .3s}
a.bx-next:hover,a.bx-prev:hover{border:1px solid #26bf66;background-color:#26bf66;color:#fff}
.services h4 a{color:#000;font-family:Montserrat;font-size:25px;font-weight:700;line-height:1.92;letter-spacing:-0.63px;transition:all .3s}
.services h4 a:hover{color:#26bf66}
.devices-img{float:left;width:60%;padding-right:30px}
.devices-example h5{font-size:25px}
div#bx-pager{width:60%;padding-right:30px;display:flex;justify-content:space-between}
div#bx-pager a:not(.active) img{filter:brightness(.5);transition:all .3s}
div#bx-pager a:hover img{filter:brightness(1)}
div#bx-pager a{font-size:0}
div#bx-pager a:not(:last-child){margin-right:5px}
@media only screen and (max-width:960px){
.cap-ttl,.cap-ds{max-width:100%}
.cap-ds{font-size:15px}
.text{padding-left:120px;padding-right:20px}
.caption-wrap{width:100%}
}
@media(max-width:840px){.text{width:100%}
.news-wrap,.review-wrap{width:100%;padding:0}
.news-wrap .bx-wrapper{max-width:100%!important}
}
@media(max-width:768px){
.doctor img{width:100%}
.devices-img{float:none;width:100%;padding-right:0}
div#bx-pager{width:100%;padding-right:0}
.specialties .works{flex-wrap:wrap}
.text i{height:70px;width:70px;padding:20px;line-height:50px}
.text i img{max-width:35px}
.text{padding-left:80px;padding-right:0;margin-bottom:10px}
.doctor .name{margin:0}
.info p{margin:5px 0}
}
@media only screen and (max-width:640px){
#slider .caption{width:100%}
#slider{padding:0}
.cap-ttl{font-size:37px}
.cap-ds{font-size:12px;padding:0 0 20px}
}
@media only screen and (max-width:480px){
.text{width:100%}
.cap-ds{font-size:12px;padding:0 20px 15px}
.cap-ttl{font-size:32px}
}
@media only screen and (max-width:360px){
.services{padding:0}
.text{padding-right:0}
}
Если у вас остаются вопросы по установке или настройке отдельных частей слайдера, оставляйте свои вопросы в комментариях к материалу.
Лицензия: CC BY-SA 4.0
Автор: Юрий Герук
Благодарность автору!
|
| |
Здравствуй Гость, комментарии могут оставлять только зарегистрированные пользователи, зарегистрируйтесь и поделитесь мнением о материале выше Регистрация или Войти.
