Цикл массива изображений как карусель - PullRequest
Новая
       10

Цикл массива изображений как карусель

0 голосов
/ 02 ноября 2019

Я пытаюсь создать многоэлементную карусель в чистом JavaScript, используя плагины без карусели.

Я хочу добиться наличия div, который содержит 4/5 изображений. Сидеть рядом друг с другом. И затем, когда вы нажимаете кнопку «далее» или «предыдущий», вы можете прокручивать карусель изображений

Вот кодекс, пока: https://codepen.io/ReenaVerma1981/pen/KKKZoYV

  • Мой подход заключается виметь массив изображений.
  • Прокручивать их, чтобы отображать их рядом в div.
  • И затем нажимать следующую кнопку, циклически отображать изображения в каруселисобытие далее.
  • Даже когда вы доберетесь до изображения списка, убедитесь, что карусель продолжает работать, снова выполняя цикл из первого изображения в массиве.

Я застреваюна последней части. Я не уверен, как прокрутить карусель изображений.

Пока что я только что отображал их статически. Вы можете видеть, что я уже перебираю свой массив и отображаю каждое изображение в отдельном div. В контейнерной карусели дел. 

    const arrayCarousel = ['https://www.fillmurray.com/g/200/200', 
    'https://www.fillmurray.com/200/200', 
    'https://www.fillmurray.com/200/200', 
    'https://www.fillmurray.com/g/200/200', 
    'https://www.fillmurray.com/200/100'];

    
     for (let i = 0; i < arrayCarousel.length; i++) {
      const imageURL = arrayCarousel[i];
      console.log('imageURL', imageURL);

      const divElement = document.createElement("div");
      const imgElement = document.createElement("img");
      imgElement.src = imageURL;

      divElement.classList.add("item");
      divElement.appendChild(imgElement);
      carouselContainer.appendChild(divElement);
    }
 <section>
        <div class="carousel-container" id="carousel-container">
        </div>
 </section>

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

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

Спасибо!

Ответы [ 2 ]

0 голосов
/ 02 ноября 2019

Это то, что я быстро придумал. Может не быть решением для копирования-вставки. Просто делюсь общей идеей о том, как вы можете это сделать.

Анимация масштабирования должна работать нормально. Слайд-анимация потребует работы с элементами DOM вместо замены изображений 

/**
 * Deregisters the carousal when either next or previous
 * button is clicked. On button clicks, deregister and 
 * re-register is required to avoid image change collisions.
 * 
 * Callback is executed which changes the order of images
 * array.
 * 
 * setItem is called to apply the image order changes.
 * 
 * registerCarousal registers a new carousal loop, so that the
 * loop continues forever.
 */
function onButtonClick(callback) {
    if (typeof callback !== 'function') return;

    deregisterCarousel();
    callback();
    setItem();
    registerCarousal();
}

/**
 * Responsible for changing the src on the
 * carousalItems.
 */
function setItem() {
    var img = document.getElementsByClassName('carousalItems');

    for (let i = 0; i < img.length; li++) {
        img.src = images[i];
    }
}

/**
 * Removes the first image and pushes it to the
 * end of the array.
 */
function shiftForNext() {
    let firstItem = images.shift();
    images.push(firstItem);
}

/**
 * Deregisters the existing timer.
 */
function deregisterCarousel() {

    if (timer == null) return;

    clearInterval(timer);
    timer = null;
}

function registerCarousal() {
    // Remove any existing timer.
    deregisterCarousel();

    // Loop every 1.5 seconds and shifts the 
    // images from 0 to length direction.
    timer = setInterval(function () {
        shiftForNext();

        // Responsible for changing the image src
        // on carousal list elements.
        setItem();
    }, 1500);
}

let timer = null;

let images = [
    'https://www.fillmurray.com/g/200/200',
    'https://www.fillmurray.com/200/200',
    'https://www.fillmurray.com/200/200',
    'https://www.fillmurray.com/g/200/200',
    'https://www.fillmurray.com/200/100',
    'https://www.fillmurray.com/200/100',
    'https://www.fillmurray.com/200/100',
];

// Registers the next button click.
document.getElementById('next').addEventListener('click', function () {
    onButtonClick(function () {
        shiftForNext();
    });
});

// Registers the previous button click.
document.getElementById('prev').addEventListener('click', function () {
    onButtonClick(function () {
        // Removes the last element of the images array
        let lastItem = images.pop();

        // And pushes it to the first position.
        images.unshift(lastItem);
    });
});

// Registers the carousal
registerCarousal();
0 голосов
/ 02 ноября 2019

Вы можете попробовать использовать метод setInterval и перебрать массив изображений: 

const arrayCarousel = ['https://www.fillmurray.com/g/200/200', 
'https://www.fillmurray.com/200/200', 
'https://www.fillmurray.com/g/200/200', 
'https://www.fillmurray.com/200/100'];

counter = 0
const setImage = () => {
 document.getElementById("carousel-image").src = arrayCarousel[counter];
 counter = (counter+1)  % arrayCarousel.length;
}

setInterval(setImage, 1000);
  <section>

    <img id="carousel-image" >

  </section>
...