jquery 腕关节方向

bz4sfanl  于 2023-11-17  发布在  jQuery
关注(0)|答案(1)|浏览(142)

首先,我为我糟糕的英语道歉。
我需要在我的网站上使用滑块。
这个滑块与其他滑块不同。
下面是点。我用圆圈突出显示了选中的点。当选择了光标时,滑块中的对象应该向图片中的方向移动。我很努力,但我做不到。
非常感谢你提前如果有人可以帮助。

鼻涕

$(".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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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" />
olhwl3o2

olhwl3o21#

我已经在div中添加了dir=rtl,在carousel中添加了rtl: true。但由于两个滑块共享相同的点和相同的事件,因此幻灯片编号会发生冲突。如果与幻灯片顺序无关,则无需担心

$(".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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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" />

相关问题