Как запустить выполнение слайдера в модальном окне только после вызова окна?

D
На сайте с 01.09.2015
Offline
59
276

Всем привет! Имеется скрипт слайдера, который выполняется внутри модального окна. Но проблема в том, что слайдер начинает листать блоки сразу после загрузки страницы, еще до вызова окна. Мне же нужно, чтобы блоки начинали листаться только после вызова модального окна. Как это сделать?

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>
sashka_
На сайте с 27.01.2010
Offline
103
#1

Надо эту строчку window.setTimeout(move, 1000) удалить и вставить в

//Функция показа

var start_slider;

function show(state){

document.getElementById('window9').style.display = state;

document.getElementById('wrap9').style.display = state;

if( !start_slider ) {

window.setTimeout(move, 1000);

start_slider = 1;

}

}

Знаю PHP, JS, jQuery. Помощь для вашего сайта. (/ru/forum/840509).

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий