单击时将轮播项目移动到轮播中间 (JavaScript)

Question

正在为这个而苦苦挣扎... 我有一个旋转木马，当您单击任何项目时，我希望该活动项目移动，移动到旋转木马的中心。

到目前为止我有我的工作代码： https://codepen.io/ReenaVerma1981/pen/KKKZoYV#=

（我已经将 3 个脚本混合到 JS 视图中，对于冗长的 JS 代码深表歉意）。

如您所见，我可以很好地左右滚动。
我正在使用 getBoundingClientRect() 来计算元素 width/heights.

但我不知道从这里去哪里...... 最后，如果我点击任何旋转木马项目，我希望所有项目都移动，所以活动项目位于旋转木马的中间。

    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/

任何帮助都会很棒...

Answer 1

只需更改方法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';
    });
}

单击时将轮播项目移动到轮播中间 (JavaScript)

Move carousel item in middle of carousel on click (JavaScript)

javascript

css

jquery

bounds

carousel