divスライダーの操作方法

Question

私は管理ページを作成しました。メインページの中には、下の画像のような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;} 

Answer 1

滑らかなスライダーを使用してもよいと思います。ここで本当に使いやすい：参考1 https://codepen.io/mephysto/pen/ZYVKRY

Answer 2

あなたは、ブートストラップで作業している場合は、カルーセルコンセプトのために行きます。

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

Answer 3

：

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

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

---

EDIT 私は、ブートストラップ、カルーセルを（若干変更）を使用していますsoultionを見つけました： 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)); 

    } 
});