• Страница 1 из 1
  • 1
Форум » Веб-разработка » Вопросы по uCoz » Как установить корректно слайдер для сайта (Как создать адаптивный слайдер для сайта с помощью CSS)
Как установить корректно слайдер для сайта
Шарлотка
Дата: Вторник, 2020-01-28, 11:41 | Сообщение 1
Оффлайн
Проверенные
Сообщений:20
Награды: 0


Здравствуйте. Помогите разобраться пожалуйста. Когда-то давно у меня стоял этот слайд.А теперь не получаетсяб



Приложенное описание информеров. Для новичка вообще ничего не понятно куда и как.

Информер #1 [Шаблон информера]

[ Комментарии · Материалы · Дата добавления материала D · Материалы: 3 · Колонки: 1 ]

Код
<div class="web_now clearfix">
<div class="web_now_ava circle">
<a href="$PROFILE_URL$"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://zornet.ru/Ajaxoskrip/Forma_skriptov/zZdU4oy.jpg<?endif?>" width="64" alt="" /></a></div>
<div class="web_now_body">
<div class="web_now_body_top">
<a href="$PROFILE_URL$" class="comm-user"><strong>$USERNAME$</strong></a>
<a href="$ENTRY_URL$" class="fa fa-arrow-circle-o-right pull-right"></a>
<span class="web_now_date">$DATE$ - $TIME$</span> </div>
<div class="web_now_body_container">
<span class="comm_sprt"></span>
<div class="web_now_body_mess shadow">
<div class="web_now_body_comment"><a href="$ENTRY_URL$"style="color: #D0CFCF;"> $MESSAGE$</a> </div>
</div>
</div>
</div>
</div>

