» »

Слайдер изображений на CSS с переключателем

Слайдер изображений на CSS с переключателем

Отличное дополнение как элемент к дизайну, но только функционален, это слайдер изображение, что создан на стилях CSS и JS по разную тему. Сейчас трудно можно представить такие тематические площадки, как игровые или интернет магазин, где бы не присутствовал этот код слайдера. Так как он выводит ваш материал, который вы сами посчитали, какой должен быть. И это все вывести на первую страницу. Здесь по функциональности он просто, но главное корректно все работает. Есть по обеим сторонам переключатели, также продублированные в нижнем левом углу.

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

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

1. Нужно скачать архив с сайта и залит в папку в папку 'images' на файловом менеджере.
2. Копируем код и ставим там где хотите видеть.

Код
<link rel="stylesheet" href="/images/nivo-slider.css" type="text/css" media="screen" />  
<script type="text/javascript" src="/images/jquery-1.4.3.min.js"></script>  
<script type="text/javascript" src="/images/jquery.nivo.slider.js"></script>  
<script type="text/javascript">  
  $(window).load(function() {  
  $('#slider').nivoSlider();  
  });  
</script>  

<div id="wrapper">  
  <div id="slider-wrapper">  
  <div id="slider" class="nivoSlider">  
  <img src="/images/banner1.jpg" alt="" />  
  <img src="/images/banner2.jpg" alt="" />  
  <img src="/images/banner3.jpg" alt="" />  
  <img src="/images/banner4.jpg" alt="" />  
  </div>  
  </div>  
</div>

В таблицу стилей CSS:

Код
#slider {  
  position:relative;  
  width:640px;  
  height:200px;  
  margin-top:6px;  
  margin-left:5px;  
  margin-bottom:10px;  
  background:url('/images/load_blue2.gif') no-repeat 50% 50%;  
}  
#slider img {  
  position:absolute;  
  top:0px;  
  left:0px;  
  display:none;  
}  
#slider a {  
  border:0;  
  display:block;  
}  

.nivo-controlNav {  
  position:absolute;  
  left:20px;  
  bottom:10px;  
}  
.nivo-controlNav a {  
  display:block;  
  width:22px;  
  height:22px;  
  background:url('/images/bullets.png') no-repeat;  
  text-indent:-9999px;  
  border:0;  
  margin-right:3px;  
  float:left;  
}  
.nivo-controlNav a.active {  
  background-position:0 -22px;  
}  

.nivo-directionNav a {  
  display:block;  
  width:30px;  
  height:30px;  
  background:url('/images/arrows.png') no-repeat;  
  text-indent:-9999px;  
  border:0;  
}  
a.nivo-nextNav {  
  background-position:-30px 0;  
  right:15px;  
}  
a.nivo-prevNav {  
  left:15px;  
}  

.nivo-caption {  
  text-shadow:none;  
  font-family: Helvetica, Arial, sans-serif;  
}  
.nivo-caption a {  
  color:#efe9d1;  
  text-decoration:underline;  
}

Но и под каждым запросом идет ссылка на тот материал, что представлен, где по клику происходит переход на основу материала.
2017-12-21 Загрузок: 8 Просмотров: 923 Комментарий: (6)

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

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

Комментарий: 6
avatar
KhakimJON 2017-12-26 08:181
0
Оно адаптивно? Или как то можно сделать? 07a
Kosten
Kosten 2017-12-26 16:164
0
Нет, он не адаптивный идет, это старая, но рабочая версия.
waak
waak 2017-12-26 09:312
0
Какой толк от слайдера если в нём нет ссылок? или текста!
такой слайдер просто лишний на сайте!

так же для удобство можно было информер подключить что бы материалы в слайдере сами менялись а не вручную
Kosten
Kosten 2017-12-26 16:153
0
Но почему то такие виды ставят, много где видел, не точно такой, но по типу.
Imapo
Imapo 2018-02-20 08:385
0
Ох уж этот машинный перевод описания к слайдеру 11a
Kosten
Kosten 2018-02-20 13:036
0
Да, нет, сам писал, возможно как машина строчил.)
avatar