Menu
Slick plugin is great for carousels & testimonials. I am trying to use the center mode attribute of the slick carousel plugin. On their website the center mode (centerMode:true) shows the active slide to be bigger than the rest. But that is not happening! This is the slick sites url: http://kenwheeler.github.io/slick/
This is my code:
<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>
622
Finally found the answer on stack-overflow itself! Posting it here so that people seeing this question don't have to search it.
.slick-center {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
transform: scale(1.25);
}
The above will make the center slider bigger. You may have to adjust the padding though.
163
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With