Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.06.2019, 15:16
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 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 в 15:29.
Ответить с цитированием
  #2 (permalink)  
Старый 11.06.2019, 16:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,137

простой слайдер
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 в 16:53.
Ответить с цитированием
  #3 (permalink)  
Старый 11.06.2019, 17:58
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Рони, объясните, что делает эта строчка?
index = (index + length - i) % length;
Ответить с цитированием
  #4 (permalink)  
Старый 11.06.2019, 18:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,137

oleg901,
сохраняет индекс в пределах от нуля до length
надо плюс i , так корректнее


index = (index + length + i) % length;
Ответить с цитированием
  #5 (permalink)  
Старый 11.06.2019, 18:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,137

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>
Ответить с цитированием
  #6 (permalink)  
Старый 11.06.2019, 18:15
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Ух ты! Не знал про такой прием.. Т.е данное выражение будет работать независимо от длины массива?
Ответить с цитированием
  #7 (permalink)  
Старый 11.06.2019, 18:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,137

Сообщение от oleg901
Т.е данное выражение будет работать независимо от длины массива?
зависимо, наверное?
Ответить с цитированием
  #8 (permalink)  
Старый 11.06.2019, 18:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,137

Сообщение от oleg901
Не знал про такой прием..
я тоже, увидел в одном из примеров Malleys
Ответить с цитированием
  #9 (permalink)  
Старый 11.06.2019, 18:49
Аспирант
Отправить личное сообщение для oleg901 Посмотреть профиль Найти все сообщения от oleg901
 
Регистрация: 12.08.2018
Сообщений: 54

Рони, подскажите статью, в которой рассказывается как интерпретируется js код. Заметил, что много проблем возникает из-за того, что я не знаю этой темы. Спасибо!
Ответить с цитированием
  #10 (permalink)  
Старый 11.06.2019, 18:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,137

oleg901,
не понимаю или не знаю, что вы спросили.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Странная работа слайдера.. jojocague jQuery 1 25.11.2016 22:28
Работа slick слайдера sergey24 Общие вопросы Javascript 1 04.11.2016 06:19
Работа слайдера внутри табов melissa_kiss Общие вопросы Javascript 2 26.12.2015 13:11