Простой адаптивный слайдер с помощью jQuery
Многие пользователи и начинающие разработчики не особо понимают разработку адаптивности на сложных примерах, по этому постараемся объяснить доступно на простом примере, и так давайте приступим.
Шаг 1. HTML
У нас будет ID за которым закреплены будут элементарные стили, мы подключаем изображения и подписи к ним:
С разметкой никаких проблем не должно быть, переходим к следующему шагу.
Шаг 2. CSS
Нам необходимо определить позиционирование слайдера и его адаптивность, для самой коробки слайдера мы установим значение position: relative; Это значение означает положение элемента, которое устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
А для самых свойств изображений мы установим абсолютное позиционирование, кроме этого мы добавим окантовку для слайдера, применив значение background-color. Рамка будет автоматически изменять размер со слайдером.
Шаг 3. jQuery
Нам необходимо иметь автоматический слайдер с базовыми эффектами переходов. Кроме этого мы зададим интервал и скорость автоматического перехода, следует заметить, что он будет цикличным:
Вот и все. Готово!
Шаг 1. HTML
У нас будет ID за которым закреплены будут элементарные стили, мы подключаем изображения и подписи к ним:
Код
<section id="fader">
<img src="01.jpg" alt="Image One">
<img src="02.jpg" alt="Image Two">
<img src="03.jpg" alt="Image Three">
<img src="04.jpg" alt="Image Four">
<img src="05.jpg" alt="Image Five">
<img src="06.jpg" alt="Image Six">
</section>
<img src="01.jpg" alt="Image One">
<img src="02.jpg" alt="Image Two">
<img src="03.jpg" alt="Image Three">
<img src="04.jpg" alt="Image Four">
<img src="05.jpg" alt="Image Five">
<img src="06.jpg" alt="Image Six">
</section>
С разметкой никаких проблем не должно быть, переходим к следующему шагу.
Шаг 2. CSS
Нам необходимо определить позиционирование слайдера и его адаптивность, для самой коробки слайдера мы установим значение position: relative; Это значение означает положение элемента, которое устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
Код
#fader {
position: relative;
width: 90%;
max-width: 600px;
margin: 0 auto;
top: 20px;
}
#fader img {
position: absolute;
background-color: #f3f4ef; border: 1px solid #dedede; padding: 5px;
top: 0;
left: 0;
max-width: 100%;
height: auto;
}
position: relative;
width: 90%;
max-width: 600px;
margin: 0 auto;
top: 20px;
}
#fader img {
position: absolute;
background-color: #f3f4ef; border: 1px solid #dedede; padding: 5px;
top: 0;
left: 0;
max-width: 100%;
height: auto;
}
А для самых свойств изображений мы установим абсолютное позиционирование, кроме этого мы добавим окантовку для слайдера, применив значение background-color. Рамка будет автоматически изменять размер со слайдером.
Шаг 3. jQuery
Нам необходимо иметь автоматический слайдер с базовыми эффектами переходов. Кроме этого мы зададим интервал и скорость автоматического перехода, следует заметить, что он будет цикличным:
Код
jQuery('#fader img:gt(0)').hide();
setInterval(function(){
jQuery('#fader :first-child')
.fadeTo(500, 0)
.next('img')
.fadeTo(500, 1)
.end()
.appendTo('#fader');
}, 4000);
setInterval(function(){
jQuery('#fader :first-child')
.fadeTo(500, 0)
.next('img')
.fadeTo(500, 1)
.end()
.appendTo('#fader');
}, 4000);
Вот и все. Готово!
-
FalleN -
5356 -
1 -
246
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...