» »

Адаптивный дизайн слайдера для uCoz

Адаптивный дизайн слайдера для uCoz

Любой слайдер на сайте всегда привлекает, а если он сделан правильно и адаптивный, где представлен горизонтальный вид с затемненными кнопками. Оно находиться по обеим сторонам, что идет в чисто белом оттенке, но также в дизайне имеют светло темную палитру, которая как раз выстраивает красиво каждый кадр. Что фон градиента отлично вписывается, чтоб сделать этот горизонтальный слайд одним целым.

Где пользователь или гость сайта не видит разрыва или другого материала, что немного выделяется. Этот фактор учтен, и все выходит с прекрасным переходом. Это когда вы смотрите на большом или на самом маленьком экране.

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

Проверяя его на работоспособность, снял несколько скринов, которые идет под разной шириной, где начнем с широкого монитора.

Адаптивный слайдер сайта

Здесь уже более узкий экран, что заметно по кадрам, их стало меньше, но стиль не потерялся.

Горизонтальный слайд с перемоткой

Это уже мобильный аппарат, где видим 2 полноценных изображение, а также все стрелки для переходов на месте.

Слайдер сайта для мобильных аппаратов

Приступаем к установке:

Первое, что делаем, это создаем информер с такими параметрами.

[ Каталог файлов · Материалы · В случайном порядке · Материалы: 20 · Колонки: 1 ]
Код
<a href="$ENTRY_URL$"> <span>$TITLE$</span> <img src="$IMG_URL1$" style="width: 152px; height: 243px" alt="$TITLE$" title="$TITLE$"> </a>

Далее ставим по месту, где хотите наблюдать слайдер.

HTML

Код
<div id="kupesegudn_kapulentacma">
<div id="kupesegudn_kapulentacmabox" style="left: -1320px;">
$MYINF_4$
</div>
<div style="" onmouseover="MoveMePlease(1)" onmouseout="cleaner()" id="mr" class="right"><img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/moveR.png" alt="" style="cursor: pointer;"></div>
<div style="" onmouseover="MoveMePlease(0)" onmouseout="cleaner()" id="ml" class="left"><img src="http://zornet.ru/CSS-ZORNET/Abvan/numerdigsa/moveL.png" alt="" style="cursor: pointer;"></div>
</div>

CSS

Код
/* Slider
-----------------------------------------------------------------------------*/
#kupesegudn_kapulentacma {
  background-image: linear-gradient(to right top, #00121a, #121a2d, #03151e, #4a689c, #00121a);
  background-repeat: repeat-x;
  background-position: left top;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 245px;
  width: 100%;
  margin-bottom: 3px;
}
#vadopetavka_mulsekamu_sankivab {
  display: block;
  position: relative;
  border-bottom: 1px solid #e9ecee;
  height: 0px;
  width: 100%;
  margin-bottom: 15px;
}
#kupesegudn_kapulentacma div {
  position: relative;
  white-space: nowrap;
}
#kupesegudn_kapulentacma .left, #kupesegudn_kapulentacma .right {
  position: absolute;
  display: block;
  height: 241px;
  top: 0px;
  opacity: 1.0;
  filter: alpha(opacity=100);
}
#kupesegudn_kapulentacma .left:hover, #kupesegudn_kapulentacma .right:hover {
  opacity: .9;
  filter: alpha(opacity=90);
}
#kupesegudn_kapulentacma .left img, #kupesegudn_kapulentacma .right img {
  border: none;
  margin: 0px;
  padding: 0px;
}
#kupesegudn_kapulentacma .left {
  left: -1px;
  text-align: right;
}
#kupesegudn_kapulentacma .right {
  right: -1px;
}
#kupesegudn_kapulentacma_in {
  display: block;
  position: relative;
  left: 0px;
  top: 0px;
}
#kupesegudn_kapulentacma img {
  padding: 15px 5px;
}
#kupesegudn_kapulentacma a {
  display: inline-block;
  margin: 0px 0px;
  position: relative;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 12px;
}
#kupesegudn_kapulentacma a span {
  left: 0px;
  bottom: 17px;
  color: #f3efef;
  position: absolute;
  overflow: hidden;
  white-space: normal;
  display: none;
  padding: 5px 3px;
  width: 100%;
  background: #172025;
  text-shadow: 0 1px 0 #080808;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  opacity: .9;
  filter: alpha(opacity=90);
  line-height: normal;
  -moz-box-shadow: 0px 0px 10px 0px rgba(16, 16, 16);
  -webkit-box-shadow: 0px 0px 10px 0px rgb(58, 56, 56);
  box-shadow: 0px 0px 10px 0px rgb(51, 51, 51);
  border: 2px solid #181d21;
}
#kupesegudn_kapulentacma a:hover span {
  display: block;
}

JS
Скрипт выставляем там, где выводится материал слайдов, если на всем сайте, то устанавливал вверх сайта, под код HTML, который изначально поставили.

Код
<script type="text/javascript">
var carPos = 30;
var t;
var a;
var kuda;
function MoveMePlease(kuda) {
  if (kuda == 1) {
  document.getElementById('mr');
  if (carPos >= -1330) {
  t=setTimeout("MoveMePlease(1)", 40);
  carPos=carPos-15;
  writer(carPos);
  } else { clearTimeout(t); }
  }
  else if (kuda == 0) {
  document.getElementById('ml');
  if (carPos <= -10) {
  a=setTimeout("MoveMePlease(0)", 40);
  carPos=carPos+15;
  writer(carPos);
  } else { clearTimeout(a); }
  }
}
function cleaner() { clearTimeout(a); clearTimeout(t);
  document.getElementById('mr').style.width = ''; document.getElementById('ml').style.width = '';
  }
function writer(newPos) { document.getElementById('kupesegudn_kapulentacmabox').style.left = newPos+'px'; }
</script>

По своей стилистике и форме этот слайдер отлично подойдет в кино сайта, также есть варианты его задействовать в своих профессиональных проектах. Так как по своей работе он простой, и немного переделан по дизайну, а это вместо фона было добавлен градиент.

И теперь его намного легче настроить под свой оттенок цвета, но и безусловно сделать более оригинально, где по просмотрам отлично должен помогать найти материал. Используйте это руководство просто для того, чтобы поиграть с последними функциями CSS3, которые вы сможете использовать в установке.

Спасибо пользователю First, до полной доработки.
2019-03-27 Просмотров: 304 Комментарий: (6)

Поделиться в социальных сетях

Материал разместил

Комментарий: 6
First
First 2019-03-27 18:291
0
Что-то ты тут пропустил
Kosten
Kosten 2019-03-27 18:362
0
Привет, что именно, так как изначально на тестовый сайт поставил, и уже от туда все переносил.
First
First 2019-03-27 18:393
0
Привет! Пропустил ты то, что в шаблон информера вставлять
Код
<a href="$ENTRY_URL$"> <span>$TITLE$</span> <img src="$IMG_URL1$" style="width: 152px; height: 211px" alt="$TITLE$" title="$TITLE$"> </a>
First
First 2019-03-27 18:404
0
Как информер создать ты написал, а что в него вставить забыл
Kosten
Kosten 2019-03-27 18:495
0
Спасибо, что есть замечательные люди, которые все что нужно заметят.

Исправил, в материале добавлено код под информер.
Kosten
Kosten 2019-03-27 18:526
0
Немного высота измененная, ведь как заметил, то ссылку, что отвечала за фон убрал, и поставил градиент на несколько оттенков, так, чтоб переключатели перекрыть аналогичной палитрой, а по центру \можно сделать светлее.
avatar