Простой слайдер на чистом javascript
Слайдер на чистом javascript
Стенограмма видео
Верстка:
<ul id="slider">
<li class="slide active">
<img src="img.jpg">
</li>
<li class="slide">
<img src="img2.jpg">
</li>
<li class="slide">
<img src="img.jpg">
</li>
</ul>
<div class="arrows">
<span class="arrow next" id="next">Вправо</span>
<span class="arrow prew" id="prew">Влево</span>
</div>
<li class="slide active">
<img src="img.jpg">
</li>
<li class="slide">
<img src="img2.jpg">
</li>
<li class="slide">
<img src="img.jpg">
</li>
</ul>
<div class="arrows">
<span class="arrow next" id="next">Вправо</span>
<span class="arrow prew" id="prew">Влево</span>
</div>
Стили:
#slider {position: relative; overflow: hidden; width: 600px; height: 320px; margin: 20px auto; padding: 0; list-style: none;}
.slide {position: absolute; width: 100%; height: 100%; transition: all 1s ease-in 0.1s; left:0;}
.slide img {width: 100%;}
.arrows {position: relative; margin: 0 auto; width: 600px;}
.arrow {position: absolute; cursor: pointer;}
.no_active {color: red;}
.next {right: 0;}
.slide {position: absolute; width: 100%; height: 100%; transition: all 1s ease-in 0.1s; left:0;}
.slide img {width: 100%;}
.arrows {position: relative; margin: 0 auto; width: 600px;}
.arrow {position: absolute; cursor: pointer;}
.no_active {color: red;}
.next {right: 0;}
Скрипт js:
var next = document.getElementById('next');
var prew = document.getElementById('prew');
var slides = document.getElementsByClassName('slide');
for(var i=0; i
slides[i].style.zIndex = slides.length - i;
}
next.onclick = function () {
var activeEl = document.querySelector('.active');
if(activeEl.nextElementSibling) {
activeEl.style.left = "-100%";
activeEl.classList.remove('active');
activeEl.nextElementSibling.classList.add('active');
this.classList.remove('no_active');
prew.classList.remove('no_active');
if(!activeEl.nextElementSibling.nextElementSibling) {
this.classList.add('no_active');
}
}
}
prew.onclick = function () {
var activeEl = document.querySelector('.active');
if(activeEl.previousElementSibling) {
activeEl.previousElementSibling.style.left = "0%";
activeEl.classList.remove('active');
activeEl.previousElementSibling.classList.add('active');
this.classList.remove('no_active');
next.classList.remove('no_active');
if(!activeEl.previousElementSibling.previousElementSibling) {
this.classList.add('no_active');
}
}
}
var prew = document.getElementById('prew');
var slides = document.getElementsByClassName('slide');
for(var i=0; i
}
next.onclick = function () {
var activeEl = document.querySelector('.active');
if(activeEl.nextElementSibling) {
activeEl.style.left = "-100%";
activeEl.classList.remove('active');
activeEl.nextElementSibling.classList.add('active');
this.classList.remove('no_active');
prew.classList.remove('no_active');
if(!activeEl.nextElementSibling.nextElementSibling) {
this.classList.add('no_active');
}
}
}
prew.onclick = function () {
var activeEl = document.querySelector('.active');
if(activeEl.previousElementSibling) {
activeEl.previousElementSibling.style.left = "0%";
activeEl.classList.remove('active');
activeEl.previousElementSibling.classList.add('active');
this.classList.remove('no_active');
next.classList.remove('no_active');
if(!activeEl.previousElementSibling.previousElementSibling) {
this.classList.add('no_active');
}
}
}
Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.
Социальные сети
Карусель работ
Рандом новостей
-
Вывод цен товаров в списке разделов bitrix:catalog.section.list
Код необходимо внести в цикл. Это пригодится в случае, если нужно вывести список подразделов с товарами
-
Присвоить класс body как название Раздела
Иногда нужно присвоить body класс с таким же наименованием как у текущего раздела.
-
Вывод подразделов в разделе в виде карусели
Чтобы вывести подразделы раздела в виде карусели необходимо подключить скрипты выбраной карусели, а затем в файле tepmlate.php
