center mode slick zoom testing
update : this is a tricky one to get working!
I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its a working example.
I will include a list of links that i found that were related to the center mode slick carousel. I think my initial research was just links, but as i continued i have been able to get a working demo from a combination of these links.
Its still not as styled as i would like but the basics are there.
Cover Flow Carousel
I found this one 1st and its not a slick carousel but rather a custom script that is not very flexable, it seems set to use images only and they all need to be the same size or it throws the carousel off, If you have a bunch of the same width images and are using a somewhat fixed layout then this one might be good for you.
https://codepen.io/Tenderfeel/pen/xJoVWw
this seems very limited, it looks good on the outside but its very specific code to work with one img only
Center Mode Slick :
https://codepen.io/smjuber/pen/gdygbw
This one seems nicer and has a zoom
https://codepen.io/nixxwins/pen/dBdJwQ
only has 3 items viewable
Infinite carousel with magnific zooming effect
Stuck with Slick Carousel "Center mode"
This one almost works!
Slick carousel - Want center slider bigger than others
Slick Center Test External Link
This one actually works, the animations are a bit off.
center mode slick zoom testing Demo
View Demo Full Screen View Demo New Tab
center mode slick zoom testing Code
HTML
<!--
** This is currently broken, i think maybe due to bootstrap styles or slider styles effecting this demo. check out the external link for a working example.
-->
<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>
</section>CSS
.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;
}
.slick-center {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
transform: scale(1.25);
margin-top: -16px;
}
.slick-list {
padding:45px 60px !important;
margin-left:30px !important;
}Scripts
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />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
}
}
]
});
});