Carousel Direction

First of all, I apologize for my bad English.

I need to use slider on my site.

This slider is different from others.

Below are the points. I highlighted the selected point in circle. When the unselected ones are selected, the objects in the slider should shift to the direction in the picture. I tried hard but I couldn't do it.

Thank you very much in advance if anyone can help.

Snippet

$(".slider").slick({
  asNavFor: '.deneme',
  slidesToShow: 3,
  slidesToScroll: 1,
  swipeToSlide: true,
  arrows: true,
  dots: false
});

$(".deneme").slick({
  asNavFor: '.slider',
  slidesToShow: 5,
  slidesToScroll: 1,
  draggable: true,
  infinite: true,
  swipeToSlide: true,
  verticalSwiping: true,
  centerMode: false,
  arrows: false,
  dots: true
});

.slick-slide {
  min-height: 50px;
  min-width: 50px;
  border: thin solid lightgray;
  padding: 0.5rem;
}

<title>Didar Yanar Akademi | Site Slogan</title>
<main>
  <section class="education-section">
    <div class="container">
      <div class="row">
        <div class="slider">
          <div>Slide 1</div>
          <div>Slide 2</div>
          <div>Slide 3</div>
          <div>Slide 4</div>
          <div>Slide 5</div>
          <div>Slide 6</div>
          <div>Slide 7</div>
          <div>Slide 8</div>
          <div>Slide 9</div>
          <div>Slide 10</div>
          <div>Slide 11</div>
          <div>Slide 12</div>
        </div>

        <div class="deneme mb-5 pb-5">
          <div>Slide 1</div>
          <div>Slide 2</div>
          <div>Slide 3</div>
          <div>Slide 4</div>
          <div>Slide 5</div>
          <div>Slide 6</div>
          <div>Slide 7</div>
          <div>Slide 8</div>
          <div>Slide 9</div>
          <div>Slide 10</div>
          <div>Slide 11</div>
          <div>Slide 12</div>
        </div>

      </div>
    </div>
  </section>
</main>

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- Bootstrap 5 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Slick Carousel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />

Solution

I have added dir=rtl to div and rtl: true to that carousel. But as both the slider share same dots and same events, there would be conficts in the slide numbers. No need to worry if it is irrelevant to order of slides

$(".slider").slick({
  asNavFor: '.deneme',
  slidesToShow: 3,
  slidesToScroll: 1,
  swipeToSlide: true,
  arrows: true,
  dots: false
});

$(".deneme").slick({
  asNavFor: '.slider',
  slidesToShow: 5,
  slidesToScroll: 1,
  draggable: true,
  infinite: true,
  swipeToSlide: true,
  verticalSwiping: true,
  centerMode: false,
  arrows: false,
  dots: true,
  rtl: true
});

.slick-slide {
  min-height: 50px;
  min-width: 50px;
  border: thin solid lightgray;
  padding: 0.5rem;
}

<title>Didar Yanar Akademi | Site Slogan</title>
<main>
  <section class="education-section">
    <div class="container">
      <div class="row">
        <div class="slider">
          <div>Slide 1</div>
          <div>Slide 2</div>
          <div>Slide 3</div>
          <div>Slide 4</div>
          <div>Slide 5</div>
          <div>Slide 6</div>
          <div>Slide 7</div>
          <div>Slide 8</div>
          <div>Slide 9</div>
          <div>Slide 10</div>
          <div>Slide 11</div>
          <div>Slide 12</div>
        </div>

        <div class="deneme mb-5 pb-5" dir="rtl">
          <div>Slide 1</div>
          <div>Slide 2</div>
          <div>Slide 3</div>
          <div>Slide 4</div>
          <div>Slide 5</div>
          <div>Slide 6</div>
          <div>Slide 7</div>
          <div>Slide 8</div>
          <div>Slide 9</div>
          <div>Slide 10</div>
          <div>Slide 11</div>
          <div>Slide 12</div>
        </div>

      </div>
    </div>
  </section>
</main>

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- Bootstrap 5 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Slick Carousel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />