Как сделать модальное окно, которое меняет размер?
 

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

<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;
}

Почему все время много кто говорит/пишет про окно. Да еще и модальное!

Хотя этот элемент вообще не является окном. :blink:
И такое сплошь и рядом. Кто вас такому научил?

Попробуйте так:

var popup = document.getElementById('window9');

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;
    
    if (index > 1) {
        popup.style.width = '620px';
        popup.style.height = '620px';
    } else {
        popup.style.width = '320px';
        popup.style.height = '320px';
    }
    
    index < len - 1 && (timer = window.setTimeout(move, 2000));
}

ЗЫ. в css изначальный размер попапа должен быть 320*320px.