» »

Адаптивный слайдер изображений на CSS3

Адаптивный слайдер изображений на CSS3

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

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

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

Так реально выглядит после установки на портал:

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

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

HTML

Код
<div id="container">  
  <div id="next" alt="Next" title="Next">
  <div class="guctedexab-lenduseas"></div>
  </div>
  <div id="prev" alt="Prev" title="Prev">  
  <div class="kicemogsa-mudsalend"></div>
  </div>  
  <div id="nagdesanykav">
  <div class="kavsgucted">
  <div class="gesdesig-ngaeaturing">
  <h2>Первый заголовок</h2>
  <p>Здесь идет описание к изображению или материал под номером №1</p>
  </div>
  <div class="img1"><img src="http://zornet.ru/_fr/56/0832989.jpg"></div>
  </div>
   
  <div class="kavsgucted">
  <div class="gesdesig-ngaeaturing">
  <h2>Второй заголовок</h2>
  <p>Здесь идет описание к изображению или материал под номером №2</p>
  </div>
  <div class="img2"><img src="http://zornet.ru/_fr/56/8098683.jpg"></div>
  </div>
   
  <div class="kavsgucted">
  <div class="gesdesig-ngaeaturing">
  <h2>Третий заголовок</h2>
  <p>Здесь идет описание к изображению или материал под номером №3</p>
  </div>
  <div class="img3"><img src="http://zornet.ru/_fr/56/9482363.jpg"></div>
  </div>
   
  <div class="kavsgucted">
  <div class="gesdesig-ngaeaturing">
  <h2>Четверочный заголовок</h2>
  <p>Здесь идет описание к изображению или материал под номером №4</p>
  </div>
  <div class="img4"><img src="http://zornet.ru/_fr/56/3317342.jpg"></div>
  </div>
   
  <div class="kavsgucted">
  <div class="gesdesig-ngaeaturing">
  <h2>Пятое название</h2>
  <p>Здесь идет описание к изображению или материал под номером №5</p>
  </div>
  <div class="img5"><img src="http://zornet.ru/_fr/56/4710014.jpg"></div>
  </div>
  </div>
  </div>

CSS

Код
h1{
  text-align:center;
  margin-bottom:20px;
}

#container{
  width:80%;
  margin:40px auto;
}

p{
  margin:0;
  padding:0 35px 0 0;
}

#nagdesanykav{
  width:100%;
  height:350px;
  position:relative;
  overflow:hidden;
  float:left;
  padding:0;
  border:#666 solid 2px;
  border-radius:5px;
}

#nagdesanykav img{
width: 100%;
  height:350px;
}

.img1, .img2, .img3, .img4, .img5 {
  width:100%;
  margin:0;
  padding:0;
}  

.kavsgucted{
  position:absolute;
  width:100%;
  height:100%;
}
.kavsgucted:nth-child(1){
  background:#ce6868;
}

.kavsgucted:nth-child(2){
  background:#9ab6b6;
}

.kavsgucted:nth-child(3){
  background:#98cc98;
}

.kavsgucted:nth-child(4){
  background:#e7b892;
}

.kavsgucted:nth-child(5){
  background:#c4ad43;
}

.gesdesig-ngaeaturing{
  position:absolute;
  bottom:0;
  left:0;
  padding:10px 20px 20px 20px;
  background:7f7f7f;
  background: rgba(0,0,0,0.5);
  width:100%;
  max-height:32%;
}

#prev, #next{
  cursor:pointer;
  z-index:100;
  background:#666;
  height:50px;
  width:50px;
  display:inline-block;
  position:relative;
  top:197px;
  margin:0;
  padding:0;
  opacity:0.7;
  filter: alpha(opacity=70);
}

#next{
  float:right;
  right:-2px;
}

#prev{
  float:left;
  left:0;
}

.guctedexab-lenduseas {
  width: 0;  
  height: 0;  
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;  
  border-left: 15px solid #fff;
  position:relative;
  top:20%;
  right:-40%;
}

.kicemogsa-mudsalend {
  width: 0;  
  height: 0;  
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;  
  border-right:15px solid #fff;  
  position:relative;
  top:20%;
  left:30%;
}

JS

Код
$(document).ready(function(){
  var speed = 500;  
  var autoswitch = true;  
  var autoswitch_speed = 5000;  
  $(".kavsgucted").first().addClass("desanysaeges");
   
  $(".kavsgucted").hide;
   
  $(".desanysaeges").show();
   
  $('#next').on('click', nextkavsgucted);  
  $('#prev').on('click', prevkavsgucted);

  if(autoswitch == true){
  setInterval(nextkavsgucted,autoswitch_speed)
  }
   
  function nextkavsgucted(){
  $('.desanysaeges').removeClass('desanysaeges').addClass('olddesanysaeges');
  if($('.olddesanysaeges').is(':last-child')){
  $('.kavsgucted').first().addClass('desanysaeges');
  } else {
  $('.olddesanysaeges').next().addClass('desanysaeges');
  }
  $('.olddesanysaeges').removeClass('olddesanysaeges');
  $('.kavsgucted').fadeOut(speed);
  $('.desanysaeges').fadeIn(speed);
  }
   
  // Switch to prev kavsgucted
  function prevkavsgucted(){
  $('.desanysaeges').removeClass('desanysaeges').addClass('olddesanysaeges');
  if($('.olddesanysaeges').is(':first-child')){
  $('.kavsgucted').last().addClass('desanysaeges');
  } else {
  $('.olddesanysaeges').prev().addClass('desanysaeges');
  }
  $('.olddesanysaeges').removeClass('olddesanysaeges');
  $('.kavsgucted').fadeOut(speed);
  $('.desanysaeges').fadeIn(speed);
  }
});

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

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

Демонстрация
2019-02-16 Загрузок: 1 Просмотров: 378 Комментарий: (0)

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

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

Комментарий: 0
avatar