Проблемы с разработкой слайдера
Пытаюсь написать слайдер с автоматическим переключением, вроде получилось, но код выглядит ужасно.Прошу помощи в оценке.
var sliderInit = (function(){
'use strict'
function Slider() {
this.controls = document.querySelector('.controls');
this.buttons = document.querySelectorAll('.controls__btn');
this.slider = document.querySelector('.slider');
this.slide = document.querySelector('.slide');
this.start = function(time) {
this.updateClass();
this.changeSlide();
this.timer(time)
}
}
Slider.prototype.updateClass = function() {
var that = this;
this.controls.onclick = function(e) {
var btn = e.target;
if (btn.tagName === "A") {
e.preventDefault();
that.checkClass("active");
that.changeSlide(btn);
btn.classList.toggle('active');
}
}
}
Slider.prototype.checkClass = function(className) {
[].filter.call(this.buttons, function(btn) {
if (btn.classList.contains(className)) {
btn.classList.remove(className);
}
});
}
Slider.prototype.timer = function(time) {
var i = 0,
that = this;
length = this.buttons.length;
var timerId = setInterval(function(){
that.checkClass('active');
that.buttons[i].classList.toggle('active');
var btn = that.buttons[i];
that.changeSlide(btn);
i++;
if (i === length) {
i = 0;
};
},time);
}
Slider.prototype.changeSlide = function(btn) {
btn = btn || this.buttons[0];
var index = btn.getAttribute('data-index');
var width = -(this.slide.clientWidth) - 50; //margin-right
switch(index) {
case "1":
this.slider.style.webkitTransform = "translate3d(0px, 0px, 0px)";
break;
case "2":
this.slider.style.webkitTransform = "translate3d(" + width + "px, 0px, 0px)";
break;
case "3":
this.slider.style.webkitTransform = "translate3d("+ width * 2 + "px, 0px, 0px)";
}
}
return Slider;
})();
var slider = new sliderInit();
slider.start(2000);
|
frontmaker,
макет бы полностью c html и css ... а без setInterval никак? |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div class="slider-wrap">
<div class="slider">
<div class="slide">
<img src="img/portfolio-img3.jpg" alt="">
</div>
<div class="slide">
<img src="img/portfolio-img4.jpg" alt="">
</div>
<div class="slide">
<img src="img/portfolio-img5.jpg" alt="">
</div>
</div>
<div class="controls-wrap">
<div class="controls">
<a class="controls__btn active" href="#" data-index="1"></a>
<a class="controls__btn" href="#" data-index="2"></a>
<a class="controls__btn" href="#" data-index="3"></a>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
|
.slider-wrap {
display: block;
margin: 0 auto;
width: 20%;
overflow: hidden;
}
.slider {
width: 2500%;
left: 0;
position: relative;
transform: translate3d(0px, 0px, 0px);
transition: all .3s;
}
.slider:before,
.slider:after {
content: " ";
display: table;
clear: both;
}
.slider-wrap .slide {
float: left;
margin-right: 50px;
}
.slider-wrap .slide img {
display: block;
margin: 0 auto;
}
.controls-wrap {
padding-top: 50px;
}
.controls {
width: 65px;
margin: 0 auto;
}
.controls .controls__btn {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #506a85;
display: inline-block;
margin-right: 6px;
}
.controls .controls__btn:last-child {
margin-right: 0;
}
.controls .controls__btn.active {
background-color: #00bc9c;
}
|
Цитата:
|
frontmaker,
либо setTimeout или что ещё лучше requestAnimationFrame |
frontmaker,
и может хранить индекс текущего слайдера чем заниматся перебором в поисках активного - checkClass ?? |
Цитата:
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 07:22. |