>
Категории вопросов
Задать вопрос +

Основное

Контент-модули

Продвижение сайта

Управление сайтом

Доп. модули

Вебмастеру

Похожие вопросы



Добавление слайдера с шаблона 1728 на сайт

голоса: 0
Добрый день! Пытаемся добавить слайдер с шаблона 1728, взят по ссылке https://www.ucoz.ru/qa/index.php/40938?show=40947#a40947. Почему ничего не отображается? Заранее, благодарны за ответ
Адрес сайта http://anapa-biblio.ucoz.ru/
Закрыто с пометкой: Вопрос решен!
| Автор: | Категория: Дизайн сайта
Закрыт | | Автор: Yuri_Geruk

Ответов: 1

голоса: 0
 
Лучший ответ
Прежде всего отключите техработы на сайте. После опишите, что вы проделали для установки слайдера, что и куда устанавливали.
| Автор:
Выбор ответа лучшим | | Автор: Balandin Sergey

Тех работы отключили. Код шаблона взят по ссылке:https://www.ucoz.ru/qa/index.php/40938?show=40947#a40947.

в promo добавили:

<section id="promo">
<div class="promo-slider-wrapper">
<div class="promo-slider"><img alt="" src="/.s/t/1728/promo1.jpg" />
<div class="promo-caption"><span class="promo-title">Lorem ipsum dolor sit amet consectetur </span> <a href="#" type="button">Read more</a></div>
</div>

<div class="promo-slider"><img alt="" src="/.s/t/1728/promo1.jpg" />
<div class="promo-caption"><span class="promo-title">Lorem ipsum dolor sit amet consectetur </span> <a href="#" type="button">Read more</a></div>
</div>

<div class="promo-slider"><img alt="" src="/.s/t/1728/promo1.jpg" />
<div class="promo-caption"><span class="promo-title">Lorem ipsum dolor sit amet consectetur </span> <a href="#" type="button">Read more</a></div>
</div>

<div class="promo-slider"><img alt="" src="/.s/t/1728/promo1.jpg" />
<div class="promo-caption"><span class="promo-title">Lorem ipsum dolor sit amet consectetur </span> <a href="#" type="button">Read more</a></div>
</div>
</div>

<div class="promo-wrapper clearfix">
<div class="promo-i">
<div class="img-wrapper"><img alt="" src="/.s/t/1728/promo2.jpg" /></div>

<div class="news-descr">
<div class="title">
<h4><a href="">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a></h4>
</div>

<div class="promo-message">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aperiam, aspernatur cum Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aperiam, aspernatur cum</div>

<div class="link-holder"><a href="#" type="button">Read more</a></div>
</div>
</div>

<div class="promo-i">
<div class="img-wrapper"><img alt="" src="/.s/t/1728/promo3.jpg" /></div>

<div class="news-descr">
<div class="title">
<h4><a href="">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a></h4>
</div>

<div class="promo-message">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aperiam, aspernatur cum Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aperiam, aspernatur cum</div>

<div class="link-holder"><a href="#" type="button">Read more</a></div>
</div>
</div>

<div class="promo-i">
<div class="img-wrapper"><img alt="" src="/.s/t/1728/promo4.jpg" /></div>

<div class="news-descr">
<div class="title">
<h4><a href="">Lorem ipsum dolor sit amet consectetur adipisicing elit.</a></h4>
</div>

<div class="promo-message">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aperiam, aspernatur cum Lorem ipsum dolor sit amet, consectetur adipisicing elit. A animi aperiam, aspernatur cum</div>

<div class="link-holder"><a href="#" type="button">Read more</a></div>
</div>
</div>
</div>
</section>
<link href="/.s/t/1728/jquery.bxslider.min.css" rel="stylesheet" />
<script> $(function () { $('.promo-slider-wrapper').bxSlider({controls:!1,auto: true}); }); </script>

| Автор:
Balandin Sergey,
Предоставьте код с шаблона страницы сайта модуля редактор страниц.
| Автор:

А в стили CSS:

