Подборка адаптивных слайдеров на CSS и jQuery
 | |
| Все больше на современных сайтах можно заметить красивые слайдеры, плюс они адаптивные, что здесь представлено четыре варианта дизайн. Невозможно представить официальные площадки или интернет магазин, где бы не применялась эта функция, так как она идет как афиша. А если слайдер по своей стилистике отлично сделан, где кроме самого изображение несет некую информацию, что прикреплена к нему, то безусловно отличное решение для любой площадки. А когда в самом каркасе находятся множество функций, где можно в ручную перематывать или поставить на автоматический режим, то веб мастер сам уже настраивает под свою тематику. Также еще называют карусель слайдеры, что одно и тоже, где на портале они несут свою некую изюминку, а когда присутствуют эффекты, что созданы HTML5 и CSS3, то совершенно другой полет. И здесь вы можете выбрать их четырех представленных, которые несут общею функцию, но по стилистике и функциональности смотрятся по-разному. Установка: Нужно скачать архив и залить файловый менеджер: После /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="http://zornet.ru/_ld/2/s53236670.jpg" alt="Иконки к форуму SDAR сайта ucoz" /> <img src="http://zornet.ru/_ld/2/s09661854.jpg" alt="Иконки форума для сайта ucoz - zr" /> <img src="Ссылка на картинку" alt="Описание" /> <img src="Ссылка на картинку" alt="Описание" /> </div> 2. Для слайдера во втором примере: Код <div style="width:550;height:220;" id="slider2" class="nivoSlider"> <img src="http://zornet.ru/_ld/46/s68398236.jpg" alt="Шаблон для сайта ucoz тема PS" /> <img src="http://zornet.ru/_ld/46/s36604227.jpg" alt="Шаблон ucoz на тему Counter-Strike" /> <img src="Ссылка на картинку" alt="Описание" /> <img src="Ссылка на картинку" alt="Описание" /> </div> 3. Для слайдера в третьем примере: Код <div style="width:550;height:220;" id="slider3" class="nivoSlider"> <img src="http://zornet.ru/_ld/77/s38790942.jpg" alt="Авто плюс в репутацию за добавленный файл" /> <img src="http://zornet.ru/_ld/59/s11024124.jpg" alt="Лайки сайта материалов PNP для uCoz" /> <img src="Ссылка на картинку" alt="Описание" /> <img src="Ссылка на картинку" alt="Описание" /> </div> 4. Для слайдера в четвёртом примере: Код <div style="width:550;height:220;" id="slider2" class="nivoSlider"> <img src="http://zornet.ru/_ld/56/s14241014.jpg" alt="Актуально прогонять сайт по каталогам" /> <img src="http://zornet.ru/_ld/56/s84725739.jpg" alt="Поставить свои смайлы на сайте ucoz" /> <img src="Ссылка на картинку" alt="Описание" /> <img src="Ссылка на картинку" alt="Описание" /> </div> Не забываем скачать архив и там будут 3 папки, это js два стиля в CSS и изображение папку images, после происходит установка кода. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
