Slick Carousel重置为Bootstrap 3中的第一张幻灯片

时间：2018-04-21 23:23:24

标签： jquery html twitter-bootstrap twitter-bootstrap-3 slick.js

我正在处理一个问题，我将Bootstrap 3中的Slick.js应用于class="row" id="slider"并将我的列作为应该滑动的内容。它工作正常，直到用户移除保持点击（鼠标按下）或他们从屏幕上移开他们的手指。

它始终重置为第一张幻灯片/列。

代码 

$(document).ready(function () {
$('#slider').slick({
            dots: false,
            infinite: false,
            arrows:false,
            speed: 300,
            centerMode: false,
            mobileFirst:true,
            variableWidth: true,
            autoplay: false,
            pauseOnFocus: false,
            pauseOnHover: false,
            pauseOnDotsHover: false,
            slidesToShow: 1,
            slidesToScroll: 1
});
});
.example-column {
  box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.35);
  background:#fff;
}
  
.example-name {
  background:#101215;
  color:#fff;
  font-size:16px;
  padding:2px 8px;
  margin-left:-5px;
  font-size:18px;
  max-width:250px;
}
  
.example-image {
  margin-top: 16px;
  max-height: 240px;
  width: 420px;
  position: relative;
  overflow: hidden;
  padding-right: 15px;
}
  
.example-facts {
  position:relative;
  width:90%;
  top: -10%;
  left: 10%;
}
  
.example-column.example-facts {
  max-width:390px;
  max-height:150px;
}
  
.out-my-way p {
  max-height:80px;
  overflow:hidden;
  font-size:20px;
  white-space:initial;
}
  
.col-lg-4.col-md-4.col-sm-4.col-xs-4.example-column {
  width:440px;
  height:360px;
  border-radius:2px;
  background:#fff;
  margin-right:40px;
  box-sizing: border-box ;
}

.slick-slide
{
width:440px;
display:block;
margin-right: 40px;
}

.slick-track 
{
display:flex;
}
<div class="jumbotron">
        <div class="container">
            <div id="slider" class="row" style="white-space:nowrap;display:flex;height:420px;position:relative;overflow:hidden;box-sizing:border-box;">
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 example-column" style="width:440px;height:360px;">
                    <div class="example-image"><img src="http://www.solidbackgrounds.com/images/950x350/950x350-red-solid-color-background.jpg" class="img-responsive" /></div>
                    <div class="example-column example-facts">
                        <div>
                            <p class="example-name">Words and Words</p>
                        </div>
                        <div class="out-my-way">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae voluptatibus tempore, sed dolor ducimus facere fugit enim amet atque error eius fuga dicta cupiditate, itaque dolores? Iste iure et unde.<br /></p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 example-column" style="width:440px;height:360px;">
                    <div class="example-image"><img src="http://www.solidbackgrounds.com/images/1920x1080/1920x1080-navy-blue-solid-color-background.jpg" class="img-responsive" /></div>
                    <div class="example-column example-facts">
                        <div>
                            <p class="example-name">Words and Words</p>
                        </div>
                        <div class="out-my-way">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae voluptatibus tempore, sed dolor ducimus facere fugit enim amet atque error eius fuga dicta cupiditate, itaque dolores? Iste iure et unde.<br /></p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 example-column" style="width:440px;height:360px;">
                    <div class="example-image"><img src="https://upload.wikimedia.org/wikipedia/commons/4/49/Flag_of_Sultante-e-uzma_empire_of_Khora_Siyal.png" class="img-responsive" /></div>
                    <div class="example-column example-facts">
                        <div>
                            <p class="example-name">Words and Words</p>
                        </div>
                        <div class="out-my-way">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae voluptatibus tempore, sed dolor ducimus facere fugit enim amet atque error eius fuga dicta cupiditate, itaque dolores? Iste iure et unde.<br /></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

我不希望幻灯片重置到第一个位置。相反，当幻灯片/列离开他们的手指或鼠标时，它们应保持原样。我认为Slick.js会自动解决这个问题。这是我的代码上的问题还是Slick和Bootstrap不能很好地协同工作？

