слайдер с 3 карточками на одном экране

Question

слайдер с 3 карточками на одном экране

Рейтинг: 0Ответов: 2Опубликовано: 01.08.2023

Данный код реализует функциональность слайдера с тремя карточками, где при нажатии кнопки "Вперед" (nextBtn) карточки двигаются вправо, а при нажатии кнопки "Назад" (prevBtn) карточки двигаются влево. Текущая выделенная карточка всегда остается в центре.

Если мы берем отправную точку , нажимаем налево, направо, то все ок. Но если мы нажимаем вперед, потом назад, то все идет прахом. Может подскажете более короткий код вдобавок. Перепробовал уже кучу всего

const prevBtn = document.querySelector('.button-arrwo-left');
const nextBtn = document.querySelector('.button-arrow-right');
const cards = document.querySelector('.professional__cards');

let currentIndex = 1;

const sibling0 = cards.children[0];
const sibling1 = cards.children[1];
const sibling2 = cards.children[2];

const moveToSlideRight = function () {
    if (currentIndex === 1) {
        sibling0.classList.toggle('next2');
        sibling1.classList.toggle('prev');
        sibling1.classList.remove('slider-active');
        sibling2.classList.toggle('prev-active');
        console.log(currentIndex, 'next1');
    }
    if (currentIndex === 2) {
        sibling0.classList.toggle('next2');
        sibling0.classList.toggle('next-active');
        sibling1.classList.toggle('prev');
        sibling1.classList.toggle('next');
        sibling2.classList.toggle('prev-active');
        sibling2.classList.toggle('prev2');
        console.log(currentIndex, 'next2');
    }
    if (currentIndex === 3) {
        sibling0.classList.remove(...removeClases);
        sibling1.classList.remove(...removeClases);
        sibling1.classList.add('slider-active');
        sibling2.classList.remove(...removeClases);
        console.log(currentIndex, 'next3');
    }
    currentIndex >= 3 ? (currentIndex = 1) : currentIndex++;
};

nextBtn.addEventListener('click', moveToSlideRight);

const moveToslideLeft = function () {
    if (currentIndex === 1) {
        sibling0.classList.toggle('next-active');
        sibling1.classList.toggle('next');
        sibling1.classList.remove('slider-active');
        sibling2.classList.toggle('prev2');
        console.log(currentIndex, 'prev1');
    }
    if (currentIndex === 2) {
        sibling0.classList.toggle('next2');
        sibling0.classList.toggle('next-active');
        sibling1.classList.toggle('next');
        sibling1.classList.toggle('prev');
        sibling2.classList.toggle('prev-active');
        console.log(currentIndex, 'prev2');
    }
    if (currentIndex === 3) {
        sibling0.classList.remove(...removeClases);
        sibling1.classList.remove(...removeClases);
        sibling1.classList.add('slider-active');
        sibling2.classList.remove(...removeClases);
        console.log(currentIndex, 'prev3');
    }
    currentIndex >= 3 ? (currentIndex = 1) : currentIndex++;
};

prevBtn.addEventListener('click', moveToslideLeft);

const removeClases = [
    'prev',
    'next2',
    'next',
    'prev2',
    'prev-active',
    'next-active',
];

.professional__cards {
    display: flex;
    margin-bottom: 7.64rem;
    transition: transform 0.3s ease;
    justify-content: space-between;
}

.slider {
    background-image: url('/images/professionals/bg-cards.png');
    background-repeat: no-repeat;
    background-size: cover;

    border-radius: 1.875rem 1.875rem 0rem 0rem;

    display: flex;
    flex-direction: column;
    align-items: center;

    /* width: 31rem;
    height: 22.27569rem; */

    /* padding-top: 0.2rem; */
    opacity: 0.5;
    line-height: 1;
    width: 17.81944rem;
    height: 12.84338rem;

    transition: 1s ease;
}


.images {
    width: 9.68444rem;
    height: 10.375rem;
    padding: 0;
    margin: 0;
}

