Posted in javascript
1581
5:17 am, August 10, 2021

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

Cover Flow Carousel Example

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. 

https://kruxor.com/html/slick_center_test.html

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
      }
    }
  ]
});
    });
1
2
3
4
5
6

View Statistics
This Week
52
This Month
233
This Year
233

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in javascript
video not auto playing issue in chrome and brave change the box-shadow of an element with javascript boxShadow change the background color of an element with javascript adding a new line in javascript javascript update item in object change the border radius of an element with javascript only change padding of element with javascript get the value from a range input field with javascript twitter json feed testing center mode slick zoom testing gallery carousel center mode old browser check with javascript check browser version and show a message using clamp js to clamp lines of text add a gtag.js pdf click event ajax callback to delete with sweet alert confirmation to make it cool! 😎 prevent default click event on link show the browsers name in javascript json test objects (or arrays) loop through a complex object json javascript load json with vanilla javascript no jquery set active class based on url value check if a variable is undefined or NULL fancybox image popout easy check box highlight text area css validate an email address from a form field - version 2 check if a checkbox is checked with javascript form submit override with javascript submit a form with javascript onclick dropdown change input box on select Slick Slider Carousel with Fade Transition clear a input field when it looses focus using onblur javascript page redirect page scroll indicator research replacement slider for ken wheeler's slick carousel tiny slider 2 [testing] change a select box back to its initial select value select onchange add years as options to select dropdown using moment.js to make your time format nicer loop through object json javascript set the html of an element javascript get the value of an input form element (input value) minutes to decimal calculator javascript version check if a certain query string is set then apply it to all url's on the page check if a query string item is set in the current url append a query string to all url's on a page slick carousel jump to a slide on element hover Adding HTML Templates into TinyMCE Editor How to set a cookie and expire it in 30 days enable dark mode in tinymce
Related Search Terms
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!

❤👩‍💻🕹

Random Quote

“Make no mistake: This is not your diary. You are not letting it all hang out. You are picking and choosing every single word.”


Dani Shapiro