1 个答案:

答案 0 :(得分：0)

我在第二天解决了。我需要在幻灯片上方的几乎所有父元素中应用display flex。

＆＃13;
＆＃13; 
$('#slider').slick({
                dots: false,
                infinite: false,
                arrows:false,
                slidesToShow: 1,
                variableWidth: true,
                mobileFirst: true,
    });
＆＃13; 
    #h1-res{
      font-size: 32px;
      font-weight:bold;
    }

    #slick-fix.container-fluid{
      max-width:1500px;
    }
    .example-column {
      box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.35);
      background:#fff;
    }

    .non-active-creative-item{
      margin-bottom: 40px;
    }
      
    .example-name {
      background:#101215;
      color:#fff;
      font-size:16px;
      padding:2px 8px;
      margin-left:-5px;
      font-size:18px;
      float: left;
      white-space: nowrap;
      overflow: hidden;

    }
      
    .example-image {
      margin-top: 16px;
      max-height: 240px;
      width: 420px; 
      position: relative;
      overflow: hidden;
      padding-right: 15px;
    }



    .example-facts {
      position:relative;
      width:90%;
      transform: translateY(-30px);
      left: 10%;
    }
      
    .example-column.example-facts {
      max-width:390px;
      display: inline-block;
    }
      
    .gregstyle .out-my-way p {
      overflow:hidden;
      font-size:20px;
      white-space:pre-wrap;
      float:right;
    }
      
    .col-lg-4.col-md-4.col-sm-4.col-xs-4.example-column {
      width:440px;
      height:360px;
      border-radius:2px;
      background:#fff;
      margin-right:40px;
      box-sizing: border-box ;
    }

    .slick-slide
    {
    width:440px;
    margin-right: 40px;
    outline: none;
    }
    .slick-list.draggable{
      flex-direction: row;
      display: flex;
      padding-bottom: 20px;
    }
    .slick-track 
    {
    display:flex;
    flex-direction: inherit;
    }
＆＃13; 
<div class="jumbotron" data-aos="fade-up" data-aos-once="true">
        <div id="slick-fix" class="container-fluid">
            <div id="slider" class="row" style="white-space:nowrap;height:440px;position:relative;box-sizing:border-box;overflow:hidden;">
                <div class="col-md-offset-6 col-xs-4 creator-column" style="width:440px;height:420px;">
                    <div class="example-image"><img src="http://www.solidbackgrounds.com/images/950x350/950x350-red-solid-color-background.jpg" class="img-responsive" /></div>
                        <div class="example-column example-facts">
                            <div>
                                <p class="example-name">Words and Words</p>
                        </div>
                        <div class="out-my-way">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae voluptatibus tempore, sed dolor ducimus facere fugit enim amet atque error eius fuga dicta cupiditate, itaque dolores? Iste iure et unde.<br /></p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 example-column" style="width:440px;height:360px;">
                    <div class="example-image"><img src="http://www.solidbackgrounds.com/images/1920x1080/1920x1080-navy-blue-solid-color-background.jpg" class="img-responsive" /></div>
                    <div class="example-column example-facts">
                        <div>
                            <p class="example-name">Words and Words</p>
                        </div>
                        <div class="out-my-way">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae voluptatibus tempore, sed dolor ducimus facere fugit enim amet atque error eius fuga dicta cupiditate, itaque dolores? Iste iure et unde.<br /></p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 example-column" style="width:440px;height:360px;">
                    <div class="example-image"><img src="https://upload.wikimedia.org/wikipedia/commons/4/49/Flag_of_Sultante-e-uzma_empire_of_Khora_Siyal.png" class="img-responsive" /></div>
                    <div class="example-column example-facts">
                        <div>
                            <p class="example-name">Words and Words</p>
                        </div>
                        <div class="out-my-way">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae voluptatibus tempore, sed dolor ducimus facere fugit enim amet atque error eius fuga dicta cupiditate, itaque dolores? Iste iure et unde.<br /></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

样式已关闭，但您明白了。

相关问题
最新问题