.programmer-text {
    font-family: var(--font-second);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;

    margin-top: -0.5rem;
}

.professioal-card__arrow {
    text-align: center;

    display: flex;
    justify-content: center;
    gap: 3rem;
}

.arrows {
    background: transparent;
    outline: none;
    border: none;
    cursor: pointer;
    fill: white;

    padding: 0;

    line-height: 0;
}

.button-arrwo-left {
    background-image: url('/images/professionals/arow-left.svg');
    background-repeat: no-repeat;
    background-size: cover;

    transition: ease 0.5s;

    width: 4.30156rem;
    height: 4.30156rem;
}

.button-arrwo-left:hover {
    background-image: url('/images/professionals/arrow-fill-left.svg');
    background-repeat: no-repeat;
    background-size: cover;

    width: 4.30156rem;
    height: 4.30156rem;

    transition: 0.5s ease;
}

.button-arrow-right {
    background-image: url('/images/professionals/arrow-right.svg');
    background-repeat: no-repeat;
    background-size: cover;

    transition: ease 0.5s;

    width: 4.30156rem;
    height: 4.30156rem;
}

.button-arrow-right:hover {
    background-image: url('/images/professionals/arrow-fill-right.svg');
    background-repeat: no-repeat;
    background-size: cover;

    width: 4.30156rem;
    height: 4.30156rem;

    transition: 0.5s ease;
}

/* #Layer_2_1_ {
    width: 4.30156rem;
    height: 4.30156rem;
    padding: 0;
    margin: 0;
    line-height: 10;
} */

/* ////////////////////////// */

.slider-active {
    transform: scale(1.75);
    opacity: 1;
}

.prev {
    transform: translateX(-150%);
}

.prev2 {
    transform: translateX(-305%);
}

.prev-active {
    transform: translateX(-150%) scale(1.75);
    opacity: 1;
}

.next-active {
    transform: translateX(150%) scale(1.75);
    opacity: 1;
}

.next {
    transform: translateX(150%);
}

.next2 {
    transform: translateX(305%);
}

<div class="professional__cards">
                    <div class="slider slide-0 card-programmer">
                        <img
                            src="/images/professionals/programmer-card.png"
                            alt="programmer-seat"
                            class="images programmer__img"
                        />
                        <p class="programmer-text">Programmer</p>
                    </div>
                    <div class="slider slider-active card-marketing">
                        <img
                            src="/images/professionals/marketing-card.png"
                            alt="message"
                            class="images marketing__img"
                        />
                        <p class="programmer-text">Marketing</p>
                    </div>
                    <div class="slider slide-2 card-designer">
                        <img
                            src="/images/professionals/designer-card.png"
                            alt="box with arrows"
                            class="images designer__img"
                        />
                        <p class="programmer-text">Designer</p>
                    </div>
                </div>
                <div class="professioal-card__arrow">
                    <button
                        type="submit"
                        class="arrows button-arrwo-left"
                    ></button>
                    <button
                        class="arrows button-arrow-right"
                        type="submit"
                    ></button>
                </div>

css javascript html5

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Слайдер можно сделать так:

const slides = document.querySelectorAll('.slide'); //Получаем все слайды
const prevBtn = document.querySelector('.button-arrwo-left');
const nextBtn = document.querySelector('.button-arrow-right');
const slideCount = slides.length;
let slideIndex = 1;

nextBtn.addEventListener('click', function() { //Слушатель нажатия на кнопку "вперёд"
  slideIndex = (slideIndex + 1) % slideCount; //Высчитывание индекса следующего слайда
  updateSlider();
});

prevBtn.addEventListener('click', function() { //Слушатель нажатия на кнопку "назад"
  slideIndex = (slideIndex - 1 + slideCount) % slideCount; //Высчитывание индекса предыдущего слайда
  updateSlider();
});

