Как я могу заставить этот контейнер типа карусели работать в html как в Upwork?

Question

Как я могу заставить этот контейнер типа карусели работать так же, как в Upwork?

Это моя существующая работа, которую я хотел бы сделать как карусель, как на картинке:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container>div {
  width: 230px;
  margin: 10px;
  text-align: center;
  line-height: 18px;
}

<section id="salesman">
  <div class="flex-container">
    <div class="salesman-details">
      <div class="salesman-update">
        <img src=" . . .">
        <h3><b> <a href="#">Kevin H.</a></b></h3>
        <p>Skills <i class="fa fa-angle-double-right"></i><small>Digital Marketing, </small><small>Master Prospecting, </small><small>Closing Skill, </small><small>Recruitment Skill, </small></p>
        <i class="fa fa-inr"></i><span> 7 Yrs Experience</span><br>
        <i class="fa fa-map-marker"></i><span> Quezon City PH</span><br>
        <p><i class="fa fa-star"></i><span> Rating 9/10</span>
      </div>
      </p>
      <div class="view-btn">
        <button type="button" class="btn btn-primary">View Profile</button>
      </div>
    </div>

Я пытался вставить код начальной загрузки, но он просто создает другой контейнер.

Answer 1

Вы можете попробовать что-то вроде этого.

$('#carouselExample').on('slide.bs.carousel', function (e) {

    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 4;
    var totalItems = $('.carousel-item').length;
    
    if (idx >= totalItems-(itemsPerSlide-1)) {
        var it = itemsPerSlide - (totalItems - idx);
        for (var i=0; i<it; i++) {
            // append slides to end
            if (e.direction=="left") {
                $('.carousel-item').eq(i).appendTo('.carousel-inner');
            }
            else {
                $('.carousel-item').eq(0).appendTo('.carousel-inner');
            }
        }
    }
});

