ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Адаптивный дизайн слайдера для uCoz

Адаптивный дизайн слайдера для 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, до полной доработки.
27 Марта 2019 Просмотров: 1545 Комментариев: (8)

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

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

Оставь свой отзыв

Комментарии: 8
First
First 27 Марта 2019 18:291
0
Что-то ты тут пропустил
Kosten
Kosten 27 Марта 2019 18:362
0
Привет, что именно, так как изначально на тестовый сайт поставил, и уже от туда все переносил.
First
First 27 Марта 2019 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 27 Марта 2019 18:404
0
Как информер создать ты написал, а что в него вставить забыл
Kosten
Kosten 27 Марта 2019 18:495
0
Спасибо, что есть замечательные люди, которые все что нужно заметят.

Исправил, в материале добавлено код под информер.
Kosten
Kosten 27 Марта 2019 18:526
0
Немного высота измененная, ведь как заметил, то ссылку, что отвечала за фон убрал, и поставил градиент на несколько оттенков, так, чтоб переключатели перекрыть аналогичной палитрой, а по центру \можно сделать светлее.
buldozer9444
buldozer9444 06 Мая 2019 22:447
0
Скажите пожалуйста как сделать что бы слайдер на автомате работал и по кругу?
Kosten
Kosten 06 Мая 2019 23:078
0
Здесь карусель по умолчанию не шла, только меняется с перегрузкой страницы. А сделать, только заказать, хотя не когда не замечал, чтоб горизонтальное меню было на карусели.

Пользователь First дорабатывал этот слайд, свяжитесь с ним и переговорите, возможно он в курсе как запустить каруселью.
avatar