Ошибка изменения размера изображения при изменении класса от javascript

Question

У меня есть горизонтальный слайдер с одним столбцом (изображение 2)

<div id="portfolio_horizontal_container" class="onecolumn">

Если я сделаю:

<div id="portfolio_horizontal_container" class="two-ver-columns">

и refre sh в браузере, слайдер будет иметь два столбца сейчас (изображение 3)

Но если я сделаю изменение с js:

  $("#verPrincipal").click(function() {
        $("#portfolio_horizontal_container").removeClass();
        $("#portfolio_horizontal_container").addClass("onecolumn");
    })

    $("#verCuadricula").click(function() {
        $("#portfolio_horizontal_container").removeClass();
        $("#portfolio_horizontal_container").addClass("two-ver-columns");
    })

изображения будут неправильно отрегулированы (изображение 1)

Я не понимаю, почему с одной стороны это позволяет мне меняться, но с другой стороны он не

захватывает

Демонстрация:

$("#verPrincipal").click(function() {
  $("#portfolio_horizontal_container").removeClass();
  $("#portfolio_horizontal_container").addClass("onecolumn");
})

$("#verCuadricula").click(function() {
  $("#portfolio_horizontal_container").removeClass();
  $("#portfolio_horizontal_container").addClass("two-ver-columns");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button id="verPrincipal">One Column</button>&nbsp;&nbsp;
  <button id="verCuadricula">Two Column</button>
</div>

<div id="portfolio_horizontal_container" class="onecolumn">
aaaa
</div>

Answer 1

Решено с помощью:

$(window).trigger('resize');

>

$("#verPrincipal").click(function() {
  $("#portfolio_horizontal_container").removeClass();
  $("#portfolio_horizontal_container").addClass("onecolumn");
  $(window).trigger('resize');
})

$("#verCuadricula").click(function() {
  $("#portfolio_horizontal_container").removeClass();
  $("#portfolio_horizontal_container").addClass("two-ver-columns");
  $(window).trigger('resize');
})