Question

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

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

Answer 1

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

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

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

修改我发现使用自举旋转木马的灵魂（略有变化）： https://codepen.io/mephysto/pen/ZYVKRY

Answer 2

如果您正在使用bootstrap，请转到轮播概念。

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

Answer 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));

  }
});

如何做div滑块

3 个答案: