如何做 div 滑块答案

【问题标题】：How to do div slider如何做 div 滑块
【发布时间】：2017-08-05 19:25:46
【问题描述】：

我已经创建了管理页面。在主页内有一个 div 滑块，如下图所示。我已经完成了造型，但不知道如何做滑块。谁能帮我。必须使用引导程序来完成。

我的 HTML 代码

<div class="row">
    <div class="col-md-12">
        <div class="panel with-nav-tabs panel-default panel-spacing">
            <div class="panel-heading">
                    <ul class="nav nav-tabs custom-tabs">
                        <li class="active"><a href="#tab1default" data-toggle="tab">CAREER COACH</a></li>
                        <li><a href="#tab2default" data-toggle="tab">NEED INTERVIEW COACHING</a></li>
                        <li><a href="#tab3default" data-toggle="tab">TECHNICAL TRAINING SERVICE</a></li>
                        <li><a href="#tab4default" data-toggle="tab">CAREER COACH</a></li>
                        <li><a href="#tab5default" data-toggle="tab">NEED INTERVIEW COACHING</a></li>
                        <li><a href="#tab6default" data-toggle="tab">TECHNICAL TRAINING SERVICE</a></li>
                    </ul>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="tab1default">
                        <div class="single-person">
                            <center><img class="img-responsive img-circle" src="images/person/1.png" /></center>
                            <h4>Name</h4>
                            <h5>Experience</h5>
                            <hr>
                            <span class="title">Hourly rate</span> <span class="pull-right full-price"><span class="price">$20</span>/hr</span>
                            <hr>
                            <span class="title">Location</span> <span class="pull-right">India</span>
                            <hr>
                            <span class="title">Job success</span> <span class="pull-right">100%</span>
                            <hr class="job-success">
                            <hr>
                            <br/>
                            <center><a class="view-profile" href="#">View Profile</a></center>
                            <br/>
                        </div>
                        <div class="single-person">
                            <center><img class="img-responsive img-circle" src="images/person/1.png" /></center>
                            <h4>Name</h4>
                            <h5>Experience</h5>
                            <hr>
                            <span class="title">Hourly rate</span> <span class="pull-right full-price"><span class="price">$20</span>/hr</span>
                            <hr>
                            <span class="title">Location</span> <span class="pull-right">India</span>
                            <hr>
                            <span class="title">Job success</span> <span class="pull-right">100%</span>
                            <hr class="job-success">
                            <hr>
                            <br/>
                            <center><a class="view-profile" href="#">View Profile</a></center>
                            <br/>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab2default">Default 2</div>
                    <div class="tab-pane fade" id="tab3default">Default 3</div>
                    <div class="tab-pane fade" id="tab4default">Default 4</div>
                    <div class="tab-pane fade" id="tab5default">Default 5</div>
                    <div class="tab-pane fade" id="tab6default">Default 6</div>
                </div>
            </div>
        </div>
    </div>
</div>

我的css代码

.single-person {padding:15px; width:268px; box-shadow:1px 1px 15px rgba(204,204,204,1); float:left; margin-right:20px; border:1px solid #a3a3a3; border-radius:5px;}
.single-person h4 {text-align:center; font-weight:bold; text-transform:uppercase; font-size:15px;}
.single-person h5 {text-align:center;}
.single-person hr {margin:10px 0px 10px 0px;}
.price {font-size:25px; font-weight:bold;}
.full-price {margin-top:-6px;}
.title {font-weight:bold;}
.job-success {border-bottom:4px solid #14bff4; width:100%; border-top:none;}
.view-profile {padding:10px 30px 10px 30px; background:#14bff4; color:#fff; border-radius:3px;}
.view-profile:hover {background:#124c56; color:#fff;}

【问题讨论】：

为什么不用Bootstrap轮播？？
我已经使用引导轮播作为图像滑块。

标签： jquery html css twitter-bootstrap-3 slider

【解决方案1】：

我认为您可以为此使用光滑的滑块。在这里真的很容易使用：

$('#tab1default').slick({
  infinite: true,
  slidesToShow: 4,
  slidesToScroll: 4
});

http://kenwheeler.github.io/slick/

编辑我找到了使用引导轮播的灵魂（略有改变）： https://codepen.io/mephysto/pen/ZYVKRY

【讨论】：

由于他使用的是引导程序，是否有必要为滑块添加一个新插件
不是，也可以通过bootstrap轮播来实现。

【解决方案2】：

如果您正在使用引导程序，那么请使用轮播概念。

Reference link:https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

【讨论】：

【解决方案3】：

参考1：http://bootsnipp.com/snippets/featured/infinite-carousel-loop

参考2：Bootstrap carousel with multiple items

$('#myCarousel').carousel({
  interval: 40000
});

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {

      next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest');

  }
  else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));

  }
});

【讨论】：