красивый слайдер NIVO.



Чем же этот слайдер хорош? 
9 эффектов смены изображений 
Валидный код 
Возможность задания параметров работы 
Различные способы навигации по изображениям 
Вес запакованной версии всего 7kb 
Возможность повесить на картинки ссылки 
Бесплатно 

Испытан в браузерах: 
Internet Explorer v7+ 
Firefox v3+ 
Google Chrome v4 
Safari v4 
Opera v10.5 
Как видно, этот слайдер картинок не поддерживает, в частности, IE6. 

Видео по установке: 
Использование: 
1. Для использование Nivo Slider, нам нужны подключить Nivo Slider script и Nivo Slider CSS 
на странице в самом конце перед </body> 

 

<link rel="stylesheet" href="/slider_nivo/nivo/nivo-slider.css" type="text/css" media="screen" /> 
<script src="/slider_nivo/nivo/jquery.nivo.slider.pack.js" type="text/javascript"></script> 
   <script type="text/javascript"> 
   $(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:'boxRandom,boxRain,boxRainReverse,boxRainGrow,boxRainGrowReverse', 
   pauseTime:5000, 
   pauseOnHover:false, 
   boxCols: 8, 
   boxRows: 4 
   }); 
   }, 3000); 
   }); 
   </script> 

 

2. Теперь HTML. Обратите внимание чтобы добавить подпись к изображению, нужно прописать 
простой атрибут title. Прадставлены все 4 варианта слайдера как ина демо... 

 

<h2>Установки по умолчанию</h2>      
        <div id="slider1" class="nivoSlider">      
        <img src="/images/up.jpg" alt="" />      
        <img src="/images/monstersinc.jpg" alt=""/>      
        <img src="/images/nemo.jpg" alt="" />      
        <img src="/images/walle.jpg" alt="" />      
        </div>      
<br/>      
        <h2>С подписями и Ссылки</h2>      
        <div id="slider2" class="nivoSlider">      
        <a href="/"><img src="/images/up.jpg" title="ваша подпись №1" /></a>      
        <a href="/"><img src="/images/monstersinc.jpg" title="ваша подпись" /></a>      
        <a href="/"><img src="/images/nemo.jpg" title="ваша подпись№2" /></a>      
        <a href="/"><img src="/images/walle.jpg" title="ваша подпись" /></a>      
        </div>      
<br/>      
        <h2>С эскизами</h2>      
        <div id="slider3" class="nivoSlider">      
        <img src="/images/up.jpg" alt="" />      
        <img src="/images/monstersinc.jpg" alt=""/>      
        <img src="/images/nemo.jpg" alt="" />      
        <img src="/images/walle.jpg" alt="" />      
        </div>      

        <h2>В случайном порядке</h2>      
        <div id="slider4" class="nivoSlider">      
        <img src="/images/up.jpg" alt="" />      
        <img src="/images/monstersinc.jpg" />      
        <img src="/images/nemo.jpg" alt="" />      
        <img src="/images/walle.jpg" alt="" />      
        </div>

 

по материалам http://udf.su/forum

 
Создать бесплатный сайт с uCoz