个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
25
4
我已经研究了 Slick carousel 好几个小时了，我真的不知道如何实现 Slick 网站上的“中心模式”:http://kenwheeler.github.io/slick/
看起来像这样:
我已经准备好当前代码，但它仍然没有给我想要的东西:
< 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>如果有人对这可能不起作用的原因有任何建议，我将非常感谢您的帮助。
谢谢。
最佳答案
我认为这可能是 slick center 模式的合适答案
<html>
<head>
<meta charset="utf-8">
<title>Maganti IT Solution</title>
<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>
</head>
<style>
.slick-center .slide-h3{
color: #FFF;
}
.slider{
width: 600px;
height:150px;
margin: 20px auto;
text-align: center;
}
.slide-h3{
margin: 10% 0 10% 0;
padding: 40% 20%;
background: #008ed6;
}
.slider div{
margin-right: 5px;
}
.slick-slide{
opacity: .6;
}
.slick-center{
display: block;
max-width: 10% !important;
max-height:20% !important;
opacity: 1;
}
</style>
<body>
<section id="slick-content">
<div class="slider">
<div><div class="slide-h3">1</div></div>
<div><div class="slide-h3">2</div></div>
<div><div class="slide-h3">3</div></div>
<div><div class="slide-h3">4</div></div>
<div><div class="slide-h3">5</div></div>
<div><div class="slide-h3">6</div></div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
speed:1500,
index: 2,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});
</script>
</body>
</html>
关于javascript - 卡在 Slick Carousel "Center mode"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28950755/
25
4
0
这是非常非常令人沮丧的。一段时间以来，我一直在尝试使用 Slick，但障碍不断涌现。 Slick 的概念真的很棒，但是很难学，而且不像Scala，它没有“初学者”、“中级”和“高级”风格，各个阶段的人
我在 Event 上定义了一个可选的外键，它转到 EventType。我想查询所有事件，即使是那些具有 None (null) 事件类型的事件。这是在 Event 上定义的外键。 def eventT
Another question通过在“一”案例类 (Directorate) 中定义一个返回“多”类的 Seq 的方法来回答如何定义一对多关联(服务区)。但它没有解决问题的“双向”部分。 使用该示例
我有一个向表中添加日期列的要求，默认值是由 oracle 的 sysdate 设置的，如下所示 例子{...CREATED_ON DATE 默认系统日期 我想使用 slick table ddl 创建
当我设置 speed: 1000 , pauseOnHover工作正常，但一旦我将其设置为 speed: 10000 , pauseOnHover不能立即工作 - 它在几秒钟后工作。 代码: $('#
我正在 try catch Slick 3.x 中的 SQL 错误。下面的代码不打印任何内容，但如果在调试下跟踪，它工作正常(它打印失败)。这段代码有什么问题？ object TestSlick ex
我正在 try catch Slick 3.x 中的 SQL 错误。下面的代码不打印任何内容，但如果在调试下跟踪，它工作正常(它打印失败)。这段代码有什么问题？ object TestSlick ex
我一直在使用 Slick's insertOrUpdate since its release in 2.1版本没有任何问题。 现在我正在尝试提高我的代码性能，而 insertOrUpdate 是瓶颈
我有一个列类型为日期的表。此列接受空值，因此，我将其声明为一个选项(请参阅下面的字段 perDate)。问题显然是从/到 java.time.LocalDate 的隐式转换/java.sql.Date
我试图在拖动幻灯片时向 a 标签添加“slick active”类。该类在单击时应用，但无法弄清楚如何将其应用到其他类! 如果能帮助破译我的代码，我们将不胜感激! JS $(document).rea
我有透明背景的 slider ，我想在悬停中心 div 时为 slider 背景制作动画，但在 slider 移动后，悬停效果会卡在所有以前具有“光滑中心”类的幻灯片上。任何建议如何解决它？ Sp 到
我使用 Slick 3.1 代码生成器来创建默认对象和特征 Tables.scala 下面的方法有效，但我想隐式或显式地将 UserRow 和 PasswordsRow 转换为 User 和 User
我正在使用 Slick Slider 和 Slider Syncing 选项。是否可以滚动“缩略图”(示例中为 .slider-nav)而不更改主图像(示例中为 .slider-for)？ 我只想在您
似乎 vue-slick 还没有提供任何事件(afterChange、beforeChange、Swipe...)。就像 jQuery 版本一样。 我应该使用 MutationObserver 来监听
问题 我正在 WordPress 网站上设置一个灵活的 slider /轮播。一切工作/显示都很完美，但是 slider 已停止正确拖动。 我仍然可以用鼠标物理拖动 slider ，它会按应有的方式进
我正在尝试使用 slick 库实现 slider 同步。我有一组来自后端的名为 pictures 的图像。我遍历这些图像，将它们填充到我的 slider-for 和 slider-nav div 下。
不知何故，我无法正确使用 slick carousel ( http://kenwheeler.github.io/slick/ )。 我收到以下错误: Uncaught TypeError: $(.
我正在使用 AOS 在滚动条上显示 html 元素。它单独运行良好，但当我在包含 Slick slider 的页面上使用它时，应用 AOS 的元素不显示。元素被隐藏，如果有很多滚动，看起来浏览器向 A
我正在使用 AOS 在滚动条上显示 html 元素。它单独运行良好，但当我在包含 Slick slider 的页面上使用它时，应用 AOS 的元素不显示。元素被隐藏，如果有很多滚动，看起来浏览器向 A
在我测试slick.js 前端 slider 插件时，我发现在Chrome 浏览器中，有时导航点在class ".slick-dots li button:before" 突然变了 来自 内容:'•'
我是一名优秀的程序员,十分优秀！