Слайдер для сайта jQuery + CSS с автоматическим перелистыванием
Простой слайдер изображений или текста на jQuery + CSS с автоматическим интервалом переключения слайдов

3 года назад
Слайдер для сайта jQuery + CSS с автоматическим перелистыванием
В данной статье описан способ реализации и создания слайдера изображений или текста, с автоматическим перелистыванием. Функционал слайдера позволяет задавать интервал переключения между слайдами, скорость, эффект смены, а также выбор конкретного слайда из списка. В данном примере использовался классический метод смены изображений — появления и исчезновение слайдов.
timeList — скорость переключения слайда
TimeView — время показа
RadioBut — кнопки под слайдом, для быстрой навигации (radio buttons). По умолчанию true может принимать значение false.
А теперь давайте приступим! Создадим и откроем файл index.htm и пропишем туда нужную нам разметку:
timeList — скорость переключения слайда
TimeView — время показа
RadioBut — кнопки под слайдом, для быстрой навигации (radio buttons). По умолчанию true может принимать значение false.
А теперь давайте приступим! Создадим и откроем файл index.htm и пропишем туда нужную нам разметку:
content.htm
<div id="slider-wrap">
<div id="slider">
<div class="slide">
<h1>Заголовок 1</h1>
<p>Описание...</p>
</div>
<div class="slide">
<h1>Заголовок 2</h1>
<p>Описание...</p>
</div>
<div class="slide">
<h1>Заголовок 3</h1>
<p>Описание...</p>
</div>
<div class="slide">
<h1>Заголовок 4</h1>
<p>Описание...</p>
</div>
</div>
</div>
Внимание! В данном примере использован текст для работы слайда, если вы хотите использовать изображение, то поместите каждую вашу картинку в тег <div class="slide"><img></div>.
В представленном коде как мы видим ничего сложного нет, slider-wrap определяет общее положение слайдера и выравнивает его по середине экрана. Параметр slider позиционирует, и задает высоту нашего слайда свойством height. Если будете использовать слайдер картинок, то укажите высоту картинок в данном свойстве, если высота картинок разная, то укажите максимальную.
Для наилучшей визуализации слайдера и привлекательности используйте одинаковое разрешение картинок.
Теперь нам необходимо стилизовать наш слайдер. Стрелки вперед/назад для переключения слайдов, а также радио кнопки под слайдером, использованы в виде картинок и прилагаются вместе с файлом. Создадим и откроем файл style.css и пропишем туда нужную нам разметку:
В представленном коде как мы видим ничего сложного нет, slider-wrap определяет общее положение слайдера и выравнивает его по середине экрана. Параметр slider позиционирует, и задает высоту нашего слайда свойством height. Если будете использовать слайдер картинок, то укажите высоту картинок в данном свойстве, если высота картинок разная, то укажите максимальную.
Для наилучшей визуализации слайдера и привлекательности используйте одинаковое разрешение картинок.
Теперь нам необходимо стилизовать наш слайдер. Стрелки вперед/назад для переключения слайдов, а также радио кнопки под слайдером, использованы в виде картинок и прилагаются вместе с файлом. Создадим и откроем файл style.css и пропишем туда нужную нам разметку:
style.css
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
html, body {
height: 100%;
}
body {
color: #4f4f5a;
font-family: 'Roboto', sans-serif;
font-size: 16px;
padding: 0;
margin: 0;
}
#slider-wrap {
max-width:650px;
margin: 100px auto;
}
#slider {
position:relative;
height: 200px;
overflow: hidden;
border:#fafafa solid 10px;
}
.slide {
width:100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
padding-top: 40px;
}
.Radio-But {
margin-top:10px;
text-align:center;
}
.Radio-But .ctrl-select {
display: inline-block;
width: 16px;
height: 16px;
background: url("radioBg.png") center bottom no-repeat;
margin: 2px;
overflow: hidden;
text-indent: -99999px;
}
.Radio-But .ctrl-select:hover {
cursor: pointer;
background-position: center center;
}
.Radio-But .ctrl-select.active{
background-position: center top;
}
#prewBut, #nextBut{
display: block;
width: 40px;
height: 100%;
position: absolute;
top: 0;
overflow: hidden;
text-indent: -99999px;
background: url("arrowBg.png") left center no-repeat;
opacity: 0.5;
z-index: 3;
outline: none !important;
}
#prewBut {
left: 10px;
}
#nextBut {
right: 10px;
background: url("arrowBg.png") right center no-repeat;
}
#prewBut:hover, #nextBut:hover {
opacity: 1;
}
Если стрелочки вперед/назад мешают видимости вашего слайдера их можно сделать невидимыми, а появляться они будут, лишь при наведении на них. В параметрах prewBut и nextBut, задайте свойству opacity значение 0.
Создадим и откроем наш js-файл, в котором и будет код слайдера. Не забудьте подключить фреймворк jQuery, а также библиотеку jquery.ui — указанная библиотека нам необходима для того, чтобы задать элемент исчезновения и появление слайда. Заменить указанный эффект можно свойством fadeIn и fadeOut.
Создадим и откроем наш js-файл, в котором и будет код слайдера. Не забудьте подключить фреймворк jQuery, а также библиотеку jquery.ui — указанная библиотека нам необходима для того, чтобы задать элемент исчезновения и появление слайда. Заменить указанный эффект можно свойством fadeIn и fadeOut.
slider.js
$(document).ready(function () {
var timeList = 300;
var TimeView = 5000;
var RadioBut = true;
$('.slide').hide().eq(0).show();
var slideNum = 0;
var slideTime;
slideCount = $("#slider .slide").length;
var animSlide = function(arrow){
clearTimeout(slideTime);
function slideDirectionHide(slideFloatNum, directTo){
$('.slide').eq(slideFloatNum).fadeOut(timeList);
}
function slideDirectionShow(slideFloatNum, directTo, pause){
$('.slide').eq(slideFloatNum).fadeIn(timeList, function() {
if(pause == true) { rotator(); }
});
}
var old_slideNum = slideNum;
if(arrow == "next"){
slideDirectionHide(slideNum, "left");
if(slideNum == (slideCount-1)){slideNum=0;}
else{slideNum++}
slideDirectionShow(slideNum, "right", true);
}
else if(arrow == "prew")
{
slideDirectionHide(slideNum, "right");
if(slideNum == 0){slideNum=slideCount-1;}
else{slideNum-=1}
slideDirectionShow(slideNum, "left", true);
}else{
if(arrow !== old_slideNum)
{
if(arrow > old_slideNum)
{
slideDirectionHide(slideNum, "left");
slideNum = arrow;
slideDirectionShow(slideNum, "right", true);
}else if(arrow < old_slideNum) {
slideDirectionHide(slideNum, "right");
slideNum = arrow;
slideDirectionShow(slideNum, "left", true);
}
}
}
$(".ctrl-select.active").removeClass("active");
$('.ctrl-select').eq(slideNum).addClass('active');
}
if(RadioBut){
var linkArrow = $('<a id="prewBut" href="#"><</a><a id="nextBut" href="#">></a>')
.prependTo('#slider');
$('#nextBut').click(function(){
animSlide("next");
return false;
})
$('#prewBut').click(function(){
animSlide("prew");
return false;
})
}
var addSpan ='';
$('.slide').each(function(index) {
addSpan += '<span class = "ctrl-select">' + index + '</span>';
});
$('<div class ="Radio-But">' + addSpan +'</div>').appendTo('#slider-wrap');
$(".ctrl-select:first").addClass("active");
$('.ctrl-select').click(function(){
var goToNum = parseFloat($(this).text());
animSlide(goToNum);
});
var pause = false;
var rotator = function(){
if(!pause){slideTime = setTimeout(function(){animSlide('next')}, TimeView);}
}
$('#slider-wrap').hover(
function(){clearTimeout(slideTime); pause = true;},
function(){pause = false; rotator();
});
var clicking = false;
var prevX;
$('.slide').mousedown(function(e){
clicking = true;
prevX = e.clientX;
});
$('.slide').mouseup(function() {
clicking = false;
});
$(document).mouseup(function(){
clicking = false;
});
$('.slide').mousemove(function(e){
if(clicking == true)
{
if(e.clientX < prevX) { animSlide("next"); clearTimeout(slideTime); }
if(e.clientX > prevX) { animSlide("prew"); clearTimeout(slideTime); }
clicking = false;
}
});
$('.slide').hover().css('cursor', 'pointer');
rotator();
});
Функция animSlide принимает три вида значений: next, prew, и числовое значение. Параметр next переключает следующий слайд, prew предыдущий, а числовое значение это конкретно выбранный слайд через радио кнопки под слайдом. Функции slideDirectionHide и slideDirectionShow почти схожи и идентичны, первая отвечает за исчезновение слайда и направление движения уходящего слайда, вторая за появление слайда, его направление движения при появлении, а также за заданный интервал времени показа.
При наведении курсора мыши на слайдер показ приостанавливаеться.
На этом все, если что-то не понятно или возникли вопросы, пишите и спрашивайте.
При наведении курсора мыши на слайдер показ приостанавливаеться.
На этом все, если что-то не понятно или возникли вопросы, пишите и спрашивайте.
5,2K
Комментарии
- аыва1 год назадНе работаетnОтветить
- Александр10 месяцев назадВсе работает, спасибо!nОтветить
- Лев9 месяцев назадЗдравствуйте!nПодскажите, как сделать, чтобы сразу было видно 2 или 3 слайда? Спасибо.Ответить