Всем привет! Имеется скрипт слайдера, который выполняется внутри модального окна. Но проблема в том, что слайдер начинает листать блоки сразу после загрузки страницы, еще до вызова окна. Мне же нужно, чтобы блоки начинали листаться только после вызова модального окна. Как это сделать?
HTML модального окна со слайдером внутри:
<div onclick="show('none')" id="wrap9"></div>
<!-- Само окно-->
<div id="window9">
<div id="slider">
<div class="slide_item">
БЛОК №1
</div>
<div class="slide_item">
БЛОК №2
</div>
<div class="slide_item">
БЛОК №3
</div>
</div>
</div>
JS окна:
<script type="text/javascript">
//Функция показа
function show(state){
document.getElementById('window9').style.display = state;
document.getElementById('wrap9').style.display = state;
}
</script>
JS слайдера:
<script>
let slider = document.querySelector('#slider'),
slides = slider.querySelectorAll('.slide_item'),
len = slides.length, index = len - 1, dir = 1;
function move()
{
slides[index].style.opacity = "";
slides[index].style.Zindex = "";
index = (index + dir + len) % len;
slides[index].style.opacity = 1;
slides[index].style.Zindex = 1;
window.setTimeout(move, 2000)
}
window.setTimeout(move, 1000)
</script>
CSS модального окна:
Код:
|
#wrap9{
display: none;
opacity: 0.8;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
background-color: rgba(1, 1, 1, 0.725);
z-index: 100;
overflow: auto;
}
#window9{
width: 400px;
height: 400px;
margin: 50px auto;
display: none;
background: #fff;
z-index: 200;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
}
.close9{
margin-left: 364px;
margin-top: 4px;
cursor: pointer;
} |
CSS слайдера:
Код:
|
#slider{
width: 80vw;
height: 80vh;
margin: 0px auto;
position: relative;
overflow: hidden;
}
.slide_item{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top:0;
float: left;
opacity: 0;
z-index: -10;
background-size: cover;
} |
HTML кнопка вызова окна:
<button onclick="show('block')">Вперед</button>