Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Ответить с цитированием
  #2 (permalink)  
Старый 20.12.2019, 15:23
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,215

Сообщение от Lefseq
window.setTimeout(move, 1000)
Который под функцией move(). Переместить в функцию show()...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как запустить функцию после другой функции Rentony jQuery 7 07.02.2012 18:01
Как запустить на выполнение код файла kgn Общие вопросы Javascript 4 06.01.2012 22:08
Как запустить модальное окно из информационного окна google maps? www123 jQuery 5 04.09.2011 23:38
Как запустить функцию при отображении элемента в окне браузера? Kostushko Events/DOM/Window 6 27.09.2010 11:03
Как запустить скрипт после отработки другого скрипта? roman2 Общие вопросы Javascript 2 10.08.2009 01:23