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?
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.
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
}
}
]
});
-
-
1. How do I position one image on top of another in HTML? 2. CSS z-index Property – karel Jul 22 '16 at 8:50
-
-
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
