Пояснение к слайду шоу basi c JavaScript - PullRequest
Новая
       12

Пояснение к слайду шоу basi c JavaScript

0 голосов
/ 07 февраля 2020

Я использую JQuery для создания пользовательского макета слайд-шоу и работаю над кодом, который будет

  1. Рассчитать ширину экрана
  2. Вычесть ширину images
  3. Установите левое поле равным 1/3 разницы между шириной экрана и изображениями

Изображения выглядят выровненными, но отсекаются для последних из 3 картинки. Я пытаюсь сделать этот динамик c, чтобы он создавал разметку для любого количества изображений. Я все об этом ошибаюсь? Кроме того, пространство между элементами встроенного блока отключает его? 

var sl = $('.slideIt')
var acc = 0
for (var i = 0; i < $('.slideIt img').length; i++) {
  acc += $('.slideIt').eq(i).width();
}
var distanceRatio = ($(window).innerWidth() - acc) / sl.children().length;

$('.slideIt').css('marginLeft', '' + distanceRatio + 'px')
.imageSlideHolder {
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slideIt {
  display: inline-block;
  position: relative;
  width: 33%;
}

.slideIt img {
  position: relative;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Image Slideshow</h1>

<div class='imageSlideHolder'>
  <div class='slideIt'>
    <img src='im1.jpg' />
  </div>
  <div class='slideIt'>
    <img src='im2.jpg' />
  </div>
  <div class='slideIt'>
    <img src='im3.jpg' />
  </div>
</div>

1 Ответ

0 голосов
/ 07 февраля 2020

Вам не нужно вычислять ширину чего-либо. Используя CSS, вы можете размещать элементы подряд с помощью Flexbox. Оберните все ваши слайды внутри другого элемента, в этом примере мы называем этот элемент imageSlideRails, который перемещает все слайды вместе, а не перемещает их по отдельности.

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

Величина, которую вы скользите, может совпадать со значением flex-basis на слайде. Скажем, слайд 33.3%. Если вы переместите рельсы на -33.3%, то первый слайд переместится из поля зрения, а следующий слайд появится в поле зрения. Таким образом, расчет всегда будет точным.

Оформить фрагмент ниже. 

var index = 1;
var slideWidth = 33.3;
var slidesLength = $('.slideIt').length;
var $rails = $('.imageSlideRails');

setInterval(function() {
  $rails.css('transform', `translate3d(${index * -slideWidth}%, 0, 0)`);
  if (index === slidesLength - 1) {
    index = 0;
  } else {
    index++;
  }
}, 2000);
.imageSlideHolder {
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.imageSlideRails {
  display: flex;
  flex-flow: row nowrap;
  transition: transform 1s ease-in-out;
}

.slideIt {
  box-sizing: border-box;
  position: relative;
  width: 33.3%;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3%;
  padding: 15px;
  overflow: hidden;
}

.slideIt img {
  position: relative;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Image Slideshow</h1>

<div class='imageSlideHolder'>
  <div class="imageSlideRails">
    <div class='slideIt'>
      <img src='https://www.fillmurray.com/640/360' />
    </div>
    <div class='slideIt'>
      <img src='https://www.fillmurray.com/640/360' />
    </div>
    <div class='slideIt'>
      <img src='https://www.fillmurray.com/640/360' />
    </div>
    <div class='slideIt'>
      <img src='https://www.fillmurray.com/640/360' />
    </div>
    <div class='slideIt'>
      <img src='https://www.fillmurray.com/640/360' />
    </div>
  </div>
</div>
...