Слайдер с синхронизированной навигацией

Question

Вот то, что я создал до сих пор: снимок экрана здесь

В основном вы начинаете с красного div слева с красным кружком, который активен справа. Например, когда вы нажимаете на синий круг, вы получаете div слева, чтобы стать синим, а затем синий круг становится активным, а красный круг становится неактивным. Вот как это выглядит после нажатия на синий круг: снимок экрана здесь

И, конечно, если вы нажмете на зеленый кружок, то div слева станет зеленым, если вы нажмете на черный кружок div слева становится черным.

Вот код:

$(document).ready(function(){
    $('#circle-2').click(function(){
        $(this).addClass('active-circle')
        $('#circle-1').removeClass('active-circle')
        $('#circle-3').removeClass('active-circle')
        $('#circle-4').removeClass('active-circle')
        $('.rect').removeClass('rect-1').removeClass('rect-3').removeClass('rect-4').addClass('rect-2')
    })

    $('#circle-1').click(function(){
        $(this).addClass('active-circle')
        $('#circle-2').removeClass('active-circle')
        $('#circle-3').removeClass('active-circle')
        $('#circle-4').removeClass('active-circle')
        $('.rect').removeClass('rect-2').removeClass('rect-3').removeClass('rect-4').addClass('rect-1')
    })

    $('#circle-3').click(function(){
        $(this).addClass('active-circle')
        $('#circle-1').removeClass('active-circle')
        $('#circle-2').removeClass('active-circle')
        $('#circle-4').removeClass('active-circle')
        $('.rect').removeClass('rect-1').removeClass('rect-2').removeClass('rect-4').addClass('rect-3')
    })

    $('#circle-4').click(function(){
        $(this).addClass('active-circle')
        $('#circle-1').removeClass('active-circle')
        $('#circle-2').removeClass('active-circle')
        $('#circle-3').removeClass('active-circle')
        $('.rect').removeClass('rect-1').removeClass('rect-2').removeClass('rect-3').addClass('rect-4')
    })
})

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.rect {
    height: 50vh;
    width: 100%;
}

.rect-1 {
    background: red;
}

.rect-2 {
    background: blue;
}

.rect-3 {
    background: green;
}

.rect-4 {
    background: black;
}

.circle {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: .25;
}

.circle-color-1 {
    background-color: red;
}

.circle-color-2 {
    background-color: blue;
}

.circle-color-3 {
    background-color: green;
}

.circle-color-4 {
    background-color: black;
}

.active-circle {
    opacity: 1;
}

    <div class="grid">
        <div class="rect rect-1">

        </div>
        <div class="circles-container">
            <div id="circle-1" class="circle circle-color-1 active-circle">Circle 1</div>
            <div id="circle-2" class="circle circle-color-2">Circle 2</div>
            <div id="circle-3" class="circle circle-color-3">Circle 3</div>
            <div id="circle-4" class="circle circle-color-4">Circle 4</div>
        </div>
    </div>
    <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous">
    </script>
    <script src="./index.js"></script>

Вот здесь я и борюсь. Я хочу, чтобы div слева менял цвет автоматически каждые 3 секунды, и, конечно же, кружки справа должны соответствовать этому. Итак, мы начинаем с того, что div слева является красным, а красный круг справа активным, и через 3 секунды div меняется на синий, а активный круг становится синим. В основном то, что у меня сейчас, но происходит автоматически, без необходимости нажимать на круги и сохранять функциональность щелчка.

Answer 1

Ваш первоочередной задачей, помимо достижения автоматического цикла c по элементам, является DRY повышение вашего кода. Учитывая, что все, что изменяется между несколькими обработчиками повторяющихся событий, - это класс, который вы добавляете, вы можете удалить атрибуты id и назначить элементам их общий класс .circle. Затем вы можете связать один обработчик событий, который работает для всех элементов и применяет класс к .rect, который хранится в атрибуте data каждого элемента.

Чтобы создать эффект цикла, вы можете использовать setInterval(), нацеленный на следующий элемент из того, который в настоящее время имеет .active-circle. Попробуйте это:

jQuery($ => {
  var $rect = $('.rect');
  var $circles = $('.circle').on('click', setActiveCircle);
  $circles.first().trigger('click');
  
  function setActiveCircle() {
    $circles.removeClass('active-circle');
    $(this).addClass('active-circle');
    $rect.removeClass('rect-1 rect-2 rect-3 rect-4').addClass($(this).data('rect'));
  }
  
  setInterval(function() {
    let $targetCircle = $circles.filter('.active-circle').next();
    if ($targetCircle.length === 0)
      $targetCircle = $circles.first();
      
    setActiveCircle.call($targetCircle);
  }, 3000);  
});

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.rect {
  height: 50vh;
  width: 100%;
}

.rect-1 { background: red; }
.rect-2 { background: blue; }
.rect-3 { background: green; }
.rect-4 { background: black; }

.circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  opacity: .25;
}

.circle-color-1 { background-color: red; }
.circle-color-2 { background-color: blue; }
.circle-color-3 { background-color: green; }
.circle-color-4 { background-color: black; }

.active-circle { opacity: 1; }

<div class="grid">
  <div class="rect"></div>
  <div class="circles-container">
    <div class="circle circle-color-1" data-rect="rect-1">Circle 1</div>
    <div class="circle circle-color-2" data-rect="rect-2">Circle 2</div>
    <div class="circle circle-color-3" data-rect="rect-3">Circle 3</div>
    <div class="circle circle-color-4" data-rect="rect-4">Circle 4</div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>