0

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

const slider = document.querySelector('.slider');
const prevBtn = document.querySelector('.prev-slide');
const nextBtn = document.querySelector('.next-slide');

let slidePosition = 0;
const slides = slider.querySelectorAll('.slide');
const totalSlides = slides.length;

prevBtn.addEventListener('click', () => {
   slidePosition--;
   if (slidePosition < 0) {
      slidePosition = totalSlides - 1;
   }
   updateSliderPosition();
});

nextBtn.addEventListener('click', () => {
   slidePosition++;
   if (slidePosition > totalSlides - 1) {
     slidePosition = 0;
   }
   updateSliderPosition();
});

function updateSliderPosition() {
  slider.style.transform = `translateX(-${slidePosition * slides[0].clientWidth}px)`;
}



    <div class="slider-container">
    <section class="slider">
        <div class="first-vebinar slide">
            <div class="backblock">
                <p>Стандарный вебинар</p>
            </div>
            <div class="mainblock">
                <ul>
                    <li>Lorem ipsum dolor sit.</li>
                    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    <li>Lorem ipsum dolor sit amet consectetur.</li>
                    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error, obcaecati?</li>
                </ul>
            </div>
        </div>
        <div class="sec-vebinar slide">
            <div class="second backblock">
                <p>Индивидуальное занятие</p>
            </div>
            <div class="mainblock">
                <ul>
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
                    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, deleniti.</li>
                    <li>Lorem ipsum dolor sit amet.</li>
                </ul>
            </div>
        </div>
        <div class="third-vebinar slide">
            <div class="third backblock">
                <p>Тета-хиллинг <br> Индивидуальное</p>
            </div>
            <div class="mainblock">
                <ul>
                    <li>Lorem ipsum dolor sit.</li>
                    <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</li>
                    <li>Lorem, ipsum dolor.</li>
                    <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
                </ul>
            </div>
        </div>
        <div class="prev-slide">
            <svg width="80" height="80" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="75" cy="75" r="73.5" stroke="white" stroke-width="3"/>
                <path d="M43 75.5L91.75 47.3542V103.646L43 75.5Z" fill="#FFFFFF"/>
            </svg>
        </div>
        <div class="next-slide">
            <svg width="80" height="80" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="75" cy="75" r="73.5" stroke="white" stroke-width="3"/>
                <path d="M108 75.5L59.25 103.646V47.3542L108 75.5Z" fill="#FFFFFF"/>
            </svg> 
        </div>
    </section>
</div>



.slider-container {
position: relative;
width: 100%;
overflow: hidden;
}

.prev-slide {
position: absolute;
left: 30px;
top: 40svh;
cursor: pointer;
}

.next-slide {
position: absolute;
right: 30px;
top: 40svh;
cursor: pointer;
}

.prev-slide:hover,
.next-slide:hover {
transform: scale(1.1);
}

.slider {
display: flex;
transition: transform 500ms ease-in-out;
}

.slide {
width: 100%;
height: 100svh;
}

.backblock {
position: absolute;
background-color: #6769f4ad;
height: 30rem;
width: 20rem;
border-radius: 10%;
margin-left: 15rem;
margin-top: 5rem;
}

.backblock > p {
writing-mode: vertical-rl;
rotate: 180deg;
color: #ffffff;
font-size: 42px;
font-weight: 600;
font-family: Arial, Helvetica, sans-serif;
margin: 2rem;
opacity: 0.6;
}

.mainblock {
position: absolute;
background-color: #626262;  
opacity: 0.95;
height: 23rem;
width: 35rem;
margin-top: 11rem;
margin-left: 25rem;
border-radius: 10%;
}

.mainblock > ul {
list-style: none;
}

.mainblock > ul > li {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
margin: 2rem;
line-height: 30px;
}

.second {
background-color: #fe0000b5;
}

.third {
background-color: #f7e32bcf;
}
2
  • 1
    Привет! У тебя контейнер для слайда никак не ограничен по ширине. Создай ещё одну обертку и помести туда слайды, а потом ограничь ему ширину равняющийся контенту которому ты хочешь показать. Только не забудь вынуть наружу кнопки, а то они тоже останутся внутри окошка. Представь что если высунешь голову из окна будешь видеть всё происходящее, но если ограничишься окном, будешь видеть лишь то показано, так за кулисами слайдер работает так же, двигается весь контент, если поставить рамки будет видно лишь одно.
    – Elmir
    23 фев 2023 в 22:37
  • Молодец, сам пишешь слайдер)). 24 фев 2023 в 7:32

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.