Показать сообщение отдельно
  #1 (permalink)  
Старый 20.12.2019, 15:15
Кандидат Javascript-наук
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 124

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

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>
Ответить с цитированием