gpt4 book ai didi

CSS - 与自动播放同步的 Slick Slider

转载 作者:太空宇宙 更新时间:2023-11-04 00:36:53 25 4
gpt4 key购买 nike

<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
<style>
a {
background-color: yellow;
display: block;
margin: 10px;
width: 150px;
height: 150px;
}
.d1 {
background-color: yellow;
padding: 5px;
}
.d2 {
background-color: lightblue;
display: flex;
padding: 10px;
}
</style>
</head>
<body>

<div class="slider-for d1">
<div><a href="https://kenwheeler.github.io/slick/">1</a></div>
</div>

<div class="slider-nav d2">
<div><a href="https://kenwheeler.github.io/slick/">1</a></div>
<div><a href="https://kenwheeler.github.io/slick/">2</a></div>
<div><a href="https://kenwheeler.github.io/slick/">3</a></div>
<div><a href="https://kenwheeler.github.io/slick/">4</a></div>
</div>

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

<script type="text/javascript">
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
autoplay: true,
slidesToShow: 4,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
</script>

</body>
</html>

我正在尝试从光滑的旋转木马 ( https://kenwheeler.github.io/slick/ ) 和 autoplay: true 中插入 Slider Syncing 示例,但到目前为止没有取得太大成功。上面的代码一开始对我来说似乎是正确的,但我不知道在哪里包含 autoplay: on。我尝试将其添加到 slider-forslider-nav 或两者中,但似乎都不起作用...

最佳答案

你需要在slidesToShow(脚本代码)中添加多给的幻灯片尝试用您的 HTML 代码替换它

<div class="slider-for d1">
<div><a href="https://kenwheeler.github.io/slick/">1</a></div>
<div><a href="https://kenwheeler.github.io/slick/">2</a></div>
</div>

<div class="slider-nav d2">
<div><a href="https://kenwheeler.github.io/slick/">1</a></div>
<div><a href="https://kenwheeler.github.io/slick/">2</a></div>
<div><a href="https://kenwheeler.github.io/slick/">3</a></div>
<div><a href="https://kenwheeler.github.io/slick/">4</a></div>
<div><a href="https://kenwheeler.github.io/slick/">5</a></div>
</div>

您可以在这里查看您的代码:https://codepen.io/rvtech/pen/dyPoxPm

关于CSS - 与自动播放同步的 Slick Slider,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59208290/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com