@media (min-width: 768px) {

    /* show 3 items */
    .carousel-inner .active,
    .carousel-inner .active + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item,
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
        display: block;
    }
    
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    .carousel-inner .carousel-item-next,
    .carousel-inner .carousel-item-prev {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* farthest right hidden item must be abso position for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container-fluid">
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
        <div class="carousel-inner row w-100 mx-auto" role="listbox">
            <div class="carousel-item col-md-3 active">
                   <div class="salesman-details">
      <div class="salesman-update">
        <img src=" . . .">
        <h3><b> <a href="#">Kevin H.</a></b></h3>
        <p>Skills <i class="fa fa-angle-double-right"></i><small>Digital Marketing, </small><small>Master Prospecting, </small><small>Closing Skill, </small><small>Recruitment Skill, </small></p>
        <i class="fa fa-inr"></i><span> 7 Yrs Experience</span><br>
        <i class="fa fa-map-marker"></i><span> Quezon City PH</span><br>
        <p><i class="fa fa-star"></i><span> Rating 9/10</span> </p>
    
     
      <div class="view-btn">
        <button type="button" class="btn btn-primary">View Profile</button>
      </div>
   </div>
   </div>
            </div>
            <div class="carousel-item col-md-3">
                   <div class="salesman-details">
      <div class="salesman-update">
        <img src=" . . .">
        <h3><b> <a href="#">Kevin H.</a></b></h3>
        <p>Skills <i class="fa fa-angle-double-right"></i><small>Digital Marketing, </small><small>Master Prospecting, </small><small>Closing Skill, </small><small>Recruitment Skill, </small></p>
        <i class="fa fa-inr"></i><span> 7 Yrs Experience</span><br>
        <i class="fa fa-map-marker"></i><span> Quezon City PH</span><br>
        <p><i class="fa fa-star"></i><span> Rating 9/10</span> </p>
    
     
      <div class="view-btn">
        <button type="button" class="btn btn-primary">View Profile</button>
      </div>
   </div>
   </div>
            </div>
            <div class="carousel-item col-md-3">
                   <div class="salesman-details">
      <div class="salesman-update">
        <img src=" . . .">
        <h3><b> <a href="#">Kevin H.</a></b></h3>
        <p>Skills <i class="fa fa-angle-double-right"></i><small>Digital Marketing, </small><small>Master Prospecting, </small><small>Closing Skill, </small><small>Recruitment Skill, </small></p>
        <i class="fa fa-inr"></i><span> 7 Yrs Experience</span><br>
        <i class="fa fa-map-marker"></i><span> Quezon City PH</span><br>
        <p><i class="fa fa-star"></i><span> Rating 9/10</span> </p>
    
     
      <div class="view-btn">
        <button type="button" class="btn btn-primary">View Profile</button>
      </div>
   </div>
   </div>
            </div>
            <div class="carousel-item col-md-3">
                 <div class="salesman-details">
      <div class="salesman-update">
        <img src=" . . .">
        <h3><b> <a href="#">Kevin H.</a></b></h3>
        <p>Skills <i class="fa fa-angle-double-right"></i><small>Digital Marketing, </small><small>Master Prospecting, </small><small>Closing Skill, </small><small>Recruitment Skill, </small></p>
        <i class="fa fa-inr"></i><span> 7 Yrs Experience</span><br>
        <i class="fa fa-map-marker"></i><span> Quezon City PH</span><br>
        <p><i class="fa fa-star"></i><span> Rating 9/10</span> </p>
    
     
      <div class="view-btn">
        <button type="button" class="btn btn-primary">View Profile</button>
      </div>
   </div>
   </div>
            </div>
            <div class="carousel-item col-md-3">
                  <div class="salesman-details">
      <div class="salesman-update">
        <img src=" . . .">
        <h3><b> <a href="#">Kevin H.</a></b></h3>
        <p>Skills <i class="fa fa-angle-double-right"></i><small>Digital Marketing, </small><small>Master Prospecting, </small><small>Closing Skill, </small><small>Recruitment Skill, </small></p>
        <i class="fa fa-inr"></i><span> 7 Yrs Experience</span><br>
        <i class="fa fa-map-marker"></i><span> Quezon City PH</span><br>
        <p><i class="fa fa-star"></i><span> Rating 9/10</span> </p>
    
     
      <div class="view-btn">
        <button type="button" class="btn btn-primary">View Profile</button>
      </div>
   </div>
   </div>
            </div>
            <div class="carousel-item col-md-3">
                   <div class="salesman-details">
      <div class="salesman-update">
        <img src=" . . .">
        <h3><b> <a href="#">Kevin H.</a></b></h3>
        <p>Skills <i class="fa fa-angle-double-right"></i><small>Digital Marketing, </small><small>Master Prospecting, </small><small>Closing Skill, </small><small>Recruitment Skill, </small></p>
        <i class="fa fa-inr"></i><span> 7 Yrs Experience</span><br>
        <i class="fa fa-map-marker"></i><span> Quezon City PH</span><br>
        <p><i class="fa fa-star"></i><span> Rating 9/10</span> </p>
    
     
      <div class="view-btn">
        <button type="button" class="btn btn-primary">View Profile</button>
      </div>
   </div>
   </div>
            </div>
            <div class="carousel-item col-md-3">
                  <div class="salesman-details">
      <div class="salesman-update">
        <img src=" . . .">
        <h3><b> <a href="#">Kevin H.</a></b></h3>
        <p>Skills <i class="fa fa-angle-double-right"></i><small>Digital Marketing, </small><small>Master Prospecting, </small><small>Closing Skill, </small><small>Recruitment Skill, </small></p>
        <i class="fa fa-inr"></i><span> 7 Yrs Experience</span><br>
        <i class="fa fa-map-marker"></i><span> Quezon City PH</span><br>
        <p><i class="fa fa-star"></i><span> Rating 9/10</span> </p>
    
     
      <div class="view-btn">
        <button type="button" class="btn btn-primary">View Profile</button>
      </div>
   </div>
   </div>
            </div>
            <div class="carousel-item col-md-3">
                  <div class="salesman-details">
      <div class="salesman-update">
        <img src=" . . .">
        <h3><b> <a href="#">Kevin H.</a></b></h3>
        <p>Skills <i class="fa fa-angle-double-right"></i><small>Digital Marketing, </small><small>Master Prospecting, </small><small>Closing Skill, </small><small>Recruitment Skill, </small></p>
        <i class="fa fa-inr"></i><span> 7 Yrs Experience</span><br>
        <i class="fa fa-map-marker"></i><span> Quezon City PH</span><br>
        <p><i class="fa fa-star"></i><span> Rating 9/10</span> </p>
    
     
      <div class="view-btn">
        <button type="button" class="btn btn-primary">View Profile</button>
      </div>
   </div>
   </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
            <i class="fa fa-chevron-left fa-lg text-danger"></i>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
            <i class="fa fa-chevron-right fa-lg text-muted"></i>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>