18:13
Красивый эффект при наведении на изображение навигации с помощью CSS3. Идея заключается в том, чтобы добавить в переключатель превью следующего или предыдущего изображения и добавить красивый эффект!
Установка:
1. HTML Вставляем туда, где будет слайдер:
Code
<div class="cn-nav">
<a href="#" class="cn-nav-prev">
<span>Previous</span>
<div style="background-image:url(/images/thumbs/1.jpg);"></div>
</a>
<a href="#" class="cn-nav-next">
<span>Next</span>
<div style="background-image:url(/images/thumbs/3.jpg);"></div>
</a>
</div>
2. После нужно подключить стили CSS:
Code
<link rel="stylesheet" type="text/css" href="/html/circlenaveff/style.css" />
3. Подключаем jQuery:
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="/html/circlenaveff/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="/html/circlenaveff/jquery.slideshow.js"></script>
<script type="text/javascript">
$(function() {
$('#cn-slideshow').slideshow();
});
</script>
Из прикрепленного архива заливаем все файлы в соответствующие папки css, js, images.
