» »

Слайдер изображений на 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;  
}

Но и под каждым запросом идет ссылка на тот материал, что представлен, где по клику происходит переход на основу материала.
21.12.2017 Загрузок: 5 Просмотров: 461 Комментарий: (4)

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

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

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

так же для удобство можно было информер подключить что бы материалы в слайдере сами менялись а не вручную
Kosten
Kosten 26.12.2017 16:153
0
Но почему то такие виды ставят, много где видел, не точно такой, но по типу.
avatar