Главная » Файлы » Прочие скрипты » jQuery

Интересный слайдер изображений через плагин Slider 1.0 на jQuery для uCoz
23.06.14, 14:15:21

Скачать файл




Неплохой слайдер изображений. Лёгкий интерфейс и простота и гибкость установки - отличительные особенности данного плагина

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<style type="text/css">
  .container1 {  
border: 10px solid #666;  
-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
margin: auto;  
  }  
  .bullet {  
margin: 20px auto 20px;  
  }  
  .bullet-blur {  
background: url(/images/bullet1.gif) center no-repeat;  
float: left;  
height: 10px;  
margin-right: 10px;  
width: 10px;  
  }  
  .bullet-focus {  
background: url(/images/bullet2.gif) center no-repeat;  
float: left;  
height: 10px;  
margin-right: 10px;  
width: 10px;  
  }  
  .btn {  
text-align: center;  
  }  
  .donate {  
position: absolute;  
left: 10px;  
top: 10px;  
  }  
  </style>

  <script type="text/javascript" src="/js/easing.js"></script>
  <script type="text/javascript" src="/js/plugin.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){  
$.easing.def = 'easeInOutExpo';  

$('.container1').slide({  
btnleft:'.btnl',  
btnright:'.btnr',  
bullet:true,  
bulletdisplay:'.bullet',  
bulletclassblur:'bullet-blur',  
bulletclassfocus:'bullet-focus',  
bulletmargin:'20',  
delay:'0.4',  
displayheight:'333px',  
displaywidth:'500px',  
innercontainer:'.inner',  
innerwidth:'2500px',  
startpage:'1',  
stepwidth:'500px'  
});  
  });  
  </script>


Следующий код в то место, где будет сам слайдер:
Код
<div class="container1">
<div class="inner">  
  <img src="Ссылка на картинку" border="0">  
  <img src="Ссылка на картинку" border="0">  
  <img src="Ссылка на картинку" border="0">  
  <img src="Ссылка на картинку" border="0">  
  <img src="Ссылка на картинку" border="0">  
  </div>
  </div>

  <div class="bullet"></div>
  <div class="btn">
<button class="btnl">Вперёд</button>
<button class="btnr">Назад</button>
  </div>


Все картинки в слайдере должны быть размером 500*333 пикселей

Осталось лишь залить два скрипта из прикреплённого архива в папку js и две картинки в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: изображений, Через, интересный, на, плагин, JQuery, Slider, 1.0, для, слайдер
Просмотров: 201 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: