W demonstracjach Swipera slajdy są przyciągane do lewej strony ekranu, aż dojdziesz do ostatnich slajdów, które nie są przyciągane w lewo, ponieważ (jak przypuszczam) Swiper nie chce pokazywać białych znaków po prawej stronie:

enter image description here

Slajd 10 nigdy nie przeskoczy do lewej strony

https://swiperjs.com/demos/120-slides-per-view-auto.html

Moim zdaniem czuje się to jak błąd dla użytkownika, zwłaszcza gdy uruchomisz suwak, aby przesunąć 10 i wyskoczy tylko na prawą stronę.

Rozwiązania, które znalazłem, to dodanie pustego slajdu lub dodanie marginesu w prawo do ostatniego slajdu, aby następnie slajd został przyciągnięty do lewej strony:

.swiper-slide:last-child {
  margin-right: calc(100vw - 300px);
}

enter image description here

Dodaj prawy margines do ostatniego slajdu

https://codepen.io/kmturley/pen/ExxrGgw

Dodaj pusty slajd na końcu

https://codepen.io/kmturley/pen/JjjzKrK

Użyj funkcji pętli, a następnie ukryj duplikaty

https://codepen.io/kmturley/pen/oNNVLxL

Czy jest lepszy lub wbudowany sposób na zrobienie tego? to bez konieczności stosowania obejścia?

Chcę później dynamicznie zmienić ten odstęp, a jeśli zmienisz go ręcznie, musisz wywołać swiper.update (), powodując aktualizacje układu. Również moje obecne obejście wymaga znajomości szerokości slajdów lub użycia niestandardowego javascript do obliczenia szerokości. Dlatego preferowane byłoby rozwiązanie wbudowane lub responsywne!

2
Kim T 20 listopad 2019, 06:18
1
Powinieneś dodać pętlę true .. tak, aby przesuwała się w sposób ciągły.. nie ma już miejsca po prawej stronie
 – 
Ranjith v
20 listopad 2019, 12:27
Pętla nie jest idealna, ponieważ chcę mieć pustą przestrzeń. Próbowałem dodać pętlę i ukryć zduplikowane slajdy, ale to pozwala zachować pętlę, chyba że zastąpię next/prev funkcjami niestandardowymi
 – 
Kim T
20 listopad 2019, 20:08

2 odpowiedzi

Spróbuj dodać loopedSlides: 8 i usuń margin-right: calc (100vw - 300px);

var container = document.getElementById('container');
var content = document.getElementById('content');
var swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  slidesPerView: 'auto',
  autoplayDisableOnInteraction: false,
  loopedSlides: 8,
});
1
Ranjith v 20 listopad 2019, 12:31
Hmm to nie działa? czy loopedSlides nie muszą być używane z pętlą?
 – 
Kim T
20 listopad 2019, 19:56
Gdy pętla jest włączona, możesz naciskać strzałki i ostatecznie wrócić do slajdu 1, więc nie jest to idealne rozwiązanie. ale tak blisko!
 – 
Kim T
20 listopad 2019, 20:07
Wygląda na to, że możesz wyłączyć strzałki, a potem działa! codepen.io/kmturley/pen/oNNVLxL
 – 
Kim T
20 listopad 2019, 20:16
Jeśli dodasz pętlę oznacza .. nie ma potrzeby loopedslides 8.. po prostu spróbuj dodać pętlę, działa dobrze @Kim T
 – 
Ranjith v
21 listopad 2019, 07:08

Twoje obecne obejście prawdopodobnie jest całkiem optymalne i nie sądzę, aby istniał jakikolwiek wbudowany sposób, aby osiągnąć to, co próbujesz zrobić. Możesz jednak rozważyć użycie opcji loop: true, co może zapewnić lepsze wrażenia użytkownika.

https://codepen.io/rentodesign/pen/gOOqNwo

0
Rento 20 listopad 2019, 12:25
1
Próbowałem pętli, ale w moim przypadku nie chcę widzieć duplikatów slajdów. Myślę, że mógłbym je ukryć za pomocą css.
 – 
Kim T
20 listopad 2019, 19:57