center mode slick zoom testing
<p><strong> update : this is a tricky one to get working!</strong></p>
<p><strong><img src="https://i.imgur.com/wDTdtzt.gif" /></strong></p>
<p>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. </p>
<p>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. </p>
<p>Its still not as styled as i would like but the basics are there. </p>
<p> </p>
<h2>Cover Flow Carousel</h2>
<p>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. </p>
<p><a href="https://codepen.io/Tenderfeel/pen/xJoVWw">https://codepen.io/Tenderfeel/pen/xJoVWw</a></p>
<p><a href="https://www.cssscript.com/demo/flip-element-carousel/">Cover Flow Carousel Example</a></p>
<p><img src="https://i.imgur.com/QUKz5JX.png" alt="" width="907" height="482" /></p>
<p>this seems very limited, it looks good on the outside but its very specific code to work with one img only</p>
<p>Center Mode Slick :</p>
<p><a href="https://codepen.io/smjuber/pen/gdygbw">https://codepen.io/smjuber/pen/gdygbw</a></p>
<p>This one seems nicer and has a zoom</p>
<p><a href="https://codepen.io/nixxwins/pen/dBdJwQ">https://codepen.io/nixxwins/pen/dBdJwQ</a></p>
<p>only has 3 items viewable</p>
<p><a href="https://stackoverflow.com/questions/55465047/infinite-carousel-with-magnific-zooming-effect">Infinite carousel with magnific zooming effect</a></p>
<p><a href="https://stackoverflow.com/questions/28950755/stuck-with-slick-carousel-center-mode">Stuck with Slick Carousel "Center mode"</a></p>
<p>This one almost works!</p>
<p><a href="https://stackoverflow.com/questions/42000555/slick-carousel-want-center-slider-bigger-than-others">Slick carousel - Want center slider bigger than others</a></p>
<h3>Slick Center Test External Link</h3>
<p>This one actually works, the animations are a bit off. </p>
<p><a href="https://kruxor.com/html/slickcentertest.html" target="blank" rel="noopener">https://kruxor.com/html/slickcenter_test.html</a></p>
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
}
}
]
});
});View Statistics
Add Comment
Other Items in javascript
Related Search Terms
Other Categories in Code
