Блог

Главная - Вопросы по программированию - Заставляя ползунок карусели заполнять всю страницу

Заставляя ползунок карусели заполнять всю страницу

#javascript #html #css

Вопрос:

Эй, я сделал этот слайд-карусель, и я хочу, чтобы он заполнил всю мою страницу, изменив мой CSS-код, как бы я это сделал??

Это мой Javascript

 const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');

const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');

let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)';

nextBtn.addEventListener('click',()=>{
    if (counter >= carouselImages.length - 1) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter  ;
    carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)';
});

prevBtn.addEventListener('click',()=>{
    if (counter <= 0) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter--;
    carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)';
});

carouselSlide.addEventListener('transitionend', ()=>{
    if (carouselImages[counter].id === 'lastClone'){
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - 2; 
        carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)';
    }
    if (carouselImages[counter].id === 'firstClone'){
        carouselSlide.style.transition = "none";
        counter = carouselImages.length - counter; 
        carouselSlide.style.transform = 'translateX('   (-size * counter)   'px)';
    }
});

и мой html:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" 
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" 
    crossorigin="anonymous"/>
    <title>My Goals</title>
</head>
<body>
    <div class="carousel-container">
            <i class="fas fa-arrow-left" id="prevBtn"></i>
            <i class="fas fa-arrow-right" id="nextBtn"></i>

        <div class="carousel-slide">
            <img src="img5.jpg" id="lastClone" class="image" alt="">
            <img src="img1.jpg" alt="" class="image">
            <img src="img2.jpg" alt="" class="image">
            <img src="img3.jpg" alt="" class="image">
            <img src="img4.jpg" alt="" class="image">
            <img src="img5.jpg" alt="" class="image">
            <img src="img1.jpg" id="firstClone" class="image" alt="">
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>

и, наконец, мой css (где «ошибка»):

 *{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

.image {
    width: 1000px;
    height: 800px;
}

.carousel-container {
    width: 1000px;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.carousel-slide {
    display: flex;
    width: 100%;
    height: 800px;
}

#prevBtn {
    position: absolute;
    top: 50%;
    z-index: 10;
    left: 5%;
    font-size: 60px;
    color: white;
    cursor: pointer;
}

#nextBtn {
    position: absolute;
    top: 50%;
    z-index: 10;
    right: 5%;
    font-size: 60px;
    color: white;
    cursor: pointer;
}

Я пытался поиграть с шириной: 100% или в разных местах в моем css, но, похоже, я не могу заставить это работать. Помните, что с кодом нет никаких проблем. Все, что я хочу, — это сделать его на 100% по ширине и на 100% по высоте, но когда я пытаюсь это сделать, изображения просто выглядят странно и не заполняют весь экран, как должно быть. Моя ручка с кодом здесь, если вы хотите помочь. 🙂

https://codepen.io/lucasthorsen/pen/gOxYEWm

Комментарии:

1. использовать .image {width: 100%;object-fit: cover;}

2. Не работает. если это работает для вас, не могли бы вы, пожалуйста, сделать кодовую ссылку и показать мне, используя мой js и html-код?

3. неясно.. вы имеете в виду 100% ширину/высоту страницы? если да, то почему вы поместили на него 1000 пикселей?

4. да, я имею в виду, что он должен заполнить весь мой экран, то есть на 100% по высоте и ширине. но изменение класса изображения само по себе не помогает. ширина контейнера карусели установлена на 1000 пикселей, а мой экран шире 1000 пикселей, поэтому первым шагом было бы установить это значение на 100%. Попробуйте перейти на мое кодовое перо и посмотреть, подходит ли .ширина изображения: 100% и объект, подходящий для покрытия, если он заполняет всю страницу/ экран, чтобы не было «белых пятен» (PS. извините, я знаю, что я нуб)

5. codepen.io/lcherone/pen/YzxKbrM

Метки: