水平对齐项目 Slick Carousel

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;
}

有现场演示here滚动到底部

Answer 1

Slick slider 正在更改您指向的容器的显示类型，您需要将其设置为 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>

注意 div 包装每个 .testimonios__container-scroll fiddle 这里：https://jsfiddle.net/woptima/Lj5pwdhp/2/

水平对齐项目 Slick Carousel

Horizontal align items Slick Carousel

html

css

jquery

slick.js