CODEWITHSUNDEEP
material-uiswiper.js
Jason Calk
Jason Calk

Reputation: 11

How to style Swiper in MUI

I am using Swiper in MUI and I am having trouble applying styling to "active" or "next"/"previous" slides. We aren't using a global css file for styling but MUI's theme based styling. I have been able to target some things like pagination bullets inline, but I am unable to target things like active slide. So this works...

<Swiper
        style={{
          // '--swiper-navigation-color': '#fff',
          '--swiper-pagination-color': 'red',
          '--swiper-pagination-bullet-inactive-color': 'black',
          '--swiper-pagination-bullet-inactive-opacity': '100%',
        }}

However when I try to add in something like

'--swiper-slide-active-opacity': '10%',

It isn't successfully applying the style. Normally something like this inside of an sx={{}} would work

'& .swiper-slide-active': {opacity:'10%'},

but since Swiper isn't an mui component I don't have that option. Do I need to style swiper in my theme? If so, can I get a quick example of that syntax? All of the examples I can find use standard CSS for styling.

I have also tried setting the effect to 'creative' and still get no effect.

effect: 'creative',
creativeEffect: {
    prev: {
       opacity: "10%",
    },
    next: {
       opacity: "10%",
    }
}

Upvotes: 0

Views: 1102

Answers (1)

Jason Calk
Jason Calk

Reputation: 11

So, I was able to get the native swiper "effect='creative'" method to work. I had neglected to import and apply all of the appropriate modules.

import 'swiper/css/effect-creative';
...
<Swiper
  grabCursor={true}
  effect="creative"
  creativeEffect={{
    prev: {
      translate: ['-100%', 0, 0],
      opacity: 0.4,
          },
    next: {
      translate: ['111%', 0, 0],
      opacity: 0.4,
          },
  }}
...
modules={[Navigation, Pagination, A11y, EffectCreative]}

Still a little limited as to what kinds of styling can get applied to the next and previous slides using Swiper's built in styling system, but a few functions later and I should get my desired result.

Upvotes: 0

Related Questions