Задать вопрос
@iliya2004
Верстальщик, программист, дизайнер

Как при скролле увеличить элемент, который в середине экрана?

У меня в горизонтальном скролле карточки. На экране помещаются они по 3 штуки. Нужно, чтобы при скролле увеличивалась( scale(1.2) ) та, что посередине экрана
jfjjffe.png

всё, что я пока сделал с карточками:
<div class="mainCardsRow ">
<div class="card">..</div>
<div class="card">..</div>
<div class="card">..</div>
<div class="card">..</div>
</div>


.mainCardsRow {
    width: 100%;
    overflow-x: scroll;
    height: 22em;
    display: flex;
}

.card {
    width: 200px;
    height: 50vh;
    display: inline-block;
    white-space: nowrap;
    font-size: 0px;
    position: relative;
    margin: 0px 20px;
}
  • Вопрос задан
  • 336 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
@iliya2004 Автор вопроса
Верстальщик, программист, дизайнер
Итак, я накостылял, но кое-как работает.
  1. Установил свайпер
  2. структура свайпера
                   <div class="glide">
                        <div class="glide__track" data-glide-el="track">
                            <ul class="glide__slides">
                                <li class="glide__slide">
                                    <div class="glide__slide">
                                        <div class="card">
                                        </div>
                                </li>
                                <li class="glide__slide">
                                    <div class="glide__slide">
                                        <div class="card">
                                        </div>
                                </li>
                                <li class="glide__slide">
                                    <div class="glide__slide">
                                        <div class="card">
                                        </div>
                                </li>
                                <li class="glide__slide">
                                    <div class="glide__slide">
                                        <div class="card">
                                        </div>
                                </li>
                            </ul>
                        </div>
                    </div>


  3. css
    .glide__slide {
        /* Итак, во всех слайдерах слайды или 100% ширину имеют, или ровно 
        по 2/3/4/5/.. помещаются на экране.
        Но нельзя боковые слайды показывать только на ~10%.
        Поэтому все слайды сдвигаются влево, чтобы кусочек всегда справа был виден */
        transform: translateX(2.4em);
        transition: 0.1s ease-in-out;
        }
        .glide__slide--active {
            /* увеличил и выровнял по центру центральную(активную) карточку */
            transform: translateX(-2.4em) scale(1.1) !important; 
        }

  4. объявление слайдера
    var gliide = new Glide('.glide', {
            swipeThreshold: 60,
            dragThreshold: 60,
            rewind: false,
            focusAt: 'center'
    });

  5. Кхм, здесь алгоритм, я уверен, можно было сделать проще, но это работает
    gliide.on("run.after", () => {        //событие перелистывания
    
        if(gliide.index == 0){   
    //если перелистнули на первый слайд, то
    // только следующий подвигается влево, чтобы быть справа чуть-чуть видным
    
            $('.glide__slide--active')[0].nextElementSibling.style.transform='translateX(-7.1em)';
        }
        else if(gliide.index >= 1 && gliide.index < ($('.glide__slide').length/2)-1) {
    //если мы на любом, кроме первого и последнего, то следующий и предыдущий двигаются
            $('.glide__slide--active')[0].nextElementSibling.style.transform='translateX(-7.1em)';
            $('.glide__slide--active')[0].previousElementSibling.style.transform='translateX(2.4em)';
        }
        else if(gliide.index == ($('.glide__slide').length/2)-1) {
    //если последний слайд, то двигаем предыдущий
            $('.glide__slide--active')[0].previousElementSibling.style.transform='translateX(2.4em)';
        }
        
    });


  6. gliide.on(['mount.after'], () => {
    //при загрузке сайта и слайдера сразу двигаем следующий слайд
        $('.glide__slide--active')[0].nextElementSibling.style.transform='translateX(-7.1em)';
       });

  7. инициализация слайдера
    gliide.mount();
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Delta01
@de1ta01 пиши, помогу с вёрсткой =)
Ну наверное, у центральной карточки есть, какой-то класс активации, например active, почему бы от него и не плясать в стилях?
Например, что-то в этом роде .item.active img { transform: scale(1.2) }
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы