Плавающий jQuery слайдер

Великолепный jQuery слайдер с плавным увеличением и уменьшением изображения

Отличный слайдер для сайта с автоматической прокруткой изображений и потрясным эффектом плавующий картинки. Изображения в слайдере двигаются снизу вверх, увеличиваются и уменьшаются. Все эффекты анимации идут в произвольном порядке. Я нашел этот слайдер на одном из шаблоне сайта, решил вытащить от туда (кстати вытащить у меня почему то не получилось)))), нарыл документацию по этой версии слайдера и вот готовый и свежий архив лежит перед вами.

Я разложил все по папочкам, убрал ненужный код, ссылки и так далее. Имея столь богатый функционал и несколько анимационных jQuery фишек, при всем при этом слайдер замечательно отображается во всех современных браузерах. управлять слайдером можно с помощью файла demo (советую его вынести в html файл):

$(document).ready(function(){
		$('.slider')._TMS({
			show:0,
			pauseOnHover:false,
			prevBu:'.prev',
			nextBu:'.next',
			playBu:'.play',
			duration:10000,
			preset:'zoomer',
			pagination:true,//'.pagination',true,''
			pagNums:false,
			slideshow:7000,
			numStatus:true,
			banners:'fromRight',// fromLeft, fromRight, fromTop, fromBottom
			waitBannerAnimation:false,
			progressBar:''
		})		
 })

Очень крутой слайдер! Советую всем посмотреть "Демо", чтобы ознакомиться с ним. Он украсит любой сайт, любое портфолио, его можно поставить на главную страницу в качестве превью услуг или самых главных товаров. Слайдер прокручивает любой контент, а превью к тексту очень эффектно выезжает с боку (кстати есть 4 режима выезда этой текстовой панели. Также есть стрелочки для навигации по слайдеру, буллиты и табло с инфомрацией какой по счету сейчас показывается слайд. Не забываем кликать по яндекс-рекламке)) Всего хорошего!

Установка этого слайдера на сайт:

1. Качаем архив

2. Распаковываем его в корень вашего сайта через FTP менеджер

3. На странице вызова этого слайдера между тегами <head> и </head> прописываем следующий код:

<link rel="stylesheet" href="css/demo.css" type="text/css" media="all">
  <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/tms-0.4.1.js"></script>
  <!-- demo -->
  <script type="text/javascript" src="js/demo.js"></script>
  <!-- end demo -->
    <script src="js/highlight.js"></script>
  <script src="js/html5.js"></script>
  <script src="js/html-xml.js"></script>
  <script src="js/css.js"></script>
  <script src="js/javascript.js"></script>
    <script>
    hljs.tabReplace = '    ';
    hljs.initHighlightingOnLoad();
  </script>
    <!--[if lt IE 7]>  	<link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="screen">
      <![endif]-->  <!--[if lt IE 9]>  	<script type="text/javascript" src="js/html5.js"></script>	<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
      <![endif]-->

4. В тело сайта (там где мы хотим видеть слайдер) записываем следующий html код:

	<div id="main">
						<div id="slide">
			  								<!-- slider -->
							<div class="slider">
								<ul class="items">
									<li><img src="images/slide-3.jpg" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
									<li><img src="images/slide-4.jpg" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras</span></div></li>
									<li><img src="images/slide-1.jpg" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
									<li><img src="images/slide-2.jpg" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
									<li><img src="images/slide-5.jpg" alt="" /><div class="banner"><span>Nearuasi architecto beatae faserse vitaerspiciat kerusler miase lerosnr lertyseras.</span></div></li>
									<li><img src="images/slide-6.jpg" alt="" /><div class="banner"><span>Woluptatem accusantium dolor massa astumosto Unde omnis iste natus errsit rem aper</span></div></li>
									<li><img src="images/slide-7.jpg" alt="" /><div class="banner"><span>Unde omnis iste natus errsit rem aperiam, eaque ipsa quae. Woluptatem accusantium </span></div></li>
								</ul>
							</div>
								<a href="#" class="prev">&lt;</a>
 <a href="#" class="play"><em>stop</em><span>play</span></a>
 <a href="#" class="next">&gt;</a>
							<!-- slider end -->
							</div>
	</div>

Слайдер готов!

Похожие статьи