BonBonSlick
@BonBonSlick
Vanilla Web Architect

Как сделать слайдер без автоскролла и фокуса, скролл только руками?

https://trello-attachments.s3.amazonaws.com/5e3382...

1 - все слайды одинакового размера
2 - юзер перетаскивает слайды только руками, не фокуса на клике или авто скоролла. Проскролил на 10 рх в право и все.
3 - паддинги по бокам должны отсутствовать, это значит, что когда 2 слайда, в slick carousel будет паддинга по левую сторону для 1-го слайда и правую сторону 2-го слайда.

Я пробовал https://kenwheeler.github.io/slick/

Совершенно не подходит, максимум что вышло или отцентрировать, но оно автоматически все-равно перелистывает, не работает для 2-х слайдов.

Сейчас в голову приходит только взять какую-то библиотеку для тач ивентов и в завивисимости от того сколько выходит скролл по X ппри скорости и длины отвода пальца от точки прикосновения, доваблять transform по X
  • Вопрос задан
  • 29 просмотров
Решения вопроса 2
BonBonSlick
@BonBonSlick Автор вопроса
Vanilla Web Architect
Все на много много проще, overflow-y
htmlbook.ru/css/overflow

<div class="carousel_wrapper-outer">
    <v-row class="carousel_wrapper-inner">
        <v-col cols="6"
               v-for="(slide, index) in slides"
               :key="index"
               :class="slideClass({slideIndex: index})"
        >
            <nuxt-link :to="{ name: 'article-id', params: {id: index} }"
                       class="clear-text-decor text-black"
            >
                <v-img src="https://kipmu.ru/wp-content/uploads/rdaktatm-scaled.jpg"
                       aspect-ratio="1"
                       height="180"
                       alt="Banner Image"
                />
                <span class="caption">
                    Article Title number {{ slide }}
                </span>
            </nuxt-link>
        </v-col>
    </v-row>
</div>

<code>


.carousel_wrapper-outer{
  overflow: scroll;
  width: 100%;
}
.carousel_wrapper-inner{
  width: 160%;
}
.carousel_item{
  width: 50%;
}
</code>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы