【发布时间】：2018-04-21 23:23:23
【问题描述】：
我正在处理一个问题，我将 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 不能很好地协同工作？
【问题讨论】：
标签： jquery html twitter-bootstrap twitter-bootstrap-3 slick.js