81 lines
2.0 KiB
JavaScript
81 lines
2.0 KiB
JavaScript
|
var container = document.getElementById("container");
|
||
|
|
var slider = document.getElementById("slider");
|
||
|
|
var slides = document.getElementsByClassName("slide").length;
|
||
|
|
var buttons = document.getElementsByClassName("btn");
|
||
|
|
|
||
|
|
var currentPosition = 0;
|
||
|
|
var currentMargin = 0;
|
||
|
|
var slidesPerPage = 3;
|
||
|
|
var slidesCount = slides - slidesPerPage;
|
||
|
|
var containerWidth = container.offsetWidth;
|
||
|
|
var prevKeyActive = false;
|
||
|
|
var nextKeyActive = true;
|
||
|
|
|
||
|
|
window.addEventListener("resize", checkWidth);
|
||
|
|
|
||
|
|
function checkWidth() {
|
||
|
|
containerWidth = container.offsetWidth;
|
||
|
|
setParams(containerWidth);
|
||
|
|
}
|
||
|
|
|
||
|
|
function setParams(w) {
|
||
|
|
if (w < 551) {
|
||
|
|
slidesPerPage = 1;
|
||
|
|
} else {
|
||
|
|
if (w < 901) {
|
||
|
|
slidesPerPage = 2;
|
||
|
|
} else {
|
||
|
|
if (w < 1101) {
|
||
|
|
slidesPerPage = 3;
|
||
|
|
} else {
|
||
|
|
slidesPerPage = 3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
slidesCount = slides - slidesPerPage;
|
||
|
|
if (currentPosition > slidesCount) {
|
||
|
|
currentPosition -= slidesPerPage;
|
||
|
|
}
|
||
|
|
currentMargin = -currentPosition * (100 / slidesPerPage);
|
||
|
|
slider.style.marginLeft = currentMargin + "%";
|
||
|
|
if (currentPosition > 0) {
|
||
|
|
buttons[0].classList.remove("inactive");
|
||
|
|
}
|
||
|
|
if (currentPosition < slidesCount) {
|
||
|
|
buttons[1].classList.remove("inactive");
|
||
|
|
}
|
||
|
|
if (currentPosition >= slidesCount) {
|
||
|
|
buttons[1].classList.add("inactive");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
setParams();
|
||
|
|
|
||
|
|
function slideRight() {
|
||
|
|
if (currentPosition != 0) {
|
||
|
|
slider.style.marginLeft = currentMargin + 100 / slidesPerPage + "%";
|
||
|
|
currentMargin += 100 / slidesPerPage;
|
||
|
|
currentPosition--;
|
||
|
|
}
|
||
|
|
if (currentPosition === 0) {
|
||
|
|
buttons[0].classList.add("inactive");
|
||
|
|
}
|
||
|
|
if (currentPosition < slidesCount) {
|
||
|
|
buttons[1].classList.remove("inactive");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function slideLeft() {
|
||
|
|
if (currentPosition != slidesCount) {
|
||
|
|
slider.style.marginLeft = currentMargin - 100 / slidesPerPage + "%";
|
||
|
|
currentMargin -= 100 / slidesPerPage;
|
||
|
|
currentPosition++;
|
||
|
|
}
|
||
|
|
if (currentPosition == slidesCount) {
|
||
|
|
buttons[1].classList.add("inactive");
|
||
|
|
}
|
||
|
|
if (currentPosition > 0) {
|
||
|
|
buttons[0].classList.remove("inactive");
|
||
|
|
}
|
||
|
|
}
|