ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Слайдер картинок на jQuery для сайта uCoz

Слайдер картинок на jQuery для сайта uCoz

Слайдер картинок на jQuery для сайта uCoz
Это слайдер где присутствуют для него стандартные опция для его работы. А точнее он будет показывать картинки и есть ручной переключатель. Сам он идет в светлом дизайн и по сторонам у него будут тени. Большой плюс для него, что он весит очень мало, а это меньше 2kB, что отлично и корректно идет отображение на всех продвинутых и популярных браузеров. Сама смена картинок или изображение будет на нем происходить очень плавно, что не характерно для остальных.

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

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

Идем в низ сайта и там нам нужно подключить библиотеку jQuery и сохраняем.

Код
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  
  <script src="http://zornet.ru/Aben/Abryn/craftyslide.min.js"></script>  
   
  <script>  
  $("#slideshow").craftyslide();  
  </script>


Второе, это нужно прописать стили CSS на него.

Код
/*  

Craftyslide CSS Styles  

*/  

#slideshow {  
  margin:0;  
  padding:0;  
  position:relative;  
  border:15px solid #fff;  
  -webkit-box-shadow:0 3px 5px #999;  
  -moz-box-shadow:0 3px 5px #999;  
  box-shadow:0 3px 5px #999;  
}  

#slideshow ul {  
  position:relative;  
  overflow:hidden;  
  margin:0;  
  padding:0;  
}  

#slideshow ul li {  
  position:absolute;  
  top:0;  
  left:0;  
  margin:0;  
  padding:0;  
  list-style:none;  
}  

#pagination {  
  clear:both;  
  width:75px;  
  margin:25px auto 0;  
  padding:0;  
}  

#pagination li {  
  list-style:none;  
  float:left;  
  margin:0 2px;  
}  

#pagination li a {  
  display:block;  
  width:10px;  
  height:10px;  
  text-indent:-10000px;  
  background:url(http://zornet.ru/Aben/Abryn/pagination.png);  
}  

#pagination li a.active {  
  background-position:0 10px;  
}  

.caption {  
  width:100%;  
  margin:0;  
  padding:10px;  
  position:absolute;  
  left:0;  
  font-family:Helvetica, Arial, sans-serif;  
  font-size:14px;  
  font-weight:lighter;  
  color:#fff;  
  border-top:1px solid #000;  
  background:rgba(0,0,0,0.6);  
}


Осталось прописать в теле сайта поставить основной код, который и будет выводить все, тамже все редактируется.

Код
<div id="slideshow">  
  <ul>  
  <li>  
  <img src="http://zornet.ru/Aben/Abryn/zornet.jpg" alt="" title="Пишем здесь кратко об изображение" />  
  </li>  
   
  <li>  
  <img src="http://zornet.ru/Aben/Abryn/gdesaun.jpg" alt="" title="Пишем здесь кратко об изображение" />  
  </li>  
   
  <li>  
  <img src="http://zornet.ru/Aben/Abryn/zornet.jpg" alt="" title="Пишем здесь кратко об изображение" />  
  </li>  
   
  <li>  
  <img src="http://zornet.ru/Aben/Abryn/gdesaun.jpg" alt="" title="Пишем здесь кратко об изображение" />  
  </li>  
   
  <li>  
  <img src="http://zornet.ru/Aben/Abryn/zornet.jpg" alt="" title="Пишем здесь кратко об изображение" />  
  </li>  
  </ul>  
  </div>


PS - не нужно забывать, что ставим только что то востребованное, что ищет пользователь или гости. Также здесь его устанавливают на главной, так как уже сказано, по весу он позволяет. Но и на белый фон лучше, что визуально красиво смотрелось, говоря о тенях, что с ним идет.
2016-12-16 Просмотров: 1657 Комментарий: (5)

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

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

Оставь свой отзыв

Комментарий: 5
Kolinkor
Kolinkor 2016-12-16 03:151
0
Больше нравится, когда переключатели по сторонам стоят на изображение, пусть даже не прозрачные, просто красивей смотрится.
FeStemBer
FeStemBer 2016-12-16 03:212
0
Здесь на любителя, потому есть выбор, но не нужно забывать, чтоб они под мобильные устройства подходили, много где слайдеры стоят, но мало видел, которые настроены.
Tergran
Tergran 2016-12-16 03:533
0
Здесь же нет авто, чтоб через какое то время автоматически менялись?
Kosten
Kosten 2016-12-16 04:014
0
Здесь как раз нет, все в ручном режиме переключать нужно.
Kosten
Kosten 2016-12-16 04:025
0
Возможно с одной стороны хорошо, просто кого то напрягает, когда все мелькает, а тут если нужно, то переключит.
avatar