<style>
.web_now:nth-of-type(odd) .web_now_ava {float: right;}
.circle {border-radius: 50%;}
.web_now_ava {height: 57px;width: 57px;border: 4px solid #7C7777; box-shadow: 0px 0px 1px 1px #626060;overflow: hidden;float: left;margin-top: 5px;}
.web_now_ava img {width: 110%;min-height: 112%; margin-top: -3px;margin-left: -2px;}
.web_now {position: relative;display: block;margin-bottom: 15px;}
.web_now_ava {height: 57px;width: 57px;border: 4px solid #7C7777;box-shadow: 0px 0px 1px 1px #626060;overflow: hidden;float: left;margin-top: 5px;}
.web_now_ava img {width: 110%;min-height: 112%;margin-top: -3px;margin-left: 0px;}
.web_now:nth-of-type(even)
.web_now_body {margin-left: 75px;margin-top: 12px;}
.web_now:nth-of-type(odd)
.web_now_body {padding-right: 5px;margin-top: 12px;display: block;}
.web_now_body_top {margin-bottom: 8px;padding:0 5px;line-height: 22px;}
.web_now_body_top a.comm-user {color: #708AA5;font-size: 14px;font-family: 'Roboto Medium';}
.web_now_date {color: #bfbfbf;float: right;font-size: 10px;margin-top: 2px;}
.web_now_body_top a.fa {margin-left: -14px;font-size: 16px;opacity: 0;visibility: hidden;transition:all 0.3s ease 0s;color: #d8d8d8;margin-top: 5px;}
.web_now_body_top a.fa:hover {color: #5bc4f3;}
.web_now_body_container {position: relative;}
.web_now_body_mess {background: #2A2C34;border: 1px solid rgba(173, 171, 171, 0.47);border-radius: 5px;padding: 8px 12px 10px;color: #959595;font-size: 12px;line-height: 18px;z-index: 0;display: block;font-family: 'Exo 2', sans-serif;font-style: italic;font-weight: 300;}
.web_now_body_comment {max-height: 55px;overflow: hidden;}
.web_now_body_comment a {color: #3BAFDA}
.web_now:nth-of-type(even) .web_now_body .web_now_body_container span.comm_sprt{background: url(http://kinovego.ru/CSTAVR/Arsa/e61501acba574c6c82e5722673813e09.png) no-repeat 0px 0px;width: 25px;height: 17px;display: block;position: absolute;left: -8px;top: 8px;}
.web_now:nth-of-type(odd) .web_now_body .web_now_body_container span.comm_sprt{background: url(http://kinovego.ru/CSTAVR/Arsa/23e0c69be67449d6bf0b178641962c96.png) no-repeat 0px 0px;width: 25px;height: 17px;display: block;position: absolute;right: -22px;top: 8px;}
.web_now:nth-of-type(odd) .web_now_ava {float: right;}
.web_now:nth-of-type(odd) .web_now_body {margin-right: 70px;}
</style>


Информер #3 [Шаблон информера]

[ Каталог файлов · Материалы · В случайном порядке · Материалы: 5 · Колонки: 1 ]

Код
<div class="block">
<a href="$ENTRY_URL$" title="$TITLE$">
<div class="img-block" style="background-image: url('$IMG_URL1$')"></div></a>
<div class="titrel">$TITLE$</div>
</div>


Информер #3 [Шаблон информера]

[ Каталог файлов · Материалы · В случайном порядке · Материалы: 20 · Колонки: 1 ]

Код
<li class="sliderElement rad3" style="border-radius: 4px; width: 153px; height: 200px; float: left;"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$" style="width: 153px; height: 200px;"></a></li>


Информер #5 [Шаблон информера]

[ Каталог файлов · Материалы · Количество просмотров D · Материалы: 15 · Колонки: 1 ]

Код
<div class="toplist">
<b style="border: solid 0px #888; padding: 1px 4px; border-radius: 50px; ">$NUMBER$</b> <a href="$ENTRY_URL$" title="$READS$ просмотров" style=" padding-left: 2px; ">$TITLE$</a> </div>

<style>
.toplist {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
padding: 7px 0!important;
list-style: inside;
background: #0B1622;
border-radius: 5px;
border: solid 1px #6D6D7F;
width: 100%;
margin-top: 2px!important;
}
.toplist:hover { background: #151414;}
</style>


Слайдер [Шаблон информера]

[ Каталог файлов · Материалы · В случайном порядке · Материалы: 20 · Колонки: 1 ]

Код
<li><a href="$ENTRY_URL$" title="$TITLE$"><img src="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>" width="106" height="157" alt="$TITLE$" /></a></li>


Информер #6 [Шаблон информера]

[ Комментарии · Материалы · Дата добавления материала D · Материалы: 3 · Колонки: 1 · Длина заголовка: 70 ]

Код
<div class="web_now clearfix">
<div class="web_now_ava circle">
<a href="$PROFILE_URL$"><img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>http://zornet.ru/Ajaxoskrip/Abaveg/tyn/noavatar.png<?endif?>" width="64" alt="" /></a></div>
<div class="web_now_body">
<div class="web_now_body_top">
<a href="$PROFILE_URL$" target="_blank" class="comm-user">$USERNAME$</a>
<a href="$ENTRY_URL$" class="fa fa-arrow-circle-o-right pull-right"></a>
<span class="web_now_date">$DATE$ - $TIME$</span> </div>
<div class="web_now_body_container">
<span class="comm_sprt"></span>
<div class="web_now_body_mess shadow">
<div class="web_now_body_comment"><a href="$ENTRY_URL$"style="color: #aab2bd;">$MESSAGE$</a> </div>
</div>
</div>
</div>
</div>
<style>
.web_now:nth-of-type(odd) .web_now_ava {float: right;}
.circle {border-radius: 50%;}
.web_now_ava {height: 57px;width: 57px;border: 4px solid #224976;box-shadow: 0px 0px 1px 1px #1F4E71;overflow: hidden;float: left;margin-top: 5px;}
.web_now_ava img {width: 110%;min-height: 112%;margin-top: -3px;margin-left: 0px;}
.web_now:nth-of-type(even)
.web_now_body {margin-left: 75px;margin-top: 12px;}
.web_now:nth-of-type(odd)
.web_now_body {padding-right: 5px;margin-top: 12px;display: block;}
.web_now_body_top {margin-bottom: 8px;padding:0 5px;line-height: 22px;}
.web_now_body_top a.comm-user {color: #aab2bd;font-size: 14px;font-family: 'Roboto Medium';}
.web_now_date {color: #bfbfbf;float: right;font-size: 10px;margin-top: 2px;}
.web_now_body_top a.fa {margin-left: -14px;font-size: 16px;opacity: 0;visibility: hidden;transition:all 0.3s ease 0s;color: #d8d8d8;margin-top: 5px;}
.web_now_body_top a.fa:hover {color: #5bc4f3;}
.web_now_body_container {position: relative;}
.web_now_body_mess {background: #112337;border: 1px solid rgba(197, 197, 197, 0.47);border-radius: 5px;padding: 8px 12px 10px;color: #717171;font-size: 12px;line-height: 18px;z-index: 0;display: block;font-family: 'Exo 2', sans-serif;font-style: italic;font-weight: 300;}
.web_now_body_comment {max-height: 55px;overflow: hidden;}
.web_now_body_comment a {color: #3BAFDA}
.web_now:nth-of-type(even) .web_now_body .web_now_body_container span.comm_sprt{background: url(http://zornet.ru/Aben/ABGER/22222.png) no-repeat 0px 0px;width: 25px;height: 17px;display: block;position: absolute;left: -8px;top: 8px;}
.web_now:nth-of-type(odd) .web_now_body .web_now_body_container span.comm_sprt{background: url(http://zornet.ru/Aben/ABGER/11111.png) no-repeat 0px 0px;width: 25px;height: 17px;display: block;position: absolute;right: -22px;top: 8px;}
.web_now:nth-of-type(odd) .web_now_ava {float: right;}
.web_now:nth-of-type(odd) .web_now_body {margin-right: 70px;}

</style>


Слайдер [Шаблон информера]

[ Каталог файлов · Материалы · В случайном порядке · Материалы: 20 · Колонки: 1 ]

Код
<li class="sliderElement rad3" style="width: 147px; height: 200px; float: left;"><a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="$TITLE$" style="width: 147px; height: 200px;"></a></li>

<style>
.sliderContent {padding:5px 0px; background:#151b23; width: 100%!important;} .sliderElement {margin:3px; padding:3px; opacity:0.7; background-color:#576C76; border-radius: 3px} .sliderElement:hover {opacity:3;}
.sliderButtonNext {
background: url("http://zornet.ru/Ajaxoskrip/Abaveg/slider_arrow-10.png") no-repeat;
width: 60px;
height: 37px;
text-decoration: none;
position: absolute;
z-index: 2;
top: 90px;
left: -10px;
}
.sliderButtonPrev {
background: url("http://zornet.ru/Ajaxoskrip/Abaveg/slider_arrow-10.png") -2px -38px no-repeat;
width: 60px;
height:37px;
text-decoration: none;
position: absolute;
z-index: 2;
top: 90px;
right: -1px;
}
.sliderButtonNext:active {
background: url("http://zornet.ru/Ajaxoskrip/Abaveg/slider_arrow-10.png") -2px 0px no-repeat;
}
.sliderButtonPrev:active {
background: url("http://zornet.ru/Ajaxoskrip/Abaveg/slider_arrow-10.png") 1px -38px no-repeat;
}
</style>


Код
src="$IMG_URL1$" height="180px" width="125px"></a></td></table> мо2</span>


Случайный материал [Шаблон информера]

[ Каталог файлов · Материалы · В случайном порядке · Материалы: 6 · Колонки: 1 ]

Код
<div class="ScreenGame">
<div class="ScreenGame-img" onclick="location.href='$ENTRY_URL$'" style="background-image: url('$IMG_URL1$')" title="Перейти к просмотру $TITLE$">
</div>
</div>


Код
<style type="text/css">
.ScreenGame {
display: block;
float: left;
width: 48%;
margin: 1%;
}
.ScreenGame-img {
display: block;
position: relative;
padding-bottom: 125%;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
border: 1px solid #515151;
border-radius: 3px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.ScreenGame-img:hover {
cursor: pointer;
border: 1px solid #6899C3;
}
@media all and (min-width:480px) and (max-width:768px) {
.ScreenGame {
width: 32%;
margin: 0.65%;
}
</style>


Блин, забыла ссылку на сайт. Вот kinoklubretro.ucoz.net
Прикрепления: 4654933.jpg(92.0 Kb)
Страна: (RU)
Kosten
Дата: Вторник, 2020-01-28, 13:32 | Сообщение 2
Оффлайн
Администраторы
Сообщений:26140
Награды: 60


Это что?
Страна: (RU)
Kosten
Дата: Вторник, 2020-01-28, 13:43 | Сообщение 3
Оффлайн
Администраторы
Сообщений:26140
Награды: 60




С ошибкой



Найдите в информере

Код
width: 1323px;


и поменяйте

Код
width: 100%;


Где вы взяли это все?
Прикрепления: 0499511.jpg(139.4 Kb) · 8816455.jpg(119.2 Kb)
Страна: (RU)
Шарлотка
Дата: Вторник, 2020-01-28, 14:41 | Сообщение 4
Оффлайн
Проверенные
Сообщений:20
Награды: 0


Все что у меня на сайте взять у вас здесь. Весь лист с информерами, которы там был приложен я разместила выше.
Страна: (RU)
Сопрано
Дата: Вторник, 2020-01-28, 17:10 | Сообщение 5
Оффлайн
Пользователи
Сообщений:424
Награды: 2


Шарлотка, как видно решили проблему?
Страна: (RU)
Kosten
Дата: Вторник, 2020-01-28, 23:49 | Сообщение 6
Оффлайн
Администраторы
Сообщений:26140
Награды: 60


Цитата Шарлотка ()
Все что у меня на сайте взять у вас здесь.

А нужно один слайдер, вы слегка перебрали кодов и стилей, но как видно вы все выставили и все корректно показывает.

Прикрепления: 3972695.jpg(42.1 Kb)
Страна: (RU)
-SAM-
Дата: Среда, 2020-01-29, 02:55 | Сообщение 7
Оффлайн
Друзья сайта
Сообщений:674
Награды: 28


Что вот этого касается:
Цитата Шарлотка ()
Приложенное описание информеров. Для новичка вообще ничего не понятно куда и как.
Цитата Шарлотка ()
Все что у меня на сайте взять у вас здесь. Весь лист с информерами, который там был приложен я разместила выше.
То этих информеров не было в материале здесь, ведь они к слайдеру отношения не имеют (соответственно и постить тут это всё не нужно было, весь лист с информерами с шаблона Kinovego).
P.S.: отписал, чтобы ясно было чего оно (без ссылки на материал тот не понятно о каком слайдере идёт речь).




Помог? Скажи спасибо в виде "+" - вам мелочь, а мне приятно.
Бесплатное оказание помощи и ответы на ваши вопросы по системе uCoz.


Сообщение отредактировал
-SAM- - Среда, 2020-01-29, 03:41
Страна: (UA)
Форум » Веб-разработка » Вопросы по uCoz » Как установить корректно слайдер для сайта (Как создать адаптивный слайдер для сайта с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: