Simple slider

Простой слайдер изображений на CSS и Javascript

Автор уже опубликовал скрипт карусели, который также использует только CSS и Javascript. Теперь давайте рассмотрим скрипт слайдера. Он отличается от карусели тем, что одновременно виден только один элемент, а не несколько, и элементы не прокручиваются, а медленно замещаются одно другим. И ещё. В данном слайдере в качестве элементов используются только изображения (слайды), поэтому и называется он простой слайдер изображений.

Навигация осуществляется стрелками “Следующий элемент” или “Предыдущий элемент” и индикаторными точками. Стрелки и точки можно отключить в настройках скрипта. Элементы могут быть показаны с остановкой на первом и последнем элементе или в цикле, когда за последним элементом вновь следует первый. Можно включить автоматический просмотр (пролистывание) элементов, длительность просмотра (интервал между переключениями) регулируется. При наведении мыши на элемент пролистывание прекращается.

Слайдер автоматически подстраивается под любую ширину экрана любого устройства. Убедиться в этом можно сдвигая влево-вправо какую-либо из боковых сторон браузера.

HTML – код слайдера стандартный, за исключением одного: перед изображениями помещён экран, который представляет собой однотонный рисунок белого цвета. Все изображения и экран должны быть одного размера. Число изображений произвольное.

, но можно использовать и или

. Стрелки и индикаторные точки располагаются абсолютным позиционированием в соответствующих контейнерах. Для стрелок используются рисунки в виде треугольных скобок, которые, при желании, вы можете заменить своими рисунками. Точки генерируются программой, количество точек равно количеству изображений.

Все изображения располагаются “в стопочку”, одно над другим абсолютным позиционированием в левом верхнем углу объемлющего контейнера. Экран предотвращает схлопывание внешнего контейнера. Всем изображениям присваивается CSS-свойство opacity: 0, кроме первого элемента, которому программа инициализации присваивает opacity: 1, тем самым делая его видимым.

Пролистывание элементов осуществляется плавным изменением opacity из 1 в 0 для видимого элемента и из 0 в 1 для следующего за ним невидимого элемента. Тем самым видимый элемент становится невидимым, а невидимый видимым. Плавность перехода создаёт свойство transition с длительностью 1с и функцией перехода ease-in.

img < width: 100%; !important; >/* General styles */ .sim-slider < position: relative; >.sim-slider-list < margin: 0; padding: 0; list-style-type: none; position: relative; >.sim-slider-element < width: 100%; transition: opacity 1s ease-in; opacity: 0; position: absolute; z-index: 2; left: 0; top: 0; display: block; >/* Navigation item styles */ div.sim-slider-arrow-left, div.sim-slider-arrow-right < width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 4; >div.sim-slider-arrow-left < left: 10px; top: 40%; display: block; background: url("sim-arrow-left.png") no-repeat; >div.sim-slider-arrow-right < right: 10px; top: 40%; display: block; background: url("sim-arrow-right.png") no-repeat; >div.sim-slider-arrow-left:hover < opacity: 1.0; >div.sim-slider-arrow-right:hover < opacity: 1.0; >div.sim-slider-dots < width: 100%; height: auto; position: absolute; left: 0; bottom: 0; z-index: 3; text-align: center; >span.sim-dot

Для того, чтобы слайдер был адаптивным к любой ширине экрана, для изображений нужно указать CSS-свойство width: 100%. Для всех блочных контейнеров (div, ul, li и пр.) также width: 100% или, если нужна ширина в числовых единицах, то только max-width или min-width.

Стили, как обычно, подключаются в заголовке. Скрипт можно подключить по наступлению события onload или в конце HTML-разметки. Файл со скриптом слайдера может выглядеть так:

        … 
 …
 …      

Вызов слайдера производится по имени класса sim-slider или по идентификатору. Во втором случае можно разместить несколько слайдеров на одной странице.

  …  …  

