Переключение между div

сразу скажу, что я не программист, а дизайнер, но приходиться править чужой код иногда. c css html вроде как более менее, а с js нет

У меня есть вот таких 4 таких дива, как a.slide. Находятся они все в одном классе .double_slide_block.

<dialog class="w-dialog sorb_slide_modal" id="popup-4" data-toggle="is-on">
<article>
 <div class="close w-trigger" data-toggle="is-on" data-target=".w-dialog" data-traverse="closest"></div>
<img src="assets/patientSlide/image/sorb_logo.png" alt="img" class="sorb_logo">
<div class="double_slide_block">        

<div class="a_slide">
    <img src="assets/patientSlide/image/sorb_slide_top_3.jpg" alt="img">
    <button type="button" class="arrow_btn"><img src="assets/patientSlide/image/arrow_forward.png" alt="img"></button>
                </div>

<div class="b_slide">
<img src="assets/patientSlide/image/sorb_slide_back_3.jpg" alt="img">
<button type="button" class="arrow_btn"><img src="assets/patientSlide/image/arrow_back.png" alt="img"></button>
                </div>

Также есть js

$(".swap_btn, .arrow_btn").click(function() {
$(this).parent().parent().toggleClass('active');

css

}.sorb_slide_modal .c_slide {
position: absolute;
top: 0px;
left: 0px;
width: 1024px;
height: 768px;
-webkit-transition: 0.3s all;
-moz-transition: 0.3s all;
-ms-transition: 0.3s all;
-o-transition: 0.3s all;
transition: 0.3s all;
}
.double_slide_block.active .c_slide {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
opacity: 1;
z-index: 2;

Он работает только для 2 дивов. т.е. они переключаются между собой через транзишн. Как мне сделать переключение между 4мя. т.е. по нажатию кнопки чтобы 1 менялся на 2й, 2 на 3 и т.д.

1 похожий ответ я нашел, но придется в куче мест переписывать заново. Спасибо