gpt4 book ai didi

javascript - 光滑的旋转木马 - 希望中心 slider 比其他 slider 更大

转载 作者:行者123 更新时间:2023-12-01 00:36:56 25 4
gpt4 key购买 nike

Slick 插件非常适合轮播和推荐。我正在尝试使用光滑的轮播插件的中心模式属性。在他们的网站上,中心模式 (centerMode:true) 显示事件幻灯片比其他幻灯片大。但这并没有发生!这是光滑的网站网址:http://kenwheeler.github.io/slick/

这是我的代码:

<html>
<head>
<meta charset="utf-8">
<title>Youg Desai</title>
<link rel="stylesheet" href="js/slick/slick.css">
<link rel="stylesheet" href="js/slick/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 src="js/jquery-1.11.2.min.js"></script>
<script src="js/slick/slick.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>

最佳答案

终于在堆栈溢出本身上找到了答案!将其发布在这里,以便看到此问题的人不必搜索它。

.slick-center {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
transform: scale(1.25);
}

以上将使中心 slider 变大。不过,您可能需要调整填充。

关于javascript - 光滑的旋转木马 - 希望中心 slider 比其他 slider 更大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42000555/

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