» »

Стильный слайдер сайта на JS и CSS

Стильный слайдер сайта на JS и CSS

Очередной стильный по дизайн слайдер, который создан на JS и CSS стилях. Который будет переключать элементы изображение по любой теме. Он работает как в автоматическом режиме, где показывает тематическую картинку и при клике на ее вы переходите на основной материал, который был как раз представлен на изображение.

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

Установка:

Для начало скачать архив и там будет папка 'images' и ее закидываем файловый менеджер.

Копируем код и ставим его на место, где вы посчитали нужным.

Код
<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="http://zornet.ru/Aben/Gsa/zornet/banner1.jpg" alt="" />  
  <img src="/images/banner2.jpg" alt="" />  
  <img src="/images/banner3.jpg" alt="" />  
  <img src="http://zornet.ru/Aben/Gsa/zornet/banner3.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;  
}


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

Источник: www.csomsk.ru
2016-12-23 Загрузок: 8 Просмотров: 1090 Комментарий: (4)

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

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

Комментарий: 4
Kolinkor
Kolinkor 2016-12-23 21:531
0
Один из многих, который по своей установке простой и смотрится не хуже других.
Kosten
Kosten 2016-12-23 23:174
0
Да они все ставятся почти одинаково, только можно ссылки сразу прописать а не закидывать в корень сайта.
ZruBkul
ZruBkul 2016-12-23 22:002
0
Можно на кино сайт поставить, но больше файлов в код написать, и также самые просматривающие или новые фильмы выводить.
Kosten
Kosten 2016-12-23 22:083
0
Сейчас если судит по кино сайту, то прессуют его вообще, даже заливать фильмы не стал, так как приходят одни жалобы от правообладателей, но согласен, что подойдет.

Но видать он был сделан для игровой тематике, но фильмы тема далеко от этой темы не отошла.
avatar