Arrows not disabling at the beginning or the end

[djcaesar9114]

Hello,
My Splider still shows the arrows even if I'm at the first or last index.
Here are my options:

const options = {
  autoplay: false,
  drag: false,
  type: 'slide',
  rewind: false,
  width: '70vw',
  height: '50vh',
  perPage: 1,
  perMove: 1,
};

And here is how I launch the slider (everything works fine apart from this):

<Splide
  :options="options">
  <SplideSlide
    v-for="(question, i) in questions"
    :key="`question-${i}`">
    <div
      class="questionWrapper">
      <div
        class="question">
        {{ question.question }}
      </div>
      <div
        class="reponses">
        <div>
          <div>
            Importance
          </div>
          <input
            type="range"
            min="0"
            max="10"
            v-model="reponses[question.id].importance"
            step="0.5" />
            <div
              class="reponse">
              {{ reponses[question.id].importance }}
            </div>
        </div>
        <div>
          <div>
            Note
          </div>
          <input
            type="range"
            min="0"
            max="10"
            v-model="reponses[question.id].note"
            step="0.5" />
            <div
              class="reponse">
              {{ reponses[question.id].note }}
            </div>
        </div>
      </div>
    </div>
  </SplideSlide>
</Splide>

Am I missing something here?

[NaotoshiFujita]

Splide does not hide arrows but adds disabled attribute.
#358 (comment)

[yahav10]

You can set the "visibility" attribute to "hidden" and "visible" when you are on index or out of index.

[Learning-X]

But how do we do this in react-splide? It's hard to believe that there is no solution? Any work around to hide next-Arrow and prev-Arrow when first/last slide is active for react-splide? Thanks in advance!

[jamalsoueidan]

use the disabled attribute to hide og show the buttons?

[jamalsoueidan]

button.disabled {
   display: none;
}

[ZermattChris]

FYI: I'm having a similar problem.

When moving to the last slide (only the last slide, not the first), the "Next" arrow isn't having the 'disabled' property set. The last slide is 2-3 pixels short of the end of the container and Splide only adds the disabled to the arrow if the user clicks on the Next arrow button again (even though we're already on the last slide).

I've tried to manually fix it with in the Splide:moved event, but the value doesn't stick (guessing the internals are removing the property again).

Image of the Splide component on the 'last' slide, but still with an active 'Next' arrow.

[ZermattChris]

By the way - thanks for this epic component! It's taking me a while to figure it out, but it does what I need.

[fgd007]

@ZermattChris Indeed, having the same issue. The pagination and arrows are too much tied to individual slides, which doesn't make sense in every use case, especially not when having a fixedWidth set.

So let's say we have

• a available space of 1000 px
• fixedWidth set to 250
• 8 items in the carrousel (4 of them visible, the rest not)

Clicking on the Next arrow the carrousel will move and focus on the second slide. After 4 clicks all items are visible, and there is nothing to scroll really, but you still can click next (and it will move focus to the 6th, 7th and 8th item of the carrousel). It makes sense if you're design has a certain focus state for slides, but I bet that in a lot of use cases you just want to use the arrows to see all items, and not per se focus on them visually.

Some other carrousel plugins have dealt with this situation differently. Would be nice if SplideJS would offer a solution for this usecase. Or maybe I'm missing a crucial setting here.

[hyvyys]

Seems this has been resolved:

https://splidejs.com/guides/auto-width/#navigations-in-the-last-page

new Splide( '.splide', {
  autoWidth: true,
  focus    : 0,
  omitEnd  : true,
} );