2

I'm converting a psd file to html and I'm stuck here. Can someone show me a jQuery plugin with example code that can make a carousel with center focus and slider buttons like what is shown below?

This is the carousel ErrorHTML codejquery

2

slick is a jQuery responsive touch carousel.

Features

  • Fully responsive. Scales with its container.
  • Separate settings per breakpoint
  • Uses CSS3 when available. Fully functional when not.
  • Swipe enabled. Or disabled, if you prefer.
  • Desktop mouse dragging
  • Infinite looping.
  • Fully accessible with arrow key navigation
  • Add, remove, filter & unfilter slides
  • Autoplay, dots, arrows, callbacks, etc...

Center mode

In center mode the picture in the middle is larger than the other pictures on either side.

enter image description here

Center mode example code

$('.center').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});
| improve this answer | |
  • tks #karel but I wonder how to ajust its position – Ngọc Võ Jul 22 '16 at 8:43
  • I've follow its usage but it didn't work – Ngọc Võ Jul 22 '16 at 8:55
  • Save a copy of the code you used (in plain text, not a screenshot), the results that didn't work, and maybe make a screenshot to make it clearer what happened. Then ask about how to fix it in Stack Overflow Q&A, but you have to show some code or else the question will be off topic at Stack Overflow. good screenshot of the three black images. – karel Jul 22 '16 at 9:08
  • By the way. To use this plugin we must set (css) the position we want for each div first or the plugin automatically do that. (I've attached code and js above) – Ngọc Võ Jul 22 '16 at 9:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.