Использование JavaScript для определения среднего div внутри div - PullRequest
Новая
       7

Использование JavaScript для определения среднего div внутри div

2 голосов
/ 03 ноября 2019

Я создал простую многоэлементную горизонтальную карусель, которая перемещается по элементам изображений, когда вы нажимаете кнопку «влево» или «вправо».

Я хочу написать некоторую логику JavaScript, который говорит мне, какой div является наиболее центрированным div на экране внутри узла DOM контейнера: \ 

<section class="items-container"></section>


document.addEventListener('DOMContentLoaded', function() {
  console.log('app.js loaded');

  const pixabayAPIService = PixabayAPIService();
  const carouselContainer = document.getElementById('carousel-container');
  const previousButton    = document.getElementById('previous');
  const nextButton        = document.getElementById('next');
  let count               = 0;

  console.log('count', count);

  pixabayAPIService.getImages();

  slideImages = (direction) => {
    const totalChildren = carouselContainer.getElementsByTagName('div').length;
    console.log('totalChildren', totalChildren);

    direction === 'left' ? count ++ : count --;
    console.log('updated count', count);

    carouselContainer.classList.add('horizTranslate');
    carouselContainer.style.left = count * 200 + 'px';
    carouselContainer.classList.add("slideOutLeft")

    previousButton.style.display = count < 0 ? 'block' : 'none';
    nextButton.style.display = count > 5 - totalChildren ? 'block' : 'none';
  }

  previousButton.addEventListener('click', event => {
    event.preventDefault();
    slideImages('left');
  });

  nextButton.addEventListener('click', event => {
    event.preventDefault();
    slideImages('right');
  });

  if (count === -1) {

  }
});
.home-product-new-hldr {
    position: relative;
    /* width:1140px; */
    border: 0px solid black;
    width: 1000px;
}

.carousel-container {
    width: 1000px;
    overflow:hidden;
    border: 1px solid red;
  }

.items-container {
    border: 3px solid green;
    width: 1000px;
    height: 200px;
    margin: 0 auto;
    display: flex;
    position:relative;
    white-space:nowrap;
}

.item {
    border: 0px solid green;
    width: 200px;
    margin: 0 auto;
    display: inline-block;
    vertical-align: top;
    justify-content: space-between;
}

.horizTranslate {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
  <body>

    <main>
      <h1>Carousel</h1>

      <section>
          <button id="previous" style="display: none;">left</button>
        </section>

      <div class="frame">
      <div class="carousel-container">
      <section class="items-container" id="carousel-container" style="left: 0px; border: 1px solid red";>
          <div class="item"><img src="https://www.fillmurray.com/g/200/200" /></div>
          <div class="item"><img src="https://www.fillmurray.com/200/200" /></div>
          <div class="item"><img src="https://www.fillmurray.com/200/200" /></div>
          <div class="item"><img src="https://www.fillmurray.com/g/200/200" /></div>
          <div class="item"><img src="https://www.fillmurray.com/200/100" /></div>
          <div class="item"><img src="https://www.fillmurray.com/200/100" /></div>
      </section>
    </div>
  </div>

  <section>
      <button id="next" style="display: block;">right</button>
    </section>

  </main>

  </body>

Да, там перечислено 6 делений, но когда я сделаю свою карусель отзывчивой, количество карусельных элементов в нем уменьшится.

Итак, я хотел узнать лучший способ вычисления наиболее центрированного div внутри узла section независимо от экрана / устройства.

Спасибо.

1 Ответ

2 голосов
/ 03 ноября 2019

Используя ванильный JavaScript, мы можем перебрать каждый из дочерних DIV и найти наиболее центрированный, сравнив его левый и правый края с центром карусели. Вот пример CodePen приведенного ниже кода в действии : 

function getMostCentered(container, items) {
  // Find center of the container
  let container_bounds = container.getBoundingClientRect(),
      center = container_bounds.left + (container_bounds.width / 2);

  // Loop through each item and compare with the center
  for (let i = 0; i < items.length; i++) {
    let item = items[i],
        next = items[i+1],
        item_bounds = item.getBoundingClientRect(),
        next_bounds = next && next.getBoundingClientRect();

    // Find the first item whose left edge is past the center 
    if (next && next_bounds.left > center) {
      // and compare it with the previous item to see which is closer
      if (next_bounds.left - center < center - item_bounds.right) {
        return next;
      } else {
        return item;
      }
    // If we've hit the last item then it must be closest
    } else if (!next) {
      return item
    }
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...