Переместить элемент карусели по центру карусели по клику (JavaScript) - PullRequest
Новая
       26

Переместить элемент карусели по центру карусели по клику (JavaScript)

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

Борясь с этим ... У меня есть карусель, где, когда вы нажимаете на любой предмет, я бы хотел, чтобы этот активный элемент переместился, чтобы переместиться в центр карусели.

У меня есть мойрабочий код здесь пока: https://codepen.io/ReenaVerma1981/pen/KKKZoYV#=

(я разбил 3 скрипта в представлении JS, поэтому извиняюсь за длинный код JS).

Как видите, я могу прокрутитьхорошо влево и вправо.
И я использую getBoundingClientRect(), чтобы вычислить ширину / высоту элемента.

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

    const getMostCentered = () => {
  const items = getCarouselContainer().getElementsByTagName('div');
  // Find center of the carousel
  const bounds = calculateItemBounds(getCarouselContainer());
  const center = bounds.left + (bounds.width / 2); 

  for (var i = 0; i < items.length; i++) {
    const current = calculateItemBounds(items[i]);
    const next = calculateItemBounds(items[i+1]);
    // Find the first item whose left edge is past the center 
    if ((next && next.left) > center) {
      if ((next.left - center < center) - current.right) {
        console.log(items[i+1]);
          return items[i+1];
      } 
    } 
  }
}

Я нашел этот JSfiddle, но изо всех сил пытался перевести его из jQuery в JavaScript: http://jsfiddle.net/rUZHg/3/

Любая помощь будет удивительной ...

1 Ответ

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

Просто измените метод getImages следующим образом. Обновленная ручка https://codepen.io/Code006/pen/RwwQOoq

function getImages(carouselContainer) {
  fetch(`${searchURL}?key=9656065-${apikey}&q=manhattan&image_type=photo&page=1&per_page=9`)
    .then((res) => {
      return res.json();
    })
    .then((data) => {
      console.log('data', data);
      // console.log(type)

      let result = '';
      data.hits.forEach(elem => {
        console.log(typeof elem.largeImageURL);
        result +=
                `<div class="item animated fadeIn slow">
                   <a href="#"><img src="${elem.largeImageURL}" role="presentation" alt="Image of ${elem.tags}"/></a>
                   <p><strong>poster:</strong> <br />${elem.user}</p>
                   <p><strong>tags:</strong> <br />${elem.tags}
                 </div>`;
        carouselContainer.innerHTML = result;
      });

      var carouselItems = carouselContainer.children;
      for (let k=0; k< carouselItems.length; k++) {
        carouselItems[k].setAttribute("index", k);
        //click handler to center the clicked item            
        carouselItems[k].onclick = function(e) {
            let slide = e.currentTarget;
            let slideWidth = slide.getBoundingClientRect().width;
            let slideIndex = parseInt(slide.getAttribute("index"));
            let newLeft = (slideIndex*slideWidth*-1)+Math.floor(((carouselContainer.getBoundingClientRect().width) /slideWidth)/2)*slideWidth;                
            document.getElementById("items-container").style.transition= "all 2s ease 0s";
            document.getElementById("items-container").style.left = newLeft+"px";
        }
      }

      const backGroundImage = data.hits[1].largeImageURL;
      document.getElementById('header').style.backgroundImage = `linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)), url(${backGroundImage})`;
      document.getElementById('header').style.backgroundRepeat = 'no-repeat';
    });
}
...