hi thank you for your tutorial, the first method works into a slider without loop ? If i want put some logos to create infinite auto scroll with image does-it work ?
Quick Qestion: I have the issue that the slide elements dont slide as soon as i point on the script witht the ID at the slider. Instetd the elements just look like simple divs grouped on the page. Some ideas why it might happen? Thanks!
@@OscarObians Hey Oscar, thanks for the quick reply and the great tutorial. I had a classic nestable slider with images inside, no query loop. I solved the issue. I found out... with the help of GPT, that your code on step one under the link you provided is having a typo in the word splide there is an "l" missing. :)
You can infact control the mobile version by adding breakpoints statements to the json settings. Here's an example: { "type": "slide", "direction": "ltr", "keyboard": "global", "height": "clamp(33.768rem,5.824vw+31.904rem,39.359rem)", "gap": "var(--content-gap)", "padding": { "left": 0, "right": "var(--space-m)" }, "start": 0, "perPage": 3, "perMove": 1, "speed": 400, "interval": 3000, "autoHeight": false, "autoplay": false, "pauseOnHover": false, "pauseOnFocus": false, "arrows": false, "pagination": false, "mediaQuery": "max", "breakpoints": { "767": { "perPage": "2" }, "478": { "perPage": "1" } } } Each breakpoint can have its own individual settings. In this case, I only needed to control the number of slides to show per page.
Great!!! thanks!
Fantastic! This is exactly what I needed! Thank you so much!
hi thank you for your tutorial, the first method works into a slider without loop ? If i want put some logos to create infinite auto scroll with image does-it work ?
@@virtuoseweb Thanks for watching. Sure you can do it with logos. But you have to set it to loop if you want it to scroll infinitely
Quick Qestion: I have the issue that the slide elements dont slide as soon as i point on the script witht the ID at the slider. Instetd the elements just look like simple divs grouped on the page. Some ideas why it might happen?
Thanks!
Might have something to do with the structure of your slider. Are you using a query loop? Where did you apply the query loop?
@@OscarObians Hey Oscar, thanks for the quick reply and the great tutorial. I had a classic nestable slider with images inside, no query loop. I solved the issue. I found out... with the help of GPT, that your code on step one under the link you provided is having a typo in the word splide there is an "l" missing. :)
@@romanlevytskyj8625 Ah! Thanks for the pointer. I'll update it
is nice on desktop but you can't control the mobile version
You can infact control the mobile version by adding breakpoints statements to the json settings. Here's an example:
{
"type": "slide",
"direction": "ltr",
"keyboard": "global",
"height": "clamp(33.768rem,5.824vw+31.904rem,39.359rem)",
"gap": "var(--content-gap)",
"padding": {
"left": 0,
"right": "var(--space-m)"
},
"start": 0,
"perPage": 3,
"perMove": 1,
"speed": 400,
"interval": 3000,
"autoHeight": false,
"autoplay": false,
"pauseOnHover": false,
"pauseOnFocus": false,
"arrows": false,
"pagination": false,
"mediaQuery": "max",
"breakpoints": {
"767": {
"perPage": "2"
},
"478": {
"perPage": "1"
}
}
}
Each breakpoint can have its own individual settings. In this case, I only needed to control the number of slides to show per page.