xxxxxxxxxx1
<div class="container my-5">2
3
4
<!--Section: Content-->5
<section class="text-center dark-grey-text">6
7
<style>8
.carousel-multi-item.v-2 .carousel-inner .carousel-item.active,9
.carousel-multi-item.v-2 .carousel-item-next,10
.carousel-multi-item.v-2 .carousel-item-prev {11
display: -webkit-box;12
display: -webkit-flex;13
display: -ms-flexbox;14
display: flex; }15
.carousel-multi-item.v-2 .carousel-item-right.active,16
.carousel-multi-item.v-2 .carousel-item-next {17
-webkit-transform: translateX(50%);18
-ms-transform: translateX(50%);19
transform: translateX(50%); }20
.carousel-multi-item.v-2 .carousel-item-left.active,21
.carousel-multi-item.v-2 .carousel-item-prev {22
-webkit-transform: translateX(-50%);23
-ms-transform: translateX(-50%);24
transform: translateX(-50%); }25
.carousel-multi-item.v-2 .carousel-item-right,26
.carousel-multi-item.v-2 .carousel-item-left {27
-webkit-transform: translateX(0);28
-ms-transform: translateX(0);29
transform: translateX(0); }30
</style>31
32
<h3 class="font-weight-bold pb-4 mb-0 text-center">Gallery</h3>33
34
<div class="row">35
<div class="col-md-12">36
37
<div id="carousel-example-multi" class="carousel slide carousel-multi-item v-2" data-ride="carousel">38
39
<!--Controls-->40
<div class="controls-top">41
<a class="btn-floating bg-transparent z-depth-0 m-0" href="#carousel-example-multi" data-slide="prev"><i class="dark-grey-text fas fa-chevron-left"></i></a>42
<a class="btn-floating bg-transparent z-depth-0 m-0" href="#carousel-example-multi" data-slide="next"><i class="dark-grey-text fas fa-chevron-right"></i></a>43
</div>44
<!--/.Controls-->45
46
<div class="carousel-inner" role="listbox">47
48
<div class="carousel-item active">49
<div class="col-12 col-md-6 mb-4 mx-auto">50
<div class="view rounded z-depth-1-half">51
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(150).jpg" class="img-fluid rounded" alt="Sample image">52
</div>53
</div>54
</div>55
<div class="carousel-item">56
<div class="col-12 col-md-6 mb-4 mx-auto">57
<div class="view rounded z-depth-1-half">58
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(146).jpg" class="img-fluid rounded" alt="Sample image">59
</div>60
</div>61
</div>62
<div class="carousel-item">63
<div class="col-12 col-md-6 mb-4 mx-auto">64
<div class="view rounded z-depth-1-half">65
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(138).jpg" class="img-fluid rounded" alt="Sample image">66
</div>67
</div>68
</div>69
<div class="carousel-item">70
<div class="col-12 col-md-6 mx-auto">71
<div class="view rounded z-depth-1-half">72
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(133).jpg" class="img-fluid rounded" alt="Sample image">73
</div>74
</div>75
</div>76
<div class="carousel-item">77
<div class="col-12 col-md-6 mb-4 mx-auto">78
<div class="view rounded z-depth-1-half">79
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(148).jpg" class="img-fluid rounded" alt="Sample image">80
</div>81
</div>82
</div>83
<div class="carousel-item">84
<div class="col-12 col-md-6 mb-4 mx-auto">85
<div class="view rounded z-depth-1-half">86
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(131).jpg" class="img-fluid rounded" alt="Sample image">87
</div>88
</div>89
</div>90
91
</div>92
93
</div>94
95
</div>96
</div>97
98
</section>99
<!--Section: Content-->100
101
102
</div>1
1
xxxxxxxxxx1
$('.carousel.carousel-multi-item.v-2 .carousel-item').each(function () {2
var next = $(this).next();3
if (!next.length) {4
next = $(this).siblings(':first');5
}6
next.children(':first-child').clone().appendTo($(this));7
8
for (var i = 0; i < 4; i++) {9
next = next.next();10
if (!next.length) {11
next = $(this).siblings(':first');12
}13
next.children(':first-child').clone().appendTo($(this));14
}15
}); Console errors: 0