Question

为此奋斗... 我有一个轮播，当您单击任何项目时，我希望该活动项移动到该轮播的中心。

到目前为止，我的工作代码如下： 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/

任何帮助都会很棒...

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）

1 个答案: