首先,我为我糟糕的英语道歉。
我需要在我的网站上使用滑块。
这个滑块与其他滑块不同。
下面是点。我用圆圈突出显示了选中的点。当选择了光标时,滑块中的对象应该向图片中的方向移动。我很努力,但我做不到。
非常感谢你提前如果有人可以帮助。
鼻涕
$(".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" />
1条答案
按热度按时间olhwl3o21#
我已经在div中添加了
dir=rtl
,在carousel中添加了rtl: true
。但由于两个滑块共享相同的点和相同的事件,因此幻灯片编号会发生冲突。如果与幻灯片顺序无关,则无需担心