水平對齊項目滑動旋轉木馬

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/