Question

我正在尝试构建一个响应式弹性滑块。我有一个柔性的容器，里面的物品要垂直居中。水平。它应该一次显示1项，而其余的项目都在屏幕外。目前，它同时显示所有项目。如何一次显示1个项目。我似乎无法到达那里。如果我能弄清楚如何显示1个主要项目＆amp;剩下的屏幕，我想我可以把剩下的都搞清楚了。任何帮助是极大的赞赏。这是我正在做的工作的链接：

http://7.engineroomdm.com/exodus/home.htm

这是代码：

body {
  margin: 0;
}

.dj-slider {
  background-image: url('images/slide-backgrnd.jpg');
  padding: 50px;
  min-height: 300px;
  background-size: cover;
  display: flex;
  justify-content: center;
  overflow: hidden;
  flexwrap: nowrap;
  -webkit-overflow-scrolling: touch;
}

.dj-slide img {
  max-width: 100%;
  height: auto;
}

.dj-slide {}

.dj-slide:not(:first-child) {
  /*left:0;*/
}

<div class="dj-slider">
  <div class="dj-slide">
    <img src="images/10-off-slide.png" alt="">
  </div>

  <div class="dj-slide">
    <img src="images/10-off-slide.png" alt="">
  </div>

  <div class="dj-slide">
    <img src="images/10-off-slide.png" alt="">
  </div>

  <div class="dj-slide">
    <img src="images/10-off-slide.png" alt="">
  </div>
</div>

UPDATE 这是我试图为幻灯片设置动画的代码：

<a href="#" class="dj-move-it" data-slide="1">1</a> | 
<a href="#" class="dj-move-it" data-slide="2">2</a> | 
<a href="#" class="dj-move-it" data-slide="3">3</a> | 
<a href="#" class="dj-move-it" data-slide="4">4</a>

$(function(){

  $('.dj-move-it').on('click',function(){

    var curSlide = $(this).attr('data-slide');

    switch(curSlide){
      case '1':
       $('.dj-slide').css({
       transition: 'transform 0.5s',
       transform: 'translateX(0)'
       });
      break;

      case '2':
       $('.dj-slide').css({
       transition: 'transform 0.5s',
       transform: 'translateX( calc(-100% - 100px))'
       });
      break;

      case '3':
       $('.dj-slide').css({
       transition: 'transform 0.5s',
       transform: 'translateX( calc(-200% - 200px))'
       });
      break;

      case '4':
       $('.dj-slide').css({
       transition: 'transform 0.5s',
       transform: 'translateX( calc(-300% - 300px))'
       });
      break;

      default:
       $('.dj-slide').css({
       transition: 'transform 0.5s',
       transform: 'translateX(0)'
       });
    };

  });

});
</script>

Answer 1

我能想到的最简单的方法是让每个slide成为一个弹性容器，并且能够使图像居中。

此外，由于slide元素也是弹性项目，因此需要将flex-shrink设置为0，否则它们不会保持100％宽。

Stack snippet

body {
  margin: 0;
}

.dj-slider {
  background-image: url('images/slide-backgrnd.jpg');
  min-height: 200px;
  background-size: cover;
  display: flex;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid black;
}

.dj-slide img {
  max-width: 100%;
  height: auto;
}

.dj-slide {
  width: calc(100% - 100px);    /*  added, full width - margin  */
  flex-shrink: 0;               /*  added, so it won't shrink  */
  border: 1px solid red;        /*  added, for demo purpose  */
  margin: 20px 50px;                 /*  added, instead of padding on parent  */
  
  display: flex;                /*  added  */
  align-items: center;          /*  added  */
  justify-content: center;      /*  added  */
  
  animation: slide-it 10s infinite;
}

@keyframes slide-it {
  0%    { transform: translateX(0); }
  25%   { transform: translateX( calc(-100% - 100px) ); }
  50%   { transform: translateX( calc(-200% - 200px) ); }
  100%  { transform: translateX( calc(-300% - 300px) ); }
}

<div class="dj-slider">

  <div class="dj-slide">
    <img src="http://placehold.it/200x120/f00" />
  </div>

  <div class="dj-slide">
    <img src="http://placehold.it/200x120/0f0" />
  </div>

  <div class="dj-slide">
    <img src="http://placehold.it/200x120/00f" />
  </div>

  <div class="dj-slide">
    <img src="http://placehold.it/200x120/f0f" />
  </div>

</div>

根据评论更新。

示例如何点击并选择幻灯片。

window.addEventListener('load', function() {

  var button = document.querySelector('button');

  button.addEventListener('click', function() {
    
    var slider = document.querySelector('.dj-slider');
    slider.classList.toggle('show3');

  });
});

body {
  margin: 0;
}

.dj-slider {
  background-image: url('images/slide-backgrnd.jpg');
  min-height: 200px;
  background-size: cover;
  display: flex;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid black;
}

.dj-slide img {
  max-width: 100%;
  height: auto;
}

.dj-slide {
  width: calc(100% - 100px);  /*  added, full width - margin  */
  flex-shrink: 0;             /*  added, so it won't shrink  */
  border: 1px solid red;
  /*  added, for demo purpose  */
  margin: 20px 50px;
  /*  added, instead of padding on parent  */
  display: flex;
  /*  added  */
  align-items: center;
  /*  added  */
  justify-content: center;
  /*  added  */
  transition: transform 1s;
  transform: translateX(0);
}


.dj-slider.show3 .dj-slide {
  transform: translateX( calc(-200% - 200px));
}

<div class="dj-slider">

  <div class="dj-slide">
    <img src="http://placehold.it/200x120/f00" />
  </div>

  <div class="dj-slide">
    <img src="http://placehold.it/200x120/0f0" />
  </div>

  <div class="dj-slide">
    <img src="http://placehold.it/200x120/00f" />
  </div>

  <div class="dj-slide">
    <img src="http://placehold.it/200x120/f0f" />
  </div>

</div>

<button>Slide 3 - Toggle</button>

使用flex / css和javascript构建响应式滑块

1 个答案: