Как cдвинуть слайды в swiper.js?

Question

[Алекс]

День добрый, есть слайдеры на странице один должен работать так что часть правого слайда скрыта за экраном и при пролистывании до последнего он должен быть полностью показан и при этом левый который не поместился должен быть спрятан за экраном. Все хорошо если бы не отступы которые должны быть сначала слева потом при пролистывании до конца справа (при этом слева уже не должно быть)

так он должен обычно выглядеть:



а так когда дошли до конца



Пробовал по событию change проверять слайд виден ли последний и менять отступы, но ни одно событие не срабатывает при пролистывании на пол слайда тоесть половины последнего.

И второй вопрос по другому слайдеру, можно ли как то отцентровать слайдер имея четное количество слайдов видимых. (получается только с нечетным количеством centeredSlides) и при этом, что бы не было огромного пространсва лева и справа если это первый или последнйи слайд


все творил здесь

Comments

[Сергей Василенко]

Хороший вопрос, мне тоже нужно решить как показывать часть слайда справа!

Answer 1

[Oaks]

Поставьте не целое значение в:
Пример 1

slidesPerView: 3.5 // Показать три с половиной слайда, как на примере 1

Тогда вы увидите половину четвертого слайда. И так же в конце первый будет обрезан на половину.

Пример 2

slidesPerView:1.5,
centeredSlides: true,  //в связке с slidesPerView: 1.5 встанет как на примере 2

Comments

[Сергей]

Офигеть! Очень крутое решение и не надо мучаться со стилями, можно любое число делать, 2.3, 2.8 и тд.. Причем я не видел в документации такого.

[Oaks]

Да, в доках я тоже не видел.

[DestroyerEvo]

Гениально!!! Я час мучался, менял стили (мне нужен был один слайд и кусочки слева и справа),но ничего не получалось, а оказывается так просто можно было сделать, спасибо!

[Oaks]

DestroyerEvo, пользуйтесь на здоровье)

loop: true, 
slidesPerView:1.2 // любое числовое значение

Слева и справа будут видны части слайдов.

[AlexTr999]

Ты лучший!!!

[Memento_Turk]

Спасибо!

[Андрей Чирков]

slidesPerView + centeredSlides решило мои задачи!
Искал подобное решение часами!

Answer 2

[historydev]

Вам нужно в конфиге свайпера указать кол-во видимых слайдов и кол-во перелистывающихся слайдеров.

click

Здесь нас интересует:

var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3, // this
      slidesPerColumn: 1, // and this
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });

Первый параметр кол-во видимых слайдов, второй сколько видимых областей сдвинуть, поставьте auto в первом параметре и посмотрите что выйдет.

Comments

[Алекс]

Не совсем понял что вы предлагаете. Поставлю я auto и у меня всегда будет по одному слайду видно. Т.е. мне самостоятельно при инициализации рассчитывать ширину и задавать им? и дальше что? как мне с отступами быть и центрированием четного количества?

[historydev]

Алекс, в документацию хотя-бы глазом загляните, будет понимание, видно будет столько - сколько помещается в текущую ширину.

[Алекс]

Владимир, документация это первое куда я посмотрел. Я написал Вам как на самом деле это получается (а получается 1 слайд при auto, в текущей ситуации) и задал соответственно вопрос с вычислением размеров слайдов (но вы же такой дерзкий).
Хорошо поступил я по вашему задал ширину слайдам самостоятельно, получилась та же картинка что если бы я указал дробное количество, а если быть точнее - при пролистывании с предпоследнего на последний т.е. половина слайда события никакого нет - следовательно вопрос с отступами так и остается открытым

[historydev]

Алекс, разбуйте глаза, пройдитесь по примеру из демок свайпера и включите наконец-то ваш инструмент под названием мозг.

click

[Алекс]

Владимир, так вы не то мне скидываете что нужно причем тут я? я вам про отступы вы про группы вот пример собрал и что дальше? зачем мне группы? может вы глаза уже "разбуете"? если это так явно на поверхности, соберите пример вот вам заготовка click а сейчас вы на тролля какого то похожи (сами ведь тупите)

[historydev]

Алекс, я бы сказал, но лучше промолчу, статус глупого вы себе заработали. Дойдите до конца в моём примере.

[historydev]

Алекс, какой вопрос, такой ответ, надеюсь на мой репорт о конкретизации вопроса модераторы отреагируют в ближайшее время. Вы принципиально не хотите разбираться в коде, копайтесь сами, может мозг активируется, задачи с фриланса вам на блюде никто здесь не выдаст, умник.

[historydev]

Алекс, вас мама не любила? ахахах Сочувствую.

[historydev]

Алекс, нет, просто настолько обиженных жизнью я не видел ещё, уходит отсюда и больше никогда не возвращайтесь, нам "ущербы" не нужны.

[historydev]

Алекс, вы думаете я стану читать ваши высеры после написанного последним? Надрывайтесь дальше. Мы закончили.