[Lefseq]

Здравствуйте. Имеется модальное окно со встроенным внутри слайдером картинок. На данный момент фиксированный размер окна 620x620, эти размеры необходимы для демонстрации 3 и 4 картинки, но нужно, чтобы 1 и 2 картинки демонстрировались при размере окна в 320х320. То есть надо, чтобы после второй картинки размер модального окна менялся с 320х320 на 620х620. Помогите, пожалуйста, решить эту задачу, если это вообще возможно сделать.

#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: 620px;
        height: 620px;
        margin: 50px auto;
        display: none;
        background: #fff;
        z-index: 200;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 16px;
    }
    
	
#slider{
    width: 100%;
    height: 80vh;
    margin: 0px auto;
    position: relative;
    overflow: hidden;
	text-align:center;
}
.slide_item{
    width:  100%;
    height: 100%;
    position: absolute;
    left: 0;
    top:0;
    float: left;
    opacity: 0;
    z-index: -10;
    background-size: cover;
}

<button onclick="show('block')">Продолжить</button>

<div id="wrap9"></div>

                    <!-- Само окно-->
            <div id="window9">
			
 
	      <div id="slider">
		  
<div class="slide_item">
<img src="https://cdn1.flamp.ru/1b0c06e888addc8e158ca552709de5a5_300_300.jpg">
</div>

<div class="slide_item">
<img src="https://cdn1.flamp.ru/4c6ba0df4ec769222aea54ba2159a68c_300_300.jpg">
</div>

<div class="slide_item">
<img src="https://app.clilk.com/db/projpics/5b6479432ab66ea7789f0172.png">
</div>

<div class="slide_item">
<img src="https://i03.fotocdn.net/s117/c9fe0056cfefb3ac/gallery_m/2676059525.jpg">
</div>

</div>
</div>

let timer = null;
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;
  index < len - 1 && (timer = window.setTimeout(move, 2000));
}
 
function show(state) {
  if (state === "block") {
    timer = window.setTimeout(move, 0);
  } else {
    clearTimeout(timer);
  }
  document.getElementById('window9').style.display = state;
  document.getElementById('wrap9').style.display = state;
}