卡在光滑的轮播“中心模式"中 [英] Stuck with Slick Carousel "Center mode"
本文介绍了卡在光滑的轮播“中心模式"中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我一直在玩Slick轮播好几个小时了,真的无法理解如何实现Slick网站上的中心模式":
I've been toying around with Slick carousel for a fair few hours, and really can't get my head around how to implement the "center mode" that's on the Slick website: http://kenwheeler.github.io/slick/
它看起来像这样:
我已经安装了当前代码,但是仍然不能满足我的需求:
I've got the current code in place, but it's still not giving me what I want:
< link rel = "stylesheet"
type = "text/css"
href = "http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" >
< script type = "text/javascript"
src = "http://code.jquery.com/jquery-1.11.0.min.js" > < /script>
<link rel="stylesheet" type="text/css
" href="
http: //kenwheeler.github.io/slick/css/style.css">
< script type = "text/javascript"
src = "http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js" > < /script>
<script type="text/javascript
">
$(document).ready(function() {
$('.center').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
$('.single-item').slick({
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
});
});
</script>
<section id="
features " class="
blue ">
<div class="
center ">
<div class="
content ">
<div class="
single - item ">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
</div>
</div>
</section>
如果有人对为什么这样做不起作用有任何建议,我将非常感谢您的帮助.
If anyone has any suggestions as to why this might not be working, I'd really appreciate the help.
谢谢.
推荐答案
- 您定义了2个滑块(中心,单个项目),而在html中,只有单个项目"具有幻灯片.中心"幻灯片包裹着单个项目",并且仅包含一个子div.
- 该类单项用空格编写,使其成为3个不同的类单",-"(尽管我不认为这是一类)和项目".
如果您打算使单项"幻灯片在centerMode中显示,那么这是正确的代码:
If you intended to make the "single-item" slide to show in centerMode then this is the right code:
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" />
< script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js" > </script>
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/style.css" />
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$('.single-item').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
</script>
<section id="features" class="blue">
<div class="content">
<div class="single-item">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
<div><h3>6</h3></div>
</div>
</div>
</section>
这篇关于卡在光滑的轮播“中心模式"中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文