Установка:
После </head> на нужных страницах вставляйте:
Code
<script src="/js/slides.min.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: '/images/loading.gif',
generatePagination: true,
play: 5000,
pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
</script>
<link rel="stylesheet" href="/css/global.css">
Следующий код в то место, где будет сам слайдер:
Code
<center>
<div id="example">
<div id="slides">
<div class="slides_container">
<div class="slide">
<h1>Первый слайд</h1>
Текст первого слайда</p>
<a href="#4" class="link">Перейти в слайд 2</a></p>
</div>
<div class="slide">
<h1>Второй слайд</h1>
Текст второго слайда</p>
<a href="#1" class="link">Перейти в первый слайд</a></p>
</div>
</div>
<a href="#" class="prev"><img src="/images/arrow-prev.png" width="24" height="43"></a>
<a href="#" class="next"><img src="/images/arrow-next.png" width="24" height="43"></a>
</div>
<img src="/images/example-frame.png" width="739" height="341" id="frame">
</div>
</center>
Осталось лишь залить скрипт из прикреплённого архива в папку js, стиль в папку css и все картинки в папку images
