Splide js custom code for specific breakpoints

[Justyna_Sieczka]

Hey guys!

In my webside I use splide js. By default, it has breakpoint 767 px so the slider displays 1.5 slides on mobile instead of 3.5 like on desktop.

I’d like to modify the code but I guess I’m doing something wrong (still learning js). I’d very much appreciate your help with setting another breakpoint 991-768px (tablet view) where the slider displays 2.5 slides.

A piece of my code regarding this case:

new Splide( '.splide', {
	gap: 16,
	perPage: 3.5,
	perMove: 1,
    type: 'loop',
	focus: 'center',
    breakpoints: {
		767: {
			perPage: 1.5,
    }
  }

Here’s a screenshot from splidejs documentation

---

Here is my site Read-Only: LINK

[memetican (Michael Wells)]

Hi Justyna, is that all of the code?
Because your example above is not closed; at the very bottom you need a });

If that’s not it, share your readonly site link, and a published site link as well, and I’ll have a look.

[Stan (justAnotherDeveloper)]

hi @Justyna_Sieczka your breakpoint is working fine on 767 Adding another breakpoint is easy by adding it to Object. Don’t forget that these key /value pairs are comma-separated.

breakpoints: {
  767: {
    perPage: 1.5,
  },
  991: {
    perPage: 2.5,
  }

When you request help that includes JS never forget to add a link to the live page.

https://justynasieczkaphoto.webflow.io

[Justyna_Sieczka]

Will do!

Thanks for helping me out with the syntax. Apparently, I forgot a comma - the reason it was not working properly