Как можно изменить слайдер во vue.js?

Question

[mrSoma]

Нашел на тостере пост о популярных слайдерах для vue.
Вот самый популярный https://github.com/surmon-china/vue-awesome-swiper

Здесь показаны какие вариации там есть: https://github.surmon.me/vue-awesome-swiper/

Но мне нужно немного другой вариант, а именно вот этот


Не могу понять как можно модифицировать данный слайдер, чтобы добиться такого эффекта и возможно ли это вообще?

Comments

[Eduard07]

Вот ответ : https://github.com/surmon-china/surmon-china.githu...

Добавь навигацию, и будет все ок

[mrSoma]

Eduard07, большое спасибо

[mrSoma]

Eduard07, подскажите пожалуйста еще одну вещь.
Нужно уменьшить размер стрелочек навигации, но не совсем понимаю как это сделать, вот что показывает инспектор:
Не совсем понимаю, что это за свойство и селектор такие?

[Eduard07]

mrSoma, это переменные в css
:root {
--swiper-navigation-size: 22px;
}

можно попробовать

[mrSoma]

Eduard07, да, это работает, но является ли это правильным вариантом? Ну, вроде как эти стили должны быть закрыты и при возможном обновлении и переопределении их, сменится и наше значение?

[Eduard07]

mrSoma, А почему не правильно ? Если в доке нету инфы по этому, то я думаю что можно переписывать стили. А что делать если нужно ?

[mrSoma]

Eduard07, ну да, наверное вы правы

[mrSoma]

Eduard07, а вот и проблема всплыла. На сайте есть еще один слайдер, только вот на этом слайдере стрелочки другого размера.
И как теперь задать разный размер, если мы внутренние селекторы?

[Eduard07]

mrSoma, Можно добавить свои классы, в параметрах самого слайдера, есть такие параметры.

[mrSoma]

Eduard07, а можете носом ткнуть, просто проблема еще в том, что я не могу понять как эти стрелочки реализованы? Что им изменять, что бы уменьшить: font-size? height/width ?
Никак не могу разобраться, что в этой переменной находится, чтобы понять что изменять.

[Eduard07]

mrSoma, Добавь свои стрелки.
Например у тебя есть шаблон.

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

Добавь к шаблонам классы свои, например.

<div class="swiper-button-next custom-button-next"></div>
<div class="swiper-button-prev custom-button-prev"></div>

и уже стилизируй от класса custom-button-next и custom-button-prev.
будет:

.custom-button-next {
width: 40px;
height: 40px;
}

для примеру.

[mrSoma]

Eduard07, большое спасибо , на этом моменте все получилось. Еще мой косяк был в том, что изначально не заметил, что стрелки были реализованы псевдоэлементом к данным дивам, по этому стили не срабатывали).
правда возникла новая проблема с слайдером. Если у вас будет время и мысль как ее можно решить, посмотрите пожалуйста Как реализовать подобный слайдер на vue.js?

[Eduard07]

mrSoma,
centeredSlides,
loop параметры.

[Eduard07]

mrSoma, Остальное дело стилизации

[mrSoma]

Eduard07, не совсем понял о чем вы, если честно

[Eduard07]

mrSoma, Есть документация swiper, почитайте.

[mrSoma]

Eduard07, извините за глупый вопрос, она же на этой странице описана? Просто я здесь не нашел описания "centeredSlides", может я не в том месте смотрю?

[Eduard07]

mrSoma, https://swiperjs.com/api/

[mrSoma]

Eduard07, понял, спасибо вам, буду смотреть

[Eduard07]

mrSoma, Вроде бы не должно быть проблем, это хороший слайдер swiper.

[mrSoma]

Eduard07, посмотрел документацию, но это не совсем та проблема, которая меня преследует.
Дело в том, что у меня сейчас слайдер выглядит так:


А по макету он такой


То есть текстовое описание от главного слайда располагается на всю ширину, в том числе по сути занимая и ширину предыдущего и следующего слайда. И вот как это можно сделать + еще поменять стили у картинок предыдущего и следующего слайда, сделав их чуть меньше и наложить блюр, я не могу додумать

[Eduard07]

mrSoma, можно сделать 2 слайдера, и привьязку... в первом будут фотки, вот втором текст и все остальное

[mrSoma]

Eduard07, блин, точно! Вот только как делается привязка, чтобы когда перелистываешь один слайдер, второй тоже менялся?

[Eduard07]

mrSoma, Есть пример, в демо: https://swiperjs.com/demos/310-thumbs-gallery-loop.html

[Eduard07]

mrSoma, https://github.com/nolimits4web/Swiper/blob/master...

[mrSoma]

Eduard07, спасибо, буду пробовать реализовать

[Eduard07]

mrSoma, Все есть в примерах.

Answer 1

[Eduard07]

https://swiperjs.com/api/