Слайдер изображений через плагин AviaSlider на jQuery
Очередной замечательный слайдер для вашего сайта. Помимо потрясающего эффекта при смене слайдов, вашему вниманию представится не менее изящное увеличение изображений через плагин prettyPhoto
Для начала посмотрите ДЕМО
Установка:
1#: После /head на нужных страницах вставляйте:
1 2 3 4 5 |
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/css/prettyPhoto.css" type="text/css" media="screen" /> <script src="/js/jquery.prettyPhoto.js" type="text/javascript"></script> <script type='text/javascript' src='/js/jquery.aviaSlider.min.js'></script> <script type='text/javascript' src='/js/custom.min.js'></script> |
2#: Следующий код в то место, где будет сам слайдер:
1 2 3 4 5 6 |
<ul class='aviaslider' id="frontpage-slider"> <li><a href="Ссылка на большое изображение" title=""><img src="Ссылка на изображение 640*320" alt="Описание к изображению" /></a></li> <li><a href="Ссылка на большое изображение" title=""><img src="Ссылка на изображение 640*320" alt="Описание к изображению" /></a></li> <li><a href="Ссылка на большое изображение" title=""><img src="Ссылка на изображение 640*320" alt="Описание к изображению" /></a></li> <li><a href="Ссылка на большое изображение" title=""><img src="Ссылка на изображение 640*320" alt="Описание к изображению" /></a></li> </ul> |
Осталось лишь залить три JS файла из прикреплённого архива в папку js, два CSS файла в папку css и все картинки в папку images