Food menu slider with an infinite loop - javascript

could you please help me to understand how to make slider I see in "our menu" section of https://livedemo00.template-help.com/wt_61177_v1/#undefined6 site with an infinite loop and same functions.

The exact slider you are looking for is a Slick Auto play slider which is just the auto play version of the example you have. Example code.
$('.autoplay').slick({
slidesToShow: 5, //The amount of slides to be in view at any given time
slidesToScroll: 1, // The amount of slides to scroll on click or auto scoll
autoplay: true, // Sets the slider to automatically slide through the slides
autoplaySpeed: 2000, // The interval between sliding between slides
});
Example image of slider on slicks website:

Related

Slick slider/carousel: Allow scrolling without

Is there a way to let users scroll free inside a slick slider without jumping back to an element?
At the moment I can only scroll from one slider item to the next. I want to allow scrolling like in a browser with the mouse or by dragging the elements.
I found the option swipeToSlide which allows users to drag or swipe directly to a slide irrespective of slidesToScroll.
That's nice but not a free scrolling with the mouse.
Is there any solution to to that?
Here's my current slick code:
$('.multiple-items').slick({
infinite: true,
swipeToSlide: true,
slidesToShow: 3,
slidesToScroll: 3
});
Working example
I found myself in this question as i'm trying to achieve the exact same functionality as the one you describe.
I found a way to enable mouse wheell scrolling but NOT free scrolling. So when you rotate your mouse wheel up it goes to the next slide and when you rotate your mouse wheel down it goes to the previous slide.
The code for this functionality is the following:
$('.multiple-items').on('wheel', (function(e) {
e.preventDefault();
if (e.originalEvent.deltaY < 0) {
$(this).slick('slickPrev');
}else {
$(this).slick('slickNext');
}
}));
Have you managed to achieve the free scrolling?

SlickJS vertically aligned slides on load but on interaction with arrows fix the layout

I have created a demo to show my problem. When you go to the contact section you will see all the slickJS slide stack vertically but as soon as you click on the arrow or slide the content or interact with any slide, it fixes itself.
Problem appears only on load.
Here is the demo codepen
$(".demo-slider").slick({
slidesToShow: 4,
slideToScroll:1,
infinite: true,
arrow:true
});
I fixed the issue by triggering slick.js' refresh event when the contact tab is shown, like this:
$(".demo-slider").slick({
slidesToShow: 4,
slideToScroll:1,
infinite: true,
arrow:true
});
$('#nav-contact-tab').on('shown.bs.tab', function (e) {
$('.demo-slider').slick('refresh');
});
You can see my fork in codepen.

slick.js carousel not initializing in tabs

slick.js carousel won't initialize in second tab. When I open the second tab the main video does not show until I click the dots.
I tried using $(videoSlider).slick('setPosition'); and also added .each function which does work but not if sliders are in the tabs. If I have numerous carousels on a page they function prooperly. It is only when put in tabs it does not work.
// initialize slick sliders
$(videoSlider).each(function() {
$(this).slick({
arrows: false,
dots: true,
infinite: true,
speed: 500, slidesToShow: 1,
slidesToScroll: 1
});
});
Carousel will work in tabs as it does when out of tabs
An issue that stands out is in your selector for videoSlider. This needs to be a string value and should most likely be '.videoSlider' to match a class used in your markup.
You may also run into an issue if you initialize a slideshow while it's hidden in a tab. In this case, Slick has trouble determining the slide width and assigns a width of '0px' to each slide. You can overcome this issue by refreshing your slideshow when you reveal your tab's contents. For instance, if your slideshow has id="slideshow1":
$("#slideshow1").slick("refresh");
More information about the hidden slideshow issue: https://github.com/kenwheeler/slick/issues/235

Slick-center not working when number of slides is a not a multiple of 3 or less than six with slidesToScroll = 3

I have given some margin top to my slick-center class.I want the slick slider to scroll 3 slides at once.These are my slider settings :
$(".center").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 3
});
$(".center").slick('slickSetOption', 'slidesToScroll', 3, true);
});
As slidesToScroll does not work with centerMode ,I'm using slickSetOption to force it to work with scrolling three slides at once.
The issue: This slick-center styling works perfectly fine when the number of slides in my slider are in multiples of 3.But whenever the number of slides are 4,5 .. or any non three multiple,the slick slider doesn't append the correct slide with the slick-center class.
This is my codepen :- https://codepen.io/shivanit2/pen/zLwzbR
Currently there are 8 slides in my codepen,and you can see how its not giving the correct styling .(if you scroll on the third slick-dot)
If you increase 1 slide,it will work perfectly.(multiple of 3's)
How can I resolve this issue?

Disable next/prev partial view in center mode slick slider

I want to use center mode in slick slider but need to avoid partial prev/next slides. (Just show the three main divs only)
My settings is like this,
$('.framefitFacelist').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true,
infinite: false,
centerMode: true
});
Thanks.
Hi you can change this with javascript. You have to set the opacity of the partial slides to 0;
Essentially you can create a variable and set prev and next slide opacity to 0 when concatenating css and then call the beforeChange slick event.
I found this fiddle that seems to achieve what you are looking for.
test it out
https://jsfiddle.net/yassarikhan786/uwgjx6nv/

Categories

Resources