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

光滑滑块会改变您指向的容器的显示类型，您需要将其作为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>

注意div包裹每个.testimonios__container-scroll 在这里摆弄：https://jsfiddle.net/woptima/Lj5pwdhp/2/

水平对齐项目Slick Carousel

1 个答案: