Не понимаю как реализовать функционал кнопки смены интерьера

Question

На странице есть псевдо-конфигуратор машины. Работает таким образом:
Есть три кнопки: Цвет, экстерьер и интерьер. При клике на каждую кнопку на фон блока подгружается соответствующая картинка

При клике на "цвет" меняется цвет автомобиля
При клике на "экстерьер" меняется обвес машины
При клике на интерьер, должен был, меняться картинки с внешнего вида машины и перейти в салон. Вот тут возникают непонятки с реализацией. Мне нужно чтобы, пока я нахожусь внутри машины, то клик на кнопку "цвет" менял не цвет самой машины, а цвет интерьера. А при клике на "Экстерьер" переключался обратно на внешний вид

Всего есть 6 картинок с соответствующими комбинациями, т.е. есть просто черная машина с обвесом и есть синяя машина с обвесом, есть просто синяя машина и есть черная машина, есть черный цвет интерьера и есть белый цвет интерьера. Как я уже говорил, каждая из этих картинок становится фоном блока при определенных нажатиях на кнопки. Вот собственно сам код: С codepen

const $confImg = $("#configurator");

    $($confImg).vegas({
        preloadImage: true,
        autoplay: false,
        transition: 'fade',
        transitionDuration: 250,
        slides: [
            { src: 'https://i.imgur.com/KHKK0KVg.jpg' }, // 0
            { src: 'https://i.imgur.com/vewXVDt.jpg' }, // 1
            { src: 'https://i.imgur.com/B9IoM7w.jpg' }, // 2
            { src: 'https://i.imgur.com/uTLvfmo.jpg' }, // 3
            { src: 'https://i.imgur.com/BOPd2gY.jpg' }, // 4
            { src: 'https://i.imgur.com/XuB7zvw.jpg' } // 5
        ]
    });
    // ------------------------------------------------------ CONFIGURATOR START ------------------------------------------------------------
    function set_conf_bg(image_value) {
        $($confImg).vegas('jump', image_value);
    }
    exteriorMenuActive = true;
    if (exteriorMenuActive) {
    let isBlue = false,
        isCarkit = false;
    $('#changeColor').on('click', function() { // Работа кнопки для смены цвета автомобиля
        if (!isBlue) {
            if (!isBlue && !isCarkit) {
                set_conf_bg(1);
                isBlue = true;
            } else if (!isBlue && isCarkit) {
                set_conf_bg(3);
                isBlue = true;
            }
        } else if (isBlue) {
            if (isBlue && !isCarkit) {
                set_conf_bg(0);
                isBlue = false;
            } else if (isBlue && isCarkit) {
                set_conf_bg(2);
                isBlue = false;
            }
        }
    });
    $('#changeExterior').on('click', function() { // Работа кнопки для смены обвеса автомобиля
        if (!isCarkit) {
            if (!isCarkit && !isBlue) {
                set_conf_bg(2);
                isCarkit = true;
            } else if (isBlue && !isCarkit) {
                set_conf_bg(3);
                isCarkit = true;
            }
        } else if (isCarkit) {
            if (isCarkit && !isBlue) {
                set_conf_bg(0);
                isCarkit = false;
            } else if (isCarkit && isBlue) {
                set_conf_bg(1);
                isCarkit = false;
            }
        }
    });
      $('#toggleInterior').on('click', function() { exteriorMenuActive = false;})
    } else if (!exteriorMenuActive) {
      interiorChange = false;
      set_conf_bg(4);
      $('#toggleInterior').on('click', function() {
       if (interiorChange) {
         set_conf_bg(5);
         interiorChange = true;
       } else if (!interiorChange) {
         set_conf_bg(4);
         interiorChange = false;
       }
      });
       $('#changeExterior').on('click', function() {exteriorMenuActive = true;});
    }

* {margin: 0;padding: 0;}
#configurator {
  margin: auto;
  width: 70%px;
  height: 400px;
  background-color: #333333
}
.vegas-slide {
  width: 100% !important;
  height: 100% !important;
}
.vegas-slide-inner {
  width: 100% !important;
  height: 100% !important;
}

<button id="changeColor">Цвет</button>
<button id="changeExterior">Экстерьер</button>
<button id="toggleInterior">Интерьер</button>
<div style="color: red">Небольшой баг после того как вставил код в codepen, вместо замены фона он почемуто добавляет внизу новый блок с измененной картинкой, но суть вопроса думаю ясна</div>
<div id="configurator"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.js"></script>

БЛОГ НА HUSL

Не понимаю как реализовать функционал кнопки смены интерьера

Ответы (0 шт):