Bootstrap Snippet Multi item Carousel using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<br/>
    
    
<section class="d-flex align-items-center">
       
                        <!-- staff slider -->
            <div class="carousel slide w-100" data-ride="carousel" data-interval="4000" id="staffCarousel">
                <div class="carousel-inner">
                        <div class="carousel-item mt-0 flex-column flex-sm-row">
                            <div class="col-lg-2 col-md-3 col-sm-6 col-xs-2">
                                <div class=" h-100">
                              <div class="card-img-top card-img-top-200 card-zoom">
                                  <div class="box"> <img src="//via.placeholder.com/600x400?text=1">
                                <div class="box-content">
                                    <h3 class="title">Title goes here</h3>                                    <ul class="icon">
                                  <li><a href="#"><span><i class="fa fa-edit"></i></span></a></li>
                                  <li><a href="#"><span><i class="fa fa-trash"></i></span></a></li>
                                 </ul>
                                   </div>
                               </div>
                                 </div>
                              <div class="card-body text-center">
                                  <h6 class="small text-wide pb-2">Title goes here</h6>
                                 </div>
                             </div>
                            </div>
                            <div class="col-lg-2 col-md-3 col-sm-6 col-xs-2">
                                <div class=" h-100">
                              <div class="card-img-top card-img-top-200 card-zoom">
                                  <div class="box"> <img src="//via.placeholder.com/400x300?text=2">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.carousel-item.active.left > div:not(:first-child) {
    display:none;
}
.carousel-item.active.right > div:not(:first-child) {
    display:none;
}
.carousel-control {
    color:#333;
 }
.carousel-control.left,
.carousel-control.right {background-image:none;}
.controls
{
    margin-top: 20px;
}
[data-slide="prev"]
{
    margin-right: 10px;
}
.blog .carousel-indicators {
    left: 0;
    top: auto;
    bottom: -40px;
}
/* The colour of the indicators */
.blog .carousel-indicators li {
    background: #a3a3a3;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
    $("#staffCarousel,.MultiCarousel").carousel({
    
    
    
    
    interval: false
    
    }); 
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Multi item Carousel"
Bootstrap 4.0.0 Snippet by kiranm

Related: See More

Questions / Comments:

"Multi item Carousel" Bootstrap 4.0.0 Snippet by kiranm

Related: See More

Questions / Comments:

"Multi item Carousel"
Bootstrap 4.0.0 Snippet by kiranm