function Sim(sldrId) < let < this.sldrRoot = id >else < this.sldrRoot = document.querySelector('.sim-slider') >; // Slider objects this.sldrList = this.sldrRoot.querySelector('.sim-slider-list'); this.sldrElements = this.sldrList.querySelectorAll('.sim-slider-element'); this.sldrElemFirst = this.sldrList.querySelector('.sim-slider-element'); this.leftArrow = this.sldrRoot.querySelector('div.sim-slider-arrow-left'); this.rightArrow = this.sldrRoot.querySelector('div.sim-slider-arrow-right'); this.indicatorDots = this.sldrRoot.querySelector('div.sim-slider-dots'); // Initialization this.options = Sim.defaults; Sim.initialize(this) >; Sim.defaults = < // Default options for the slider loop: true, // Бесконечное зацикливание слайдера auto: true, // Автоматическое пролистывание interval: 5000, // Интервал между пролистыванием элементов (мс) arrows: true, // Пролистывание стрелками dots: true // Индикаторные точки >; Sim.prototype.elemPrev = function(num) < num = num || 1; let prevElement = this.currentElement; this.currentElement -= num; if(this.currentElement < 0) this.currentElement = this.elemCount-1; if(!this.options.loop) < if(this.currentElement == 0) < this.leftArrow.style.display = 'none' >; this.rightArrow.style.display = 'block' >; this.sldrElements[this.currentElement].style.opacity = '1'; this.sldrElements[prevElement].style.opacity = '0'; if(this.options.dots) < this.dotOn(prevElement); this.dotOff(this.currentElement) >>; Sim.prototype.elemNext = function(num) < num = num || 1; let prevElement = this.currentElement; this.currentElement += num; if(this.currentElement >= this.elemCount) this.currentElement = 0; if(!this.options.loop) < if(this.currentElement == this.elemCount-1) < this.rightArrow.style.display = 'none' >; this.leftArrow.style.display = 'block' >; this.sldrElements[this.currentElement].style.opacity = '1'; this.sldrElements[prevElement].style.opacity = '0'; if(this.options.dots) < this.dotOn(prevElement); this.dotOff(this.currentElement) >>; Sim.prototype.dotOn = function(num) < this.indicatorDotsAll[num].style.cssText = 'background-color:#BBB; cursor:pointer;' >; Sim.prototype.dotOff = function(num) < this.indicatorDotsAll[num].style.cssText = 'background-color:#556; cursor:default;' >; Sim.initialize = function(that) < // Constants that.elemCount = that.sldrElements.length; // Количество элементов // Variables that.currentElement = 0; let bgTime = getTime(); // Functions function getTime() < return new Date().getTime(); >; function setAutoScroll() < that.autoScroll = setInterval(function() < let fnTime = getTime(); if(fnTime - bgTime + 10 >that.options.interval) < bgTime = fnTime; that.elemNext() >>, that.options.interval) >; // Start initialization if(that.elemCount ; if(that.elemCount >= 1) < // показать первый элемент that.sldrElemFirst.style.opacity = '1'; >; if(!that.options.loop) < that.leftArrow.style.display = 'none'; // отключить левую стрелку that.options.auto = false; // отключить автопркрутку >else if(that.options.auto) < // инициализация автопрокруки setAutoScroll(); // Остановка прокрутки при наведении мыши на элемент that.sldrList.addEventListener('mouseenter', function() < clearInterval(that.autoScroll) >, false); that.sldrList.addEventListener('mouseleave', setAutoScroll, false) >; if(that.options.arrows) < // инициализация стрелок that.leftArrow.addEventListener('click', function() < let fnTime = getTime(); if(fnTime - bgTime >1000) < bgTime = fnTime; that.elemPrev() >>, false); that.rightArrow.addEventListener('click', function() < let fnTime = getTime(); if(fnTime - bgTime >1000) < bgTime = fnTime; that.elemNext() >>, false) > else < that.leftArrow.style.display = 'none'; that.rightArrow.style.display = 'none' >; if(that.options.dots) < // инициализация индикаторных точек let sum = '', diffNum; for(let i=0; i ' >; that.indicatorDots.innerHTML = sum; that.indicatorDotsAll = that.sldrRoot.querySelectorAll('span.sim-dot'); // Назначаем точкам обработчик события 'click' for(let n=0; n else if(n > that.currentElement) < bgTime = getTime(); that.elemNext(diffNum) >// Если n == that.currentElement ничего не делаем >, false) >; that.dotOff(0); // точка[0] выключена, остальные включены for(let i=1; i > >; 

Источник

