Customizing Swiper in Vue 3

Question

I have a simple, functional swiper working in Vue 3 with Swiper.js 8.4.5 working off these Vue examples (sans scrollbar and A11y). As shown, everything appears to be working as intended.

    <TileFormat>
      <div style="width: 100%; height: 100%; display: flex">
        <swiper
          :modules="modules"
          :slides-per-view="1"
          :space-between="50"
          navigation
          :pagination="{ clickable: true }"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
          <swiper-slide>Slide 1</swiper-slide>
          <swiper-slide>Slide 2</swiper-slide>
          <swiper-slide>Slide 3</swiper-slide>
        </swiper>
      </div>
    </TileFormat>

    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar],
      };
    },

I would like to modify elements of the Navigation param (size, color, etc.) but have been unable to find a way to accomplish that. I have done this mostly with attempts to modify the css within the scoped style block of the view (which are ignored or overwritten). I've even tried skipping import 'swiper/css/navigation'; and rolling my own, but that doesn't work either. The examples of similar changes I can find seem to apply to versions of Swiper.js that aren't written for Vue 3.

The Swiper.js docs say:

Note, Swiper Vue.js component will create required elements for Navigation, Pagination and Scrollbar if you pass these params without specifying its elements (e.g. without navigation.nextEl, pagination.el, etc.)

I have come to the quasi-conclusion that I need to add my changes to the Navigation module within the setup() method before passing it; however, I can't seem to locate an example of how to do that.

What is the "most robust" way to modify Swiper components in Vue 3?

EDIT 1: By the way, this approach was also unsuccessful:

:navigation="{enabled: true, prevEl: '.myPrev', nextEl: '.myNext'}"

score 1 · Answer 1 · answered Dec 10 '22 at 03:18

1

Usually, to be able to customize any kind of UI components (it being something like Bootstrap or a UI package), you use:

an increased specificity, hence why the ID is working in your case
an element as deep as you can, if you want to go further you can use :deep
the usage of !important may be overkill but that one is a good case to override such projects

answered Dec 10 '22 at 03:18

kissu

40,416
14
65
133

Cheers. Thanks for taking the time. In this case, I had tried `:root` and `!important`; neither of which worked (I hadn't tried `:deep`). Many examples said a custom class would work, but that didn't work either. – DaveL17 Dec 10 '22 at 04:08
@DaveL17 `:root` is maybe when you have a shadow DOM with the component. I never had to use it myself. You mainly need to inspect the DOM with your devtools to find out which element to customize and use `deep` to target it properly. Worked everytime for me. – kissu Dec 10 '22 at 11:01
Thanks again. Maybe I misunderstood what :root was doing. I thought it preceded `:before`. Looks like I need to do more reading. BRB. ["In HTML, :root represents the element and is identical to the selector html, except that its specificity is higher."](https://developer.mozilla.org/en-US/docs/Web/CSS/:root). It appears that there are several things higher than `:root` which is probably why it didn't work in this instance. I do use dev tools but couldn't spot the issue here for some reason. – DaveL17 Dec 10 '22 at 12:37
@DaveL17 the thing is you don't need to use `:root` or `html` as a CSS selectors but rather something more specific. Closer to your swiper. If you have a public github repo or a codesandbox, we could find out what is missing. – kissu Dec 10 '22 at 13:29
Thanks very much -- I really do appreciate the offer. The issue I was having in the OP is no longer an issue and I'm on my way to understanding why. The underlying project is a personal learning exercise and I *am* learning (thanks in part to your help). Now I'm off to try to figure out why the Swiper cube effect isn't cubing. :o) – DaveL17 Dec 10 '22 at 19:06

score 0 · Answer 2 · answered Dec 09 '22 at 22:07

Using an id instead of a class allowed me to customize the slider object (it still needs a lot of work). There may also be a specific class reference that will work, but the options I tried were ignored (or overwritten).

    <TileFormat>
      <div style="width: 100%; height: 100%; display: flex;">
        <swiper
          :modules="modules"
          :slides-per-view="1"
          :space-between="50"
          navigation
          :pagination="{ clickable: true }"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
          id="mySlider"
        >
          <swiper-slide>Slide 1</swiper-slide>
          <swiper-slide>Slide 2</swiper-slide>
          <swiper-slide>Slide 3</swiper-slide>
        </swiper>
      </div>
    </TileFormat>

#mySlider .swiper-button-prev,
#mySlider .swiper-button-next {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #888888;
  --swiper-navigation-size: 20px;
}

Customizing Swiper in Vue 3

2 Answers2