0

我有一个带有左右两个按钮的动态滑块。这意味着对于每张幻灯片，幻灯片父级宽度增加 100%。2 张幻灯片 * 100% = 200%。 In example class="slider"; width:'200%'

我想将每张幻灯片的文本放在页面中间。但我希望文本不仅在幻灯片容器中滑动，而且在其父父宽度中滑动（class='carousel'例如）。

下面的代码是滑块现在看起来的示例。

JavaScript，你应该忽略这个。实现它，以使代码正常工作。

document.addEventListener('DOMContentLoaded', function() { //Display function after HTML is loaded

  const left = document.querySelector('.left');
  const right = document.querySelector('.right');

  var slider = document.getElementById('slider');
  var leftImg = document.getElementById('left');
  var rightImg = document.getElementById('right');
  var sections = document.querySelectorAll('.slide').length; // get number of slides
  var sectionIndex = 1;

  slider.style.width = ' ' + 100 * sections + '%';

  function changeOpacity() {
    if (sectionIndex == 1) {
      leftImg.style.opacity = '0.4';
    } else {
      leftImg.style.opacity = '1';
    }
    if (sectionIndex == sections) {
      rightImg.style.opacity = '0.4';
    } else {
      rightImg.style.opacity = '1';
    }

  }

  left.addEventListener('click', function() {
    var leftImg = document.getElementById('left');
    sectionIndex = (sectionIndex > 1) ? sectionIndex - 1 : 1;
    slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
    changeOpacity();
  });

  right.addEventListener('click', function() {
    sectionIndex = (sectionIndex < sections) ? sectionIndex + 1 : sections;
    slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
    changeOpacity();
  });

})
.slider-container {
  padding: 25px 0px;
  width: 40%;
  margin: auto;
}

.slider-container .carousel {
  overflow: hidden;
  height: 260px;
  width: 100%;
  border:solid 2px black;
  position:relative;
}

.slider-container .slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-transition: .5s;
  transition: .5s;
}

.slider-container .slider .slide {
  width: 100%;
}


.slider-container .arrow-container {
  width: 70px;
  position: absolute;
  bottom: 0;
}
<div class="slider-container mobile-container text-left">
  <div class="carousel relative">
    <div id="slider" class="slider">

      <div class="slide">
        <div class="author d-flex flex-column">
          <h3>Ken Ludden</h3>
          <span class="regularText">Director, Margot Fonteyn Academy                      of Ballet</span>
        </div>
      </div>
      <div class="slide">
        <div class="author d-flex flex-column">
          <h3>Ken Ludden</h3>
          <span class="regularText">Director, Margot Fonteyn Academy                      of Ballet</span>
          </div>
        </div>
      </div>
    </div>
    <div class="controls">
      <div class="arrow-container d-flex justify-content-between ">
        <div>
          <button class="left" id="left" style="opacity: 0.4;">Left                     </button>
        </div>
        <div>
          <button class="right" id="right">Right</button>
        </div>
      </div>
    </div>
  </div>
</div>

下面的片段是我想要的。但我应该居中，我不知道如何。我试过用 fl

document.addEventListener('DOMContentLoaded', function() { //Display function after HTML is loaded

  const left = document.querySelector('.left');
  const right = document.querySelector('.right');

  var slider = document.getElementById('slider');
  var leftImg = document.getElementById('left');
  var rightImg = document.getElementById('right');
  var sections = document.querySelectorAll('.slide').length; // get number of slides
  var sectionIndex = 1;

  slider.style.width = ' ' + 100 * sections + '%';

  function changeOpacity() {
    if (sectionIndex == 1) {
      leftImg.style.opacity = '0.4';
    } else {
      leftImg.style.opacity = '1';
    }
    if (sectionIndex == sections) {
      rightImg.style.opacity = '0.4';
    } else {
      rightImg.style.opacity = '1';
    }

  }

  left.addEventListener('click', function() {
    var leftImg = document.getElementById('left');
    sectionIndex = (sectionIndex > 1) ? sectionIndex - 1 : 1;
    slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
    changeOpacity();
  });

  right.addEventListener('click', function() {
    sectionIndex = (sectionIndex < sections) ? sectionIndex + 1 : sections;
    slider.style.transform = 'translate(' + (sectionIndex - 1) * (-100 / sections) + '%)';
    changeOpacity();
  });

})
.slider-container {
  margin: auto;
  padding: 25px 0px;
}

.slider-container .carousel {
  overflow: hidden;
  height: 260px;
  width: 80%; /* the width i want */
  border: solid 2px black;  /* the border for your understading */
  position: relative;
}

.slider-container .slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-transition: .5s;
  transition: .5s;
}

.slider-container .slider .slide {
  width: 100%;
}

.slider-container .comment {
  max-width: 352px;
  padding: 30px 0px;
}

.slider-container .arrow-container {
  width: 70px;
  position: absolute;
  bottom: 0;
}
<div class="slider-container mobile-container text-left">
  <div class="carousel relative">
    <div id="slider" class="slider">
      <div class="slide">
        <div class="author d-flex flex-column">
          <h3>Ken Ludden</h3>
          <span class="regularText">Director, Margot Fonteyn Academy of Ballet</span>
        </div>
      </div>

      <div class="slide">
        <div class="author d-flex flex-column">
          <h3>Ken Ludden</h3>
          <span class="regularText">Director, Margot Fonteyn Academy of Ballet</span>
        </div>
      </div>
    </div>
    <div class="controls">
      <div class="arrow-container d-flex justify-content-between ">
        <div>
          <button class="left" id="left" style="opacity: 0.4;">Left                     </button>
        </div>
        <div>
          <button class="right" id="right">Right</button>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

您可以在此代码段中看到，文本从比上一个示例更靠右的位置滑动。我需要将幻灯片居中，因为我希望左侧也一样。我试过使用flex-column, align-items:center on class="slide".它工作正常，但class="controls"没有居中，因为它们是position:absolute，我试图把它们放在别处，但它没有用..

我真的希望你们确实了解我想要什么，并且真的希望我收到至少一些建议。这是我的第一个问题，对不起长代码。还是非常感谢 ：）

4

1 回答 1

1

你的轮播是宽度的 80%，所以如果你想让它居中，你可以在轮播类上执行：margin: 0 auto。

于 2020-10-28T14:44:28.087 回答