Карусель из нескольких предметов с использованием Bootstrap и Javascript - PullRequest
Новая
       15

Карусель из нескольких предметов с использованием Bootstrap и Javascript

0 голосов
/ 11 октября 2019

Я пытаюсь создать многоэлементную карусель Bootstrap, используя javascript, но не jQuery. Я использовал Гриншок для анимации. У меня есть три карусели Inner Div, и каждый div содержит 4 столбца изображения. Я использую столбец, чтобы я мог добавлять или удалять элементы из отдельных слайдов. Но слайдер скользит только на время. Он показывает только 8 предметов, которые предполагают до 12 предметов из трех разных слайдов. Что не так я сделал.

Мой scss 

.slider-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;

.slider {
    display: flex;
    flex-direction: row;
    width: 100%;

    .slider-inner {
        min-width: 100%;
    }

    .slider-item {
        display: block;
    }
  }
}

Мой HTML 

<div class="container">
<div class="slider-wrapper">
    <div class="slider">
        <div id="myDIV" class="slider-inner">
            <div class="row flex-row flex-nowrap">
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-1" alt="" class="img-fluid">
                </div>
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-2" alt="" class="img-fluid">
                </div>
                <div class="col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-3" alt="" class="img-fluid">
                </div>
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-4" alt="" class="img-fluid">
                </div>
            </div>
        </div>
        <div id="myDIV" class="slider-inner">
            <div class="row flex-row flex-nowrap">
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-5" alt="" class="img-fluid">
                </div>
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-6" alt="" class="img-fluid">
                </div>
                <div class="col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-7" alt="" class="img-fluid">
                </div>
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-8" alt="" class="img-fluid">
                </div>
            </div>
        </div>
        <div id="myDIV" class="slider-inner">
            <div class="row flex-row flex-nowrap">
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-9" alt="" class="img-fluid">
                </div>
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-10" alt="" class="img-fluid">
                </div>
                <div class="col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-11" alt="" class="img-fluid">
                </div>
                <div class="slider-item col-6 col-md-6 col-lg-3">
                    <img src="https://via.placeholder.com/1920x855?text=Slider-12" alt="" class="img-fluid">
                </div>
            </div>
        </div>

    </div>
    <div class="slider-controller">
        <button href="" class="nextSlide">
            Next
        </button>
        <button href="" class="prevSlide">
            Prev
        </button>

    </div>
</div>

Мой код JS 

const sliderWarapper = document.getElementsByClassName('slider-warpper');
const slider = document.getElementsByClassName('slider');
const sliderInner = document.querySelectorAll('.slider-inner');
const sliderItem = document.getElementsByClassName('slider-item');
const nextBtn = document.querySelector('.nextSlide');
const prevBtn = document.querySelector('.prevSlide');

const sliderInnerWidth = sliderInner[0].offsetWidth;
const itemWidth = sliderItem[0].offsetWidth;

nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);

function nextSlide() {
  for (var i = 0; i < sliderInner.length; i++) {
    var sliderSlider = sliderInnerWidth;
    TweenMax.to(sliderInner[i], 4, { x: -sliderSlider, y: 0 });

  }
}

function prevSlide() {
   for (var i = 0; i < sliderInner.length; i++) {
    TweenMax.to(sliderInner, 2, { x: 0, y: 0 });
  }
}
...