水平对齐项目滑动旋转木马

Question

问题是我使用滑动旋转木马，但每当我将该div添加到滑动脚本时，我正在使用内容移动到不同的行中。

它应该看起来如何。

这就是我将滚动div添加到Slick脚本后会发生的情况。

我几乎可以肯定这是一个CSS问题，但我已经尝试了很多，无法得到它的工作。这是我的代码...

<div class="testimonios"> 
     <div class="testimonios__container"> 
      <p id="title">Testimonios</p> 
      <div class="testimonios__container-scroll"> 

       <div class="testimonios__container-photo"> 
        <img id="photo" src="img/photo.png"> 
        <p id="message"><b> Edoardo Perez - Nucliux. </b><br><br>“Humanus logró que mi empresa encontrara los mejores candidatos para satisfacer mis necesidades”. </p> 
       </div> 

       <!--<div class="testimonios__container-photo"> 
        <img id="photo" src="img/photo.png"> 
        <p id="message"><b> Alan Vázquez - Nucliux. </b><br><br>"Humanus me encanta" </p> 
       </div> --> 

      </div> 
     </div> 
    </div> 

油滑

<script> 
     $(document).ready(function(){ 
      $('.testimonios__container-scroll').slick({ 
      autoplay: true, 
      autoplaySpeed: 2000, 
      infinite: true, 
      pauseOnHover: false, 

      }); 
     }); 
    </script> 

这是有关CSS

.testimonios{ 
    height: 23vw; 
    background: url("../img/testimonios.jpg"); 
    background-repeat: no-repeat; 
} 

.testimonios__container{ 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    width: 80%; 
    margin-left: 10%; 
    height: 20vw; 
} 

.testimonios__container-scroll{ 
    display: flex; 
    flex-direction: center; 
    justify-content: center; 
    width: 70%; 
    height: auto; 
    margin-left: 15%; 
} 

#photo{ 
    margin-right: 3vw; 
    width: auto; 
    height: 10vw; 
} 

.testimonios__container-photo{ 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    background-color: ; 
    width: 100%; 
    height: 10vw; 
    margin-left: ; 
} 

#title{ 
    color: white; 
    font-weight: bold; 
    font-size: 1.5vw; 
    text-transform: uppercase; 
    margin-bottom: 2.2vw; 
    text-align: center; 
    margin-top: 1.5vw; 
} 


#message{ 
    color: white; 
    font-size: 1.2vw; 
    margin-top: 1vw; 
    margin-bottom: 1vw; 
} 

有一个现场演示here滚动到底

Answer 1

油滑滑块changin您正在指定的容器的显示类型，您需要将其作为flex。 把一个包装围绕thzt容器上

<div class="testimonios"> 
    <div class="testimonios__container"> 
     <p id="title">Testimonios</p> 
     <div class="slickz"> 
      <div> 
      <div class="testimonios__container-scroll"> 
        <div class="testimonios__container-photo"> 
         <img id="photo" src="https://upload.wikimedia.org/wikipedia/commons/d/d3/User_Circle.png"> 
         <p id="message"><b> Edoardo Perez - Nucliux. </b><br><br>“Humanus logró que mi empresa encontrara los mejores candidatos para satisfacer mis necesidades”. </p> 
        </div> 
       </div> 
      </div> 
      <div> 
      <div class="testimonios__container-scroll"> 
        <div class="testimonios__container-photo"> 
         <img id="photo" src="https://upload.wikimedia.org/wikipedia/commons/d/d3/User_Circle.png"> 
         <p id="message"><b> Edoardo Perez - Nucliux. </b><br><br>“Humanus logró que mi empresa encontrara los mejores candidatos para satisfacer mis necesidades”. </p> 
        </div> 
       </div> 
      </div> 
      <div> 
      <div class="testimonios__container-scroll"> 
        <div class="testimonios__container-photo"> 
         <img id="photo" src="https://upload.wikimedia.org/wikipedia/commons/d/d3/User_Circle.png"> 
         <p id="message"><b> Edoardo Perez - Nucliux. </b><br><br>“Humanus logró que mi empresa encontrara los mejores candidatos para satisfacer mis necesidades”. </p> 
        </div> 
       </div> 
      </div> 
      <div> 
      <div class="testimonios__container-scroll"> 
        <div class="testimonios__container-photo"> 
         <img id="photo" src="https://upload.wikimedia.org/wikipedia/commons/d/d3/User_Circle.png"> 
         <p id="message"><b> Edoardo Perez - Nucliux. </b><br><br>“Humanus logró que mi empresa encontrara los mejores candidatos para satisfacer mis necesidades”. </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JS初始化滑头：

<script> 
     $(document).ready(function(){ 
      $('.slickz').slick({ 
      autoplay: true, 
      autoplaySpeed: 2000, 
      infinite: true, 
      pauseOnHover: false, 

      }); 
     }); 
    </script> 

通知股利包裹每个.testimonios__container-scroll 小提琴这里：https://jsfiddle.net/woptima/Lj5pwdhp/2/