I was getting errors...

[jdarling74]

I'm working on updating the JS of a carousel component in AEM. You can set it to display more than 1 item at a time with a menu called PerView. There is also a value called "peek" that will display more of the images in the carousel on the edges (depending on the value)... my new line of code should be doing this:

// if perview is greater than 1, and breakpoint is 575, then set perview back to 1 and set peek to 100

Currently, nothing is happening with this first attempt

        if (perView > 1) {
            this.breakpoints = {
                575: {
                    perView: 1,
                    peek: 100
                }
            };
        } else {
            this.breakpoints = {};
        }

then i tried
this.breakpoints = (perView =< 1) ? {} : { 575: { perView: 1, peek: 100 } };

which throws build errors. any help would be welcome.

[jdarling74]

Credit goes to a coworker.

At the top, i had to declare "Breakpoints".

import Glide, { Controls, Breakpoints, Autoplay, Keyboard, Swipe } 
from '@glidejs/glide/dist/glide.modular.esm';

and then add Breakpoints to the module, I'm still getting used to the idea of JS as a thing that can reference modules

this.modules = {
        Controls: Controls,
        Breakpoints: Breakpoints, // added this
        Autoplay: Autoplay,
        Keyboard: Keyboard,
        Swipe: Swipe
    };

and then finally write out the statement that would do what I need

this.options = {
        type: props.cmpType,
        perView: Number.isNaN(perView) ? 1 : perView,
        autoplay: autoPlay ? cmpDelay : false,
        peek: 0,
        keyboard: true,
        animationDuration: 400,
        rewind: true,
        breakpoints: {
	    768: {
                perView: 3
            },
	    578: {
                perView: 1,
                peek: 125
            }
        }
    };