Can i add custom classes on active slider of Splide slider

76 Views Asked by At

I am using splide slider with next.js typescript and tailwind and for active slider i want to show border bottom as there are total 6 slides and at a time one will be active.

So this is possible to add active slide a class of tailwind from options

I tried this but not working

options={{
            type: 'slide',
            classes: {
              active: 'krushnaa',
            },
            arrows: false,
            pagination: false,
            gap: '20px',
            perPage: 6,
            breakpoints: {
              1024: {
                perPage: 6,
              },
              1023: {
                perPage: 1,
              },
            },
          }}
1

There are 1 best solutions below

0
Krushna On

Yes you can pass classes to splide slider like this, for arrow and navigation not for active scenario

options={{
            type: 'slide',
            arrows: false,
            pagination: false,
            gap: '20px',
            perPage: 6,
            breakpoints: {
              1024: {
                perPage: 6,
              },
              1023: {
                arrows: true,
                perPage: 1,
                gap: '16px',
              },
            },
            classes: {
              prev: 'splide__arrow--prev slider-arrow slider-prev',
              next: 'splide__arrow--next slider-arrow slider-next',
            },
          }}