Главная » Файлы » Прочие скрипты » jQuery
Отличный слайдер картинок с замечательными эффектами перехода на css3 и jQuery
23.06.14, 11:29:58

Скачать файл



Замечательный слайдер с кучей всевозможных красивых переходов украсит любой уголок вашего сайта

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

Установка:

После /head на нужных страницах вставляйте:
Код
<link rel="stylesheet" href="/css/nivo-slider.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
  <script src="/js/cufon-yui.js" type="text/javascript"></script>
  <script src="/js/Museo_Slab.font.js" type="text/javascript"></script>
  <script src="/js/jquery.nivo.slider.pack.js" type="text/javascript"></script>

  <script type="text/javascript">
  Cufon.replace('h2', { fontFamily:'Museo Slab' });  
  Cufon.replace('h3', { fontFamily:'Museo Slab' });  

  $(window).load(function() {  
$('#slider1').nivoSlider({ pauseTime:5000, pauseOnHover:false });  
setTimeout(function(){  
$('#slider2').nivoSlider({ pauseTime:5000, pauseOnHover:false });  
}, 1000);  
setTimeout(function(){  
$('#slider3').nivoSlider({  
pauseTime:5000,  
pauseOnHover:false,  
controlNavThumbs:true  
});  
}, 2000);  
setTimeout(function(){  
$('#slider4').nivoSlider({  
effect:'random',  
animSpeed:1500,  
pauseTime:5000,  
startSlide:2,  
directionNav:false,  
controlNav:true,  
keyboardNav:false,  
pauseOnHover:false  
});  
}, 3000);  
  });  
  </script>


Следующий код в то место, где будет сам слайдер:

1) Для слайдера в первом примере:
Код
<div style="width:550;height:220;" id="slider1" class="nivoSlider">
  <img src="Ссылка на картинку" alt="Описание" />  
  <img src="Ссылка на картинку" alt="Описание" />  
  <img src="Ссылка на картинку" alt="Описание" />  
  <img src="Ссылка на картинку" alt="Описание" />  
  </div>


2) Для слайдера во втором примере:
Код
<div style="width:550;height:220;" id="slider2" class="nivoSlider">
  <img src="Ссылка на картинку" alt="Описание" />  
  <img src="Ссылка на картинку" alt="Описание" />  
  <img src="Ссылка на картинку" alt="Описание" />  
  <img src="Ссылка на картинку" alt="Описание" />  
  </div>


3) Для слайдера в третьем примере:
Код
<div style="width:550;height:220;" id="slider3" class="nivoSlider">
  <img src="Ссылка на картинку" alt="Описание" />  
  <img src="Ссылка на картинку" alt="Описание" />  
  <img src="Ссылка на картинку" alt="Описание" />  
  <img src="Ссылка на картинку" alt="Описание" />  
  </div>


4) Для слайдера в четвёртом примере:
Код
<div style="width:550;height:220;" id="slider2" class="nivoSlider">
  <img src="Ссылка на картинку" alt="Описание" />  
  <img src="Ссылка на картинку" alt="Описание" />  
  <img src="Ссылка на картинку" alt="Описание" />  
  <img src="Ссылка на картинку" alt="Описание" />  
  </div>


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

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: картинок, Отличный, на, JQuery, эффектами, CSS3, перехода, слайдер, замечательными
Просмотров: 444 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: