Установка:
В глобальном блоке DEMO все удаляем и ставим:
Code
<link rel="stylesheet" type="text/css" href="/css/sliderFuture.css" title="style1" media="screen" />
<div id="slideshow">
<!-- slide_img -->
<div id="slide_img" style="position: relative; overflow-x: hidden; overflow-y: hidden; ">
<!-- Image #1 -->
<div class="img" style="position: absolute; left: 0px; opacity: 1; z-index: 5; top: 234px; display: none; ">
<img src="/slider/slider.gif" width="940" height="228" alt=" ">
</div>
<!-- Image #2 -->
<div class="img" style="position: absolute; left: 0px; opacity: 1; width: 940px; height: 234px; z-index: 5; top: 234px; display: none; ">
<img src="/slider/slider2.gif" width="940" height="228" alt=" ">
</div>
<!-- Image #3 -->
<div class="img" style="position: absolute; left: 0px; opacity: 1; width: 940px; height: 234px; z-index: 5; top: 234px; display: none; ">
<img src="/slider/slider3.gif" width="940" height="228" alt=" ">
</div>
<!-- Image #4 -->
<div class="img" style="position: absolute; left: 0px; opacity: 1; width: 940px; height: 234px; z-index: 5; top: 234px; display: none; ">
<img src="/slider/slider4.gif" width="940" height="228" alt=" ">
</div>
<!-- Image #5 -->
<div class="img" style="position: absolute; z-index: 6; left: 0px; opacity: 1; width: 940px; top: 0px; height: 234px; display: block; ">
<img src="/slider/slider5.gif" width="940" height="228" alt=" ">
</div>
</div>
<!-- /slide_img -->
<!-- Названия картинок -->
<div id="slide_title" style="position: relative; overflow-x: hidden; overflow-y: hidden; ">
<div class="title" style="position: absolute; top: 0px; opacity: 1; z-index: 5; left: 613px; display: none; ">Ваш текст... Ваш текст...</div>
<div class="title" style="position: absolute; top: 0px; opacity: 1; height: 50px; width: 613px; z-index: 5; left: 613px; display: none; ">Текст...</div>
<div class="title" style="position: absolute; top: 0px; opacity: 1; height: 50px; width: 613px; z-index: 5; left: 613px; display: none; ">Ваш текст... Ваш текст...</div>
<div class="title" style="position: absolute; top: 0px; opacity: 1; height: 50px; width: 613px; z-index: 5; left: 613px; display: none; ">Текст...</div>
<div class="title" style="position: absolute; z-index: 6; top: 0px; opacity: 1; height: 50px; left: 0px; width: 613px; display: block; ">Ваш текст... Ваш текст...</div>
</div>
<!-- /Названия картинок -->
<!-- Меню слайдера -->
<div id="slide_nav">
<ul class="tab">
<li id="slide_nav_1">
<a href="#" id="goto1" class="">
<span class="dnone">1</span>
</a>
</li>
<li id="slide_nav_2">
<a href="#" id="goto2" class="">
<span class="dnone">2</span>
</a>
</li>
<li id="slide_nav_3">
<a href="#" id="goto3" class="">
<span class="dnone">3</span>
</a>
</li>
<li id="slide_nav_4">
<a href="#" id="goto4" class="">
<span class="dnone">4</span>
</a>
</li>
<li id="slide_nav_5">
<a href="#" id="goto5" class="current">
<span class="dnone">5</span>
</a>
</li>
</ul>
</div>
<!-- /Меню слайдера -->
<br class="clear">
</div>
На всех страницах сайта перед закрывающим тегом:
Ставим:
Code
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/jquery-easing-compatibility.1.2.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
Заливаем все файлы из архива в одноименные папки!