水平对齐项目滑轮传送带

Question

问题是我使用的是Slick Carousel，但每当我将div添加到Slick的脚本中时，我使用的是内容移动到不同的行中。

这就是当我将滚动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;
}

这里有一个现场演示滚动到底部

Answer 1

滑块正在改变您所指向的容器的显示类型，您需要作为Flex。在thzt容器周围放置一个包装器，并在其上初始化slick

<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-scrollfiddle的div:https://jsfidle.net/woptima/lj5pwdhp/2/