.promo-caption{position:absolute;top:0;left:0;width:33.3%;background-color:rgba(7,74,140,0.93);height:100%;text-align:center;padding:2.5em;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;color:#dae7f2}
.promo-caption span{font-size:1rem;line-height:1.44;text-transform:uppercase;display:inline-block;padding:20px 0}
#promo .bx-wrapper .bx-pager{position:absolute;left:0;width:33.3%;bottom:20px}
#promo .bx-wrapper .bx-pager.bx-default-pager a{background:transparent;width:15px;height:15px;border-radius:50%;padding:4px;margin:0 2px}
.promo-slider-wrapper{overflow:hidden}
.promo-slider-wrapper .promo-slider:not(:first-child){visibility:hidden;height:0}
.bx-viewport .promo-slider-wrapper .promo-slider{visibility:visible;height:auto}
#promo .bx-wrapper .bx-pager.bx-default-pager a:hover,#promo .bx-wrapper .bx-pager.bx-default-pager a.active{background-color:rgba(12,127,242,0.93)}
#promo .bx-wrapper .bx-pager.bx-default-pager a:after{content:'';display:block;height:7px;width:7px;border-radius:50%;background:rgba(255,255,255,0.9)}
.promo-slider img{object-fit:cover;width:100%}
.promo-slider{position:relative}
#promo .bx-wrapper{border:0;margin-bottom:15px;}
#promo{margin:0 0 15px;overflow:hidden;}
.promo-i{width:calc(100% / 3);float:left;height:450px;padding:0;position:relative;background:rgba(255,255,255,0.93);color:#4f535f}
.promo-i:not(:last-child) .news-descr{border-right:1px solid rgba(11,114,217,0.15)}
.promo-i .img-wrapper{overflow:hidden;line-height:0;height:155px}
.promo-i .img-wrapper img{width:100%;height:100%;object-fit:cover}
.promo-i .news-descr{padding:20px;height:calc(100% - 155px);position:relative}
.promo-i h4{font-size:1rem;font-weight:400;color:#0c7ff2;line-height:1.57;margin:0;text-transform:uppercase;max-height:55px;overflow:hidden}
.promo-date{font-size:.85rem;line-height:1.75;padding:10px 0}
.promo-message{font-size:1rem;line-height:1.64;max-height:154px;overflow:hidden;padding-bottom:10px;margin-top:10px;position:relative}
.link-holder{bottom:10px;padding:10px 20px;left:0;width:100%;text-align:right;position:absolute}
.link-holder a{display:inline-block}

 

@media only screen and (max-width:1200px){
    .wrapper{width:100%;padding:0 20px}
.promo-caption{padding:1em}
}
@media only screen and (max-width:960px){
#header .wrapper{width:100%;padding:0}
}
@media only screen and (max-width:768px){
.promo-i,.promo-i:first-child{width:50%}
.promo-i:first-child .img-wrapper{float:none;width:100%;height:155px}
.promo-i:first-child .news-descr{width:100%;padding:25px}
.promo-i:first-child h4{font-size:1rem;font-weight:700}
.promo-i:first-child .link-holder{width:100%;bottom:15px}
.promo-i:first-child .promo-message{max-height:118px}
}@media only screen and (max-width:640px){
    .wrapper{padding:0 15px}
.promo-caption{width:100%;height:100%;bottom:0;top:auto}
span.promo-title{font-size:1rem;padding:10px}
#promo .bx-wrapper .bx-pager{display:none}
}
@media only screen and (max-width:480px){
.promo-i,.promo-i:first-child{width:100%}
.promo-i .link-holder,.promo-i:first-child .link-holder{bottom:30px}
}
@media only screen and (max-width:360px){.wrapper{padding:0 10px}
}
| Автор:
Yuri_Geruk,

< html > <head>

 
<meta charset="utf-8">
<title>$ИМЯ_САЙТА$ - $ИМЯ_МОДУЛЯ$</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<?$ META_DESCRIPTION$?>
<?$ META_KEYWORDS$?>
<script type="text/javascript">
вар браузер = навигатор.ашераденс;
вар browserRegex = /(Android|Ежевика|IEMobile|нокиа|ис(объявление|хона|ОД)|оперы М(Оби|ини))/;
вар isMobile = ложь;
если(браузер.матч(browserRegex)) {
isMobile = истина;
метода addeventlistener("нагрузка", функция() { функции settimeout(hideURLbar, 0); }, ложь);
функция hideURLbar(){
окна.scrollTo(0,1);
}
}
</script>
< link type = "text / css" rel= "stylesheet" href= " /_st / my.для css" />
<script type="text/javascript">
var navTitle = 'Navigation';
</script>
</head>


<body class="page-body">
$ADMIN_BAR$
$GLOBAL_AHEADER$
<!-- <global_promo> -->
<?если ($URI_ID$ = 'page1')?>
<section>
<div class="wrapper">
<div id="promo">
<div class="promo-img">
<div id="uncheader" class="$UHEADER_CLASS$">
png) 50% 50% no-repeat;"></div>
</div>
</div>
<div class="promo-caption">
<div class="promo-i">
<div class="promo-b">
<div class="promo-title">
ДОБРО ПОЖАЛОВАТЬ
</div>
<div class="promo-text">
<center><br></center><center><br></center><center><br></center><center> МЫ РАДЫ ВИДЕТЬ ВАС В НАШИХ БИБЛИОТЕКАХ</center>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<?эндиф?>
<!-- </global_promo> -->
<div id="casing">
<div class="wrapper">
<?if ($MODULE_ID$ = 'forum')?> < div class = "forum-box"><?эндиф?>
<!-- <middle> -->
<div id="content">
<div id="cont-i">
<!-- <body> -->$CONTENT$<!-- </body> -->
</div>
</div>
<aside>
<div id="sidebar">
<div class="sidebox">
<div class="inner">
<div style= "выравнивание текста: по центру"><?если ($USERS_ON$)?><?if ($USER_LOGGED_IN$)?> < span><!--<s5212>-->Приветствую Вас<!-- </s>-->, <a href= "$PERSONAL_PAGE_LINK$ " ><b > $USERNAME$< / b > < / a>!< / span><?еще?> < span><!--<s5212>-->Приветствую Вас<!-- </s>-->, < b>$USERNAME$< / b>!< / span><?эндиф?> <br><?эндиф?>
<?если ($USERS_ON$)?><?if ($USER_LOGGED_IN$)?><a title="Мой профиль" href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мой профиль<!--</s>--></a> | <a title="Выход" href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!-- </s> -- > < / a><?еще?><a title="Регистрация" href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a> | <a title="Вход" href="$LOGIN_LINK$"><!--<s3087>-->Вход<!-- </s> -- > < / a><?эндиф?><?эндиф?></div>
</div>
<div class="clr"></div>
</div>
$GLOBAL_CLEFTER$
</div>
</aside>
<!-- </middle> -->
<div class="clr"></div>
<?if ($MODULE_ID$ = 'forum')?>< / div><?эндиф?>
</div>
</div>
$GLOBAL_BFOOTER$
<script type= "text / javascript" src="/.S/T / 2011 / шаблон.минута.АО"></script>
 
<div style="display:none">

</div>
<style>
#hpvgd,.H-mdiv.H-mdiv2,.H-ldiv.ч-данные {фон:#EAEAEA; цвет:#6D6D6D;}
#hpvgd {Ширина:100%; Z-индекс:100; Ширина:100%; нижней границы:2 пикселя Солид РГБ(230,230,230);}
.ч-магистра богословия mdiv {Дисплей:нет; положение:относительная; маржи:авто; текст-alegn:центр;}
.ч-mdiv2 {Дисплей:нет; положение:фиксированная; маржи:авто; текст-alegn:центр; Ширина:400 пикселей; высота:200px;}
.ч-ldiv {плавать:слева; обивка:7px значение 10px 7px 0px;}
.ч-данные {позицию:абсолютная; топ:7px; слева:0px; текст-согласовать:слева;}
.H-Ni {display: none !важно;}
а.hcmaf {цвет:красный; левое поле:5 пикселей; шрифт-Размер:20 пикселей; шрифт-вес:жирный;}
а.ч-анл {цвет:#2a72cc;}
а.н-ал {цвет:#ED664B;}
.ч интернет {шрифт-вес:смелые; границы-радиус:50%; обивка:0px 8 пикс; маржи-право:5 пикселей; шрифт-Размер:19px;}
.H-background-1 {color:#fff !важно; фон:#000 !важно;}
.H-background-2 {color:#000 !важно; фон:#fff !важно;}
</style>
минута.в JS"></script>
<script>
вар угэ = 2,
СПГ = 'ру',
и = 0,
гим = 1,
БГ = 1,
hwidth = 0,
БГС = ['1','2'],
шрифты = ['17','19','21'];
$(документ).готовые(функция(){uhpv(и)});
</script>
 
 
<script>
вар $выбор = $('.archMenu');
вар $опционов = $выбрать.найти('параметр');
вар $выбранными = $выбрать.вал();
$опционы.][ = ломтик.опцион на покупку.)обратный();
$варианты.unshift ($options.поп());
$выбрать.пустой();
$.каждый($опции, функция (я, Эль) {
$выбрать.функции append($(Эл));
});
$выбрать.функция val($установлен);
</script>
 
 
 

< / body> < / html>

| Автор:
Balandin Sergey,

Вместо выделенного красным вставьте код $GLOBAL_PROMO$

| Автор:
Yuri_Geruk,
Чт-то всё поехало? Нам хотя бы чтобы самый верхний слайдер работал правильно. Нижние можно вообще убрать
| Автор:
Balandin Sergey,

Попробуйте в стилях заменить строку 507:

#promo{margin:0 0 15px;overflow:hidden;}

на:

#promo{max-width: 1170px;margin: 0 auto;overflow:hidden;}

| Автор:
Yuri_Geruk,
Поменяли, что-то ничего не меняется(
| Автор:
Balandin Sergey,

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

| Автор:
Yuri_Geruk,
Сделали как у вас, ничего не меняется.
| Автор:
Balandin Sergey,
Кеш не очистили в итоге и не увидели изменений. За вас кеш никто не очистит https://ukit.com/ru/help/kak-ochistit-cahe Вы уже все вернули назад, в итоге и кеш чистить уже нет смысла. В общем, по сути уже все решение подсказано, просто не нужно спешить и делать все как пишут и чистить кеш и будет все хорошо.
| Автор:
Yuri_Geruk,
Добрый день! Вернули все обратно. Посмотрите, пожалуйста как уменьшить размеры, выровнять по центру и где пропали переключатели слайдера.
| Автор:
Balandin Sergey,

Ошибка в стилях margin:0auto; между 0 и auto должен быть пробел. По автоматической промотке слайдов, читайте материал https://www.ucoz.ru/qa/index.php/169600

| Автор:
Yuri_Geruk,
посмотрите, пожалуйста, сделали все как у вас и кэш почистили. Ничего не изменилось.
| Автор:
Balandin Sergey,
Изменилось. Кеш плохо чистили https://ukit.com/ru/help/kak-ochistit-cahe
| Автор:
Yuri_Geruk,
Спасибо, теперь по центру. А как уменьшить высоту слайдера? и почему-то нет  переключателей
| Автор:
Balandin Sergey,

В блоке промо замените код:

<link href="/.s/t/1728/jquery.bxslider.min.css" rel="stylesheet" />
<script> $(function () { $('.promo-slider-wrapper').bxSlider({controls:!1,auto: true}); }); </script>
<script type="text/javascript">
$('.promo-slider-wrapper').bxSlider({
 auto: true,
});
</script>

на:

<link rel="stylesheet" href="/.s/t/1728/jquery.bxslider.min.css">
<script src="/.s/t/1728/jquery.bxslider.min.js"></script>
<script> $(function () { $('.promo-slider-wrapper').bxSlider({controls:!1,auto: true}); }); </script>
<script type="text/javascript"> $(function () { $('.promo-slider-wrapper').bxSlider({ auto: true, }); }); </script>

По высоте фото, в стилях в строке номер 504 найдите стили:

.promo-slider img{object-fit:cover;height: 400px;width:100%;}

Плюс ниже найдите строку 506:

#promo .bx-wrapper{border:0;margin-bottom:15px;height: 385px;}

добавьте красное, вместо 385 пропишите нужную вам высоту фото и слайдера. Хотя 385 идеально подходит.

| Автор:
Yuri_Geruk,
Спасибо, как теперь уменьшить высоту слайдера в три раза.
| Автор:
Balandin Sergey,
Ответ дан выше, читайте внимательно, дополнительно выделено красным.
| Автор:
Yuri_Geruk,
Спасибо, все получилось. А как убрать синюю картинку со слайдера. И почему на одних картинках слайдера текст пишется вверху, а на других внизу, что исправить?
| Автор:
Balandin Sergey,

По тексту и кнопке, замените ваши стили начиная с строки 497 по последнюю на следующие:

 
стили
| Автор:
Balandin Sergey,
Стили чуть подправлены. Обновите повторно стили.
| Автор:
Yuri_Geruk,
Посмотрите, пожалуйста, что-то кнопка Read more съезжает и текст в ней.
| Автор:
Balandin Sergey,
Все отлично http://joxi.ru/xAegGnkcplMoZm она сместилась так как в стилях я это прописал чтобы она была ниже под текстом, а не перед ним.
| Автор:
Yuri_Geruk,
Спасибо, очень хорошо получилось. А возможно ли убрать синий фон на картинках слайдера или хотя бы поменять этот цве.
| Автор:
Balandin Sergey,

В стилях в строке 495 и 497 найдите и удалите код:

background-color:rgba(7,74,140,0.93);

| Автор:
Yuri_Geruk,
Спасибо! Скажите, пожалуйста, где посмотреть размеры картинки слайдера
| Автор:
Balandin Sergey,
Те что стилями прописаны в строке 504. А те что у фото реальные размеры, просто откройте фото в новой вкладке по прямой ссылке, после наведите курсор мыши на вкладку и увидите в титле ее размер вида 100х100
| Автор:
Yuri_Geruk,
ОГРОМНОЕ СПАСИБО за помощь Yuri_Geruk!
| Автор:
...