» »

Слайдер картинок на 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 - не нужно забывать, что ставим только что то востребованное, что ищет пользователь или гости. Также здесь его устанавливают на главной, так как уже сказано, по весу он позволяет. Но и на белый фон лучше, что визуально красиво смотрелось, говоря о тенях, что с ним идет.
16.12.2016 Просмотров: 803 Комментарий: (5)

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

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

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