Слайдер bxSlider на всю ширину сайта

Пример верстки слайдера на плагине bxSlider, который растягивается на всю ширину сайта, оставляя по центру фиксированный блок контента – открыть пример.

HTML разметка и подключение плагина:

CSS-стили:

.main_slider ul < margin: 0; padding: 0; >.main_slider li < margin: 0; padding: 0; height: 330px; background-position: 50% 0; background-size: cover; >/* Контент в слайдере */ .main_slider-wrp < width: 450px; margin: 0 auto; padding: 50px 80px; >.main_slider-title < font-size: 60px; color: #fff; font-weight: 900; margin-bottom: 15px; >.main_slider-text < font-size: 18px; color: #fff; font-weight: bold; margin-bottom: 15px; >/* Управление слайдером */ .main_slider .bx-wrapper < position: relative; >.main_slider .bx-controls < position: absolute; top: 0px; left: 0px; width: 100%; >.main_slider .bx-controls-direction < width: 600px; margin: 0 auto; position: relative; z-index: 500; >.main_slider .bx-prev, .main_slider .bx-next < position: absolute; top: 140px; width: 37px; height: 37px; overflow: hidden; text-indent: -999px; >.main_slider .bx-prev < left: 0; background: url(../img/slide-prev.png) 0 0 no-repeat; >.main_slider .bx-next< right: 0; background: url(../img/slide-next.png) 0 0 no-repeat; >

Результат:

Слайдер с пагинацией

.main_slider ul < margin: 0; padding: 0; >.main_slider li < margin: 0; padding: 0; height: 330px; background-position: 50% 0; background-size: cover; >/* Контент в слайдере */ .main_slider-wrp < width: 450px; margin: 0 auto; padding: 50px 80px; >.main_slider-title < font-size: 60px; color: #fff; font-weight: 900; margin-bottom: 15px; >.main_slider-text < font-size: 18px; color: #fff; font-weight: bold; margin-bottom: 15px; >/* Управление слайдером */ .main_slider .bx-wrapper < position: relative; >.main_slider .bx-controls < position: absolute; top: 0px; left: 0px; width: 100%; >.main_slider .bx-controls-direction < width: 600px; margin: 0 auto; position: relative; z-index: 500; >.main_slider .bx-prev, .main_slider .bx-next < position: absolute; top: 140px; width: 37px; height: 37px; overflow: hidden; text-indent: -999px; >.main_slider .bx-prev < left: 0; background: url(../img/slide-prev.png) 0 0 no-repeat; >.main_slider .bx-next < right: 0; background: url(../img/slide-next.png) 0 0 no-repeat; >/* Пагинация */ .main_slider .bx-pager < position: absolute; top: 270px; left: 0; right: 0; z-index: 500; width: 600px; margin: 0 auto; text-align: center; >.main_slider .bx-pager-item < display: inline-block; margin: 0 5px; >.main_slider .bx-pager-item a < display: inline-block; width: 16px; height: 16px; overflow: hidden; text-indent: -999px; background: #fff; border-radius: 50%; >.main_slider .bx-pager-item a.active

Источник

Адаптивный слайдер на всю ширину монитора

Плюс в том, что этот слайдер идет на чистом CSS3, где не нужно прописывать лишних скриптов или различных библиотек, а значит по весу он отлично подойдет, как на быстрый интернет соединение, так на небольшое, где сразу раскроется картинка. Поскольку в этой версии используется только CSS, то можно его уместить по месту или создать под него отдельный файл. Где также можно использовать для автоматической прокрутки снимков, который хорошо работает во всех браузерах.

Все изначально проверено по техническим работам, что после установки идут такие слайды, а это сама картинка, плюс к ней перекреплено краткое описание.

#pevekun_slayda <
width:100%;
height:500px;
position:relative;
overflow:hidden;
>
@keyframes load <
from
to
>
.vasucenia <
width:400%;
height:100%;
position:relative;
-webkit-animation:slide 30s infinite;
-moz-animation:slide 30s infinite;
animation:slide 30s infinite;
>
.pevekun_slayda <
width:25%;
height:100%;
float:left;
position:relative;
z-index:1;
overflow:hidden;
>
.slide img <
width:100%;
height:100%;
>
.slide img <
width:100%;
height:100%;
>
.image <
width:100%;
height:100%;
>
.image img <
width:100%;
height:100%;
>

