11.06.2019, 14:16
|
|
Аспирант
|
|
Регистрация: 12.08.2018
Сообщений: 54
|
|
|
Некоректоная работа слайдера в обратную строну
Коллеги! Такая беда у меня. Запнулся на банальной задаче. Написал карусельку простую. Вперед она прекрасно работает, а назад некорректно.. второй день мучаюсь подскажите как правильно организовать данный js код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
.fade {
-webkit-animation-name: fade;
animation-name: fade;
-webkit-animation-duration: 2.5s;
animation-duration: 2.5s;
-webkit-animation-name: fade;
-webkit-animation-duration: 2.5s;
}
.main {
height: 650px;
width: 100%;
background: url(../img/bg.jpg) center no-repeat;
background-size: cover;
}
.main-block {
width: 750px;
min-height: 300px;
border: 6px solid #c78030;
background-color: rgba(0, 0, 0, 0.4);
margin: 0 auto;
padding: 40px;
margin-top: 180px;
text-align: center;
}
.content .slider {
margin-top: 150px;
position: relative;
}
.content .slider-title {
font-size: 32px;
color: #c78030;
}
.content .slider-title:after {
content: '';
display: block;
width: 10%;
height: 1px;
background-color: #c78030;
margin-top: 4px;
}
.content .slider .wrap {
width: 100%;
position: relative;
}
.content .slider .wrap .slider-item {
width: 80%;
margin: 0 auto;
margin-top: 50px;
position: relative;
}
.content .slider .wrap .slider-item img {
width: 100%;
}
.content .slider .wrap .prev {
position: absolute;
cursor: pointer;
top: 0;
width: 90px;
left: 10%;
background-color: rgba(0, 0, 0, 0);
-webkit-transition: 0.3s;
transition: 0.3s;
height: 100%;
}
.content .slider .wrap .prev:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.content .slider .wrap .prev:hover .arrow-left {
opacity: 1;
}
.content .slider .wrap .prev .arrow-left {
width: 30px;
height: 30px;
background: url(../icons/left-arrow.svg) center no-repeat;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
opacity: .4;
-webkit-transition: 1s;
transition: 1s;
}
.content .slider .wrap .next {
position: absolute;
cursor: pointer;
top: 0;
width: 90px;
background-color: rgba(0, 0, 0, 0);
-webkit-transition: 0.3s;
transition: 0.3s;
height: 100%;
right: 10%;
}
.content .slider .wrap .next:hover {
background-color: rgba(0, 0, 0, 0.4);
}
.content .slider .wrap .next:hover .arrow-right {
opacity: 1;
}
.content .slider .wrap .next .arrow-right {
width: 30px;
height: 30px;
background: url(../icons/right-arrow.svg) center no-repeat;
background-size: cover;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%);
-ms-transform: translate(-50%);
transform: translate(-50%);
opacity: .4;
-webkit-transition: 1s;
transition: 1s;
}
</style>
</head>
<body>
<div class="content">
<div class="container" id="about">
<div class="slider" id="photo">
<div class="wrap">
<div class="slider-item fade">
<img src="https://bipbap.ru/wp-content/uploads/2017/04/2-8.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="slider-item fade ">
<img src="https://i.pinimg.com/originals/45/37/8e/45378eb16e35d31ebe01048984cca472.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="slider-item fade">
<img src="http://www.kartinki24.ru/uploads/gallery/main/34/kartinki24_fantasu_girls_0019.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="slider-item fade">
<img src="https://klike.net/uploads/posts/2018-11/1541400530_1.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="prev"> <div><span class="arrow-left" style='color:white;'>назад</span></div></div>
<div class="next"><div> <span class="arrow-right" style='color:white;'>вперед</span></div></div>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('DOMContentLoaded', function(){
function funcChikl (x, y){
for(let i = y; i < x.length; i++){
x[i].style.display = 'none';
}
}
let slider = document.querySelector('.slider'),
slider_element = document.querySelectorAll('.slider-item'),
prev = document.querySelector('.arrow-left'),
go = document.querySelector('.arrow-right'),
next = document.querySelector('.next'),
bek = document.querySelector('.prev'),
i = 0,
y = 0;
funcChikl(slider_element, 1);
slider.addEventListener('click', function(e){
if(e.target === go){
y = y + 1;
if(i === slider_element.length){
i = 0;
}
if(y === slider_element.length){
y = 0;
}
slider_element[i].style.display = 'none';
slider_element[y].style.display = '';
i++;
}
if(e.target === prev){
y = y - 1;
/*if(i === 0){
i = slider_element.length - 1;
}
if(y === 0){
y = slider_element.length - 1;
}*/
slider_element[i].style.display = 'none';
slider_element[y].style.display = '';
i--;
}
})
})
</script>
</body>
</html>
Последний раз редактировалось oleg901, 11.06.2019 в 14:29.
|
|
11.06.2019, 15:51
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
простой слайдер
oleg901,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
.content .slider .wrap{
margin: 50px auto;
position: relative;
display: in;
}
.content .slider .wrap .slider-item {
position: absolute;
transition: .8s;
opacity: 0;
text-align: center;
height: auto;
}
.content .slider .wrap .slider-item.open{
opacity: 1;
}
.content .slider .wrap .slider-item img {
width: 100%;
height: auto;
}
.content .slider .wrap .prev, .content .slider .wrap .next{
color:hsl(0, 0%, 100%);
position: absolute;
cursor: pointer;
top: 0;
width: 90px;
left: 0;
background-color: rgba(0, 0, 0, 0);
-webkit-transition: .3s;
transition: .3s;
height: 100px;
}
.content .slider .wrap .next{
left: auto;
right: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="container" id="about">
<div class="slider" id="photo">
<div class="wrap">
<div class="slider-item fade">
<img src="https://bipbap.ru/wp-content/uploads/2017/04/2-8.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="slider-item fade ">
<img src="https://i.pinimg.com/originals/45/37/8e/45378eb16e35d31ebe01048984cca472.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="slider-item fade">
<img src="http://www.kartinki24.ru/uploads/gallery/main/34/kartinki24_fantasu_girls_0019.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="slider-item fade">
<img src="https://klike.net/uploads/posts/2018-11/1541400530_1.jpg" alt="slider" height='900px' width='200px'>
</div>
<button class="prev">назад</button>
<button class="next">вперед</button>
</div>
</div>
</div>
</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var slider = document.querySelector(".slider"),
slider_element = slider.querySelectorAll(".slider-item"),
index = 0,
length = slider_element.length,
setIndex = function(i) {
slider_element[index].classList.remove("open");
index = (index + length - i) % length;
slider_element[index].classList.add("open");
}
slider_element[index].classList.add("open");
slider.addEventListener("click", function(e) {
if (e.target.closest(".next")) {
setIndex(1)
}
if (e.target.closest(".prev")) {
setIndex(-1)
}
})
});
</script>
</body>
</html>
Последний раз редактировалось рони, 11.06.2019 в 15:53.
|
|
11.06.2019, 16:58
|
|
Аспирант
|
|
Регистрация: 12.08.2018
Сообщений: 54
|
|
Рони, объясните, что делает эта строчка?
index = (index + length - i) % length;
|
|
11.06.2019, 17:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
oleg901,
сохраняет индекс в пределах от нуля до length
надо плюс i , так корректнее
index = (index + length + i) % length;
|
|
11.06.2019, 17:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
oleg901,
<script>
var index = 0, length = 4;
for (var i = 0; i < 20; i++) {
index = (index + length - 1) % length;
document.write(index+"<br>")
}
</script>
<script>
var index = 0, length = 4;
for (var i = 0; i < 20; i++) {
index = (index + length +1) % length;
document.write(index+"<br>")
}
</script>
|
|
11.06.2019, 17:15
|
|
Аспирант
|
|
Регистрация: 12.08.2018
Сообщений: 54
|
|
|
Ух ты! Не знал про такой прием.. Т.е данное выражение будет работать независимо от длины массива?
|
|
11.06.2019, 17:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от oleg901
|
|
Т.е данное выражение будет работать независимо от длины массива?
|
зависимо, наверное? |
|
11.06.2019, 17:32
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от oleg901
|
|
Не знал про такой прием..
|
я тоже, увидел в одном из примеров Malleys |
|
11.06.2019, 17:49
|
|
Аспирант
|
|
Регистрация: 12.08.2018
Сообщений: 54
|
|
|
Рони, подскажите статью, в которой рассказывается как интерпретируется js код. Заметил, что много проблем возникает из-за того, что я не знаю этой темы. Спасибо!
|
|
11.06.2019, 17:51
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
oleg901,
не понимаю или не знаю, что вы спросили.
|
|
|
|
