Слайдер серого цвета который перелистывает текстовую информацию.
Установка:
1. Копируем код скрипта и css ниже и ставим в код страницы где нужно отображать слайдер после </ head>
Код
<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">
<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">
2. Копируем код слайдера ниже и ставим в код страницы гне нужно выводить слайдер.
Код
<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>
<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>
3. Скачиваем архив с файлами. Создаём в файловом менеджере папки с названиями: js, images, css и добавляем содержимое архива в них. Это всё!
+ Слайдер проверен и он рабочий!