/* kidesamod */
.kidesamod <
border:500px solid transparent;
/*——————-Essa linha——————*/
border-left:800px solid rgba(23,117,177,1);
/*——————-Essa linha——————*/
border-bottom:0;
position:absolute;
bottom:0;

/* opisaniyes */
.opisaniye <
width:100%;
height:100%;
position:absolute;
overflow:hidden;
>
.opisaniye-txt <
width:400px;
height:150px;
float:left;
position:relative;
top:300px;
-webkit-animation:opisaniye-s 7.5s infinite;
-moz-animation:opisaniye-s 7.5s infinite;
animation:opisaniye-s 7.5s infinite;
>
.opisaniye-txt h1 <
font-family:Arial;
text-transform:uppercase;
font-size:24px;
color:#fff;
text-align:left;
margin-left:30px;
padding-bottom:10px;
>
.opisaniye-txt h2 <
font-family:arial;
font-weight:normal;
font-size:14px;
font-style:italic;
color:#fff;
text-align:left;
margin-left:30px;
>

/* Switch */
.switch <
width:120px;
height:10px;
position:absolute;
bottom:50px;
z-index:99;
left:30px;
>
.switch > ul <
list-style:none;
>
.switch > ul > li <
width:10px;
height:10px;
border-radius:50%;
background:#333;
float:left;
margin-right:5px;
cursor:pointer;
>
.switch ul <
overflow:hidden;
>
.on <
width:100%;
height:100%;
border-radius:50%;
background: rgba(23,117,177,1);
position:relative;
-webkit-animation:on 30s infinite;
-moz-animation:on 30s infinite;
animation:on 30s infinite;
>

@-webkit-keyframes on <
0%,100% <
margin-left:0%;
>
21% <
margin-left:0%;
>
25% <
margin-left:15px;
>
46% <
margin-left:15px;
>
50% <
margin-left:30px;
>
71% <
margin-left:30px;
>
75% <
margin-left:45px;
>
96% <
margin-left:45px;
>
>

Каждый переход производится по заданному времени, который также контролируется с помощью CSS. Все это очень впечатляет и прекрасно работает как простой шаблон пользовательского интерфейса.

Источник

Слайдер на весь экран при помощи HTML + CSS

И там прописав код, вы автоматически запускаете изображение, которое аналогично настраивается в паузе удержание снимка. С его помощью у вас появляется возможность реализовать слайдер без javascript, а значит совершенно не будет грузить страницу, что быстро откроется, что не мало важно. Также выставить под настройку баннеры, где под картинки прописываем ссылки для перехода, что получается доступность до нужного материала в один клик.

С проверочного тестирование:

.aperekoden_slayda <
height: 100%;
width: 100%;
position: fixed;
>

.aperekoden_slayda .smena_slada <
margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
>

.aperekoden_slayda .smena_slada .asnapoka <
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
>

.aperekoden_slayda .smena_slada .asnapoka:nth-child(1) <
-webkit-animation: sliderFade-1 15s linear infinite;
animation: sliderFade-1 15s linear infinite;
>

.aperekoden_slayda .smena_slada .asnapoka:nth-child(2) <
-webkit-animation: sliderFade-2 15s linear infinite;
animation: sliderFade-2 15s linear infinite;
>

.aperekoden_slayda .smena_slada .asnapoka:nth-child(3) <
-webkit-animation: sliderFade-3 15s linear infinite;
animation: sliderFade-3 15s linear infinite;
>

@-webkit-keyframes sliderFade-1 <
0% <
opacity: 1 >

@-webkit-keyframes sliderFade-2 <
0% <
opacity: 0 >

@-webkit-keyframes sliderFade-3 <
0% <
opacity: 0 >

Не забываем, если вы установку производите на чистой страницы, то по ширине и высоте слайд займет все место. Где нужно создать простой корпус html, там вы задаете данные, и после чего, он аккуратно в этом корпусе размещается.

За пример можно взять шапку, где меняются картинки, что были прописаны под ссылками. И смотря на скрин при проверке, то видно, что на большом и малом экране, изображение остается корректным.

Источник