function updateSlider() { //Функция для изменения классов всех слайдов при нажатии на кнопку
  const nextSlide = (slideIndex + 1) % slideCount;
  const prevSlide = (slideIndex - 1 + slideCount) % slideCount;

  document.querySelector('.slide-active').classList.remove("slide-active");
  slides[slideIndex].classList.add("slide-active");
  document.querySelector('.slide-next').classList.remove("slide-next");
  slides[nextSlide].classList.add("slide-next");
  document.querySelector('.slide-prev').classList.remove("slide-prev");
  slides[prevSlide].classList.add("slide-prev");
}

.professional__cards {
    display: flex;
    margin: 7.64rem 0;
    transition: transform 0.3s ease;
    justify-content: center;
    height: 200px;
}

.slide {
    background-image: url('/images/professionals/bg-cards.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1.875rem 1.875rem 0rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.5;
    line-height: 1;
    width: 17.81944rem;
    height: 12.84338rem;
    transition: 1s ease;
    position: absolute;
}

.images {
    width: 9.68444rem;
    height: 10.375rem;
    padding: 0;
    margin: 0;
}

.programmer-text {
    font-family: var(--font-second);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    margin-top: -0.5rem;
}

.professioal-card__arrow {
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.arrows {
    background: transparent;
    outline: none;
    border: none;
    cursor: pointer;
    fill: white;
    padding: 0;
    line-height: 0;
}

.button-arrwo-left {
    background-image: url('/images/professionals/arow-left.svg');
    background-repeat: no-repeat;
    background-size: cover;
    transition: ease 0.5s;
    width: 4.30156rem;
    height: 4.30156rem;
}

.button-arrwo-left:hover {
    background-image: url('/images/professionals/arrow-fill-left.svg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 4.30156rem;
    height: 4.30156rem;
    transition: 0.5s ease;
}

.button-arrow-right {
    background-image: url('/images/professionals/arrow-right.svg');
    background-repeat: no-repeat;
    background-size: cover;
    transition: ease 0.5s;
    width: 4.30156rem;
    height: 4.30156rem;
}

.button-arrow-right:hover {
    background-image: url('/images/professionals/arrow-fill-right.svg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 4.30156rem;
    height: 4.30156rem;
    transition: 0.5s ease;
}

.slide-active {
    transform: scale(1.75);
    opacity: 1;
}

.slide-next {
    transform: translateX(320px);
}

.slide-prev {
    transform: translateX(-320px);
}

<div class="professional__cards">
    <div class="slide slide-prev">
        <img
            src="https://klike.net/uploads/posts/2020-06/1593061891_2.jpg"
            alt="programmer-seat"
            class="images programmer__img"
        />
        <p class="programmer-text">Programmer</p>
    </div>
    <div class="slide slide-active">
        <img
            src="https://klike.net/uploads/posts/2019-06/1560927346_3.jpg"
            alt="message"
            class="images marketing__img"
        />
        <p class="programmer-text">Marketing</p>
    </div>
    <div class="slide slide-next">
        <img
            src="https://fikiwiki.com/uploads/posts/2022-02/1644997173_1-fikiwiki-com-p-kartinki-tsifra-3-1.png"
            alt="box with arrows"
            class="images designer__img"
        />
        <p class="programmer-text">Designer</p>
    </div>
</div>
<div class="professioal-card__arrow">
    <button
        type="submit"
        class="arrows button-arrwo-left"
    >←</button>
    <button
        class="arrows button-arrow-right"
        type="submit"
    >→</button>
</div>

Answer 2

▲ 0

Если у тебя задача сделать слайдер самому, то помочь не смогу. Если задача просто сделать слайдер и не важно сам или нет, то советую прикрутить swiper, документация понятная и на ютубе полно уроков по нему. Такой слайдер, как у тебя в 10 строк с помощью него делается. Ну и реализацию можешь посмотреть, может чего нибудь почерпнешь.

слайдер с 3 карточками на одном экране

Ответы