» »

Адаптивный слайдер для сайта на CSS + jQuery

Адаптивный слайдер для сайта на CSS + jQuery

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

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

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

Так выглядит при работе, что проверено на работоспособность функций.

Красивый слайдер на CSS для сайта

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

HTML

Код
<div class="sponsive-kavigation">
  <div class="signingespon">
  <div class="img-daviga">
  <img src="Ссылка на изображение под номером №1" alt="ZorNet - портал для вебмастера">
  <div class="sponsivem">
  <div>
  <h3>Полно размерный слайдер с слоями</h3>
  <h5>Вы можете легко добавлять изображения, html-форматированные тексты и видео слои поверх каждого слайда, и каждый слой принимает уникальную анимацию.</h5>
  </div>
  </div>
  </div>
  </div>

  <div class="signingespon">
  <div class="img-daviga">
  <img src="Ссылка на изображение под номером №2" alt="ZorNet.ru - сайт вебмастера">
  <div class="sponsivem">
  <div>
  <h3>Полностью отзывчивые весы с контейнером</h3>
  <h5>Все эти отзывчивые навигационные фрагменты могут редактировать и клонировать для ваших собственных проектов. Они также имеют множество стилей.</h5>
  </div>
  </div>
  </div>
  </div>

  <div class="signingespon">
  <div class="img-daviga">
  <img src="Ссылка на изображение под номером №3" alt="ZorNet - скрипты и шаблонв">
  <div class="sponsivem">
  <div>
  <h3>Удивительные переходы с CSS3</h3>
  <h5>Одной из самых сложных частей хорошего отзывчивого сайта является навигация. Это может занять некоторое время, чтобы понять, и есть много учебников, чтобы помочь с этим.</h5>
  </div>
  </div>
  </div>
  </div>

  <div class="signingespon">
  <div class="img-daviga">
  <img src="Ссылка на изображение под номером №4" alt="ZorNet.Ru - все для создание интернет ресурса">
  <div class="sponsivem">
  <div>
  <h3>Отдельные настройки на точку останова</h3>
  <h5>Проектирование гибкой компоновки не должно быть затруднительным. Особенно, если вы изначально каркас планируете заранее и точно определяете, что вы создаете.</h5>
  </div>
  </div>
  </div>
  </div>
</div>

CSS

Код
/* ==== Main CSS === */
.img-daviga{
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center
}

.img-daviga img {
  min-height: 100%;
  min-width: 100%;
  position: relative;
  display: inline-block;
  max-width: none;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
}

.Grid1k {
  padding: 0 15px;
  max-width: 1200px;
  margin: auto;
}

.blocks-box,
.slick-slider {
  margin: 0;
  padding: 0!important;
}

.slick-slide {
  float: left;
  padding: 0;
}

/* ==== Slider Style === */
.sponsive-kavigation .signingespon .img-daviga{
  height:100vh;
  background:#000;
}

.sponsive-kavigation .signingespon .img-daviga .sponsivem {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(25, 23, 23, 0.34);
  line-height: 95vh;
  text-align: center;
}

.sponsive-kavigation .signingespon .img-daviga img {
  -webkit-filter: blur(5px);
  filter: blur(0px);
}

.sponsive-kavigation .signingespon .sponsivem > div{
  display:inline-block!important;
  vertical-align:middle;
}

.sponsive-kavigation .NextArrow{
  position:absolute;
  top:50%;
  right:0px;
  width:45px;
  height:45px;
  background:rgba(0,0,0,.50);
  border:0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#FFF;
  z-index:5;
}

.sponsive-kavigation .NextArrow:before{content:'\f105';}

.sponsive-kavigation .PrevArrow{
  position:absolute;
  top:50%;
  left:0px;
  width:45px;
  height:45px;
  background:rgba(0,0,0,.50);
  border:0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#FFF;
  z-index:5;
}

.sponsive-kavigation .PrevArrow:before{content:'\f104';}

.sponsive-kavigation .slick-dots{
  position:absolute;
  height:5px;
  background:rgba(255,255,255,.20);
  bottom:0px;
  width:100%;
  left:0px;
  padding:0px;
  margin:0px;
  list-style-type:none;
}
.sponsive-kavigation .slick-dots li button{display:none;}
.sponsive-kavigation .slick-dots li{
  float:left;
  width:0px;
  height:5px;
  background:#d62828;
  position:absolute;
  left:0px;
  bottom:0px;
}

.sponsive-kavigation .slick-dots li.slick-active{
  width:100%;
  animation:ProgressDots 11s both;
}

.sponsive-kavigation .signingespon h3{
  font:30px/50px RalewayB;
  text-transform:uppercase;
  color:#FFF;
  animation:fadeOutRight 1s both;
  margin:0;
  padding:0;
}

.sponsive-kavigation .signingespon h5{
  margin:0;
  padding:0;
  font:15px/30px RalewayR;
  color:#FFF;
  max-width:600px;
  overflow:hidden;
  height:60px;
  animation:fadeOutLeft 1s both;
}

.sponsive-kavigation .signingespon.slick-active h3{
  animation:fadeInDown 1s both 1s;
}

.sponsive-kavigation .signingespon.slick-active h5{
  animation:fadeInLeft 1s both 1.5s;
}

.sponsive-kavigation .signingespon.slick-active{
  animation:Slick-FastSwipeIn 1s both;
}

.sponsive-kavigation {background:#000;}

/* ==== Slider Image Transition === */
@keyframes Slick-FastSwipeIn{
  0%{transform:rotate3d(0,1,0,150deg) scale(0) perspective(400px);}  
  100%{transform:rotate3d(0,1,0,0deg) scale(1) perspective(400px);}  
}

@-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes ProgressDots{from{width:0px;}to{width:100%;}}

/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}

JS

Код
$(document).ready(function(){
   
  $(".sponsive-kavigation").slick({
  autoplay:true,
  autoplaySpeed:10000,
  speed:600,
  slidesToShow:1,
  slidesToScroll:1,
  pauseOnHover:false,
  dots:true,
  pauseOnDotsHover:true,
  cssEase:'linear',
  draggable:false,
  prevArrow:'<button class="PrevArrow"></button>',
  nextArrow:'<button class="NextArrow"></button>',  
  });
   
})

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

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

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

Которое как уже сказано, будут размещаться в текстовом содержании и безусловно в отображение изображения, что находится за текстом.

Демонстрация
2018-10-14 Просмотров: 250 Комментарий: (2)

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

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

Комментарий: 2
avatar
Qwazor 2018-10-14 21:561
0
адаптивны только буквы, изображение не адаптивно
Kosten
Kosten 2018-10-14 23:212
0
Здесь с вами согласен, что изображение не адаптивно, но также кнопки корректно выводит.
avatar