xxxxxxxxxx1
<div id="carousel-videos" class="carousel slide carousel-multi-item v-2" data-ride="carousel">2
<!--Controls-->3
<div class="controls-top custom-controls-thumb">4
<div class="float-left"><a class="btn-floating" href="#carousel-videos" data-slide="prev"><i class="fas fa-angle-left fa-2x"></i></a></div>5
<div class="float-right"><a class="btn-floating" href="#carousel-videos" data-slide="next"><i class="fas fa-angle-right fa-2x"></i></a></div>6
</div>7
<!--/.Controls-->8
<div class="carousel-inner" role="listbox">9
<div class="row mt-4 text-center">10
<div class="carousel-item active">11
<div class="col-12 col-md-3 video_thumb"> 12
<a href="#" >13
<img src="https://mdbootstrap.com/img/Photos/Others/img (36).jpg" class="img-fluid img-new-thumb">14
</a>15
<div class="video-price">16
<span class="float-right"><i class="far fa-clock"></i> 0.35 sec</span>17
<span class="float-left">$9.99</span>18
</div> 19
<div class="video-details">20
<span>Title of Video</span><br>21
</div>22
</div>23
</div>24
<div class="carousel-item">25
<div class="col-12 col-md-3 video_thumb"> 26
<a href="#" >27
<img src="https://mdbootstrap.com/img/Photos/Others/img (36).jpg" class="img-fluid img-new-thumb">28
</a>29
<div class="video-price">30
<span class="float-right"><i class="far fa-clock"></i> 0.35 sec</span>31
<span class="float-left">$9.99</span>32
</div>33
<div class="video-details ">34
<span>Title of Video</span> <br>35
</div>36
</div>37
</div>38
<div class="carousel-item">39
<div class="col-12 col-md-3 video_thumb"> 40
<a href="#" >41
<img src="https://mdbootstrap.com/img/Photos/Others/img (36).jpg" class="img-fluid img-new-thumb">42
</a>43
<div class="video-price">44
<span class="float-right"><i class="far fa-clock"></i> 0.35 sec</span>45
<span class="float-left">$9.99</span>46
</div>47
<div class="video-details ">48
<span>Title of Video</span><br>49
</div>50
</div>51
</div>52
<div class="carousel-item">53
<div class="col-12 col-md-3 video_thumb"> 54
<a href="#" >55
<img src="https://mdbootstrap.com/img/Photos/Others/img (36).jpg" class="img-fluid img-new-thumb">56
</a>57
<div class="video-price">58
<span class="float-right"><i class="far fa-clock"></i> 0.35 sec</span>59
<span class="float-left">$9.99</span>60
</div>61
<div class="video-details ">62
<span>Title of Video</span><br>63
</div>64
</div>65
</div>66
<div class="carousel-item">67
<div class="col-12 col-md-3 video_thumb"> 68
<a href="#" >69
<img src="https://mdbootstrap.com/img/Photos/Others/img (36).jpg" class="img-fluid img-new-thumb">70
</a>71
<div class="video-price">72
<span class="float-right"><i class="far fa-clock"></i> 0.35 sec</span>73
<span class="float-left">$9.99</span>74
</div>75
<div class="video-details ">76
<span>Title of Video</span><br>77
</div>78
</div>79
</div>80
<div class="carousel-item">81
<div class="col-12 col-md-3 video_thumb"> 82
<a href="#" >83
<img src="https://mdbootstrap.com/img/Photos/Others/img (36).jpg" class="img-fluid img-new-thumb">84
</a>85
<div class="video-price">86
<span class="float-right"><i class="far fa-clock"></i> 0.35 sec</span>87
<span class="float-left">$9.99</span>88
</div>89
<div class="video-details ">90
<span>Title of Video</span><br>91
</div>92
</div>93
</div>94
<div class="carousel-item">95
<div class="col-12 col-md-3 video_thumb"> 96
<a href="#" >97
<img src="https://mdbootstrap.com/img/Photos/Others/img (36).jpg" class="img-fluid img-new-thumb">98
</a>99
<div class="video-price">100
<span class="float-right"><i class="far fa-clock"></i> 0.35 sec</span>101
<span class="float-left">$9.99</span>102
</div>103
<div class="video-details ">104
<span>Title of Video</span><br>105
</div>106
</div>107
</div>108
<div class="carousel-item">109
<div class="col-md-3 col-sm-6 video_thumb"> 110
<a href="#" >111
<img src="https://mdbootstrap.com/img/Photos/Others/img (36).jpg" class="img-fluid img-new-thumb">112
</a>113
<div class="video-price">114
<span class="float-right"><i class="far fa-clock"></i> 0.35 sec</span>115
<span class="float-left">$9.99</span>116
</div>117
<div class="video-details ">118
<span>Title of Video</span><br>119
</div>120
</div>121
</div>122
</div><!--row-->123
</div>124
</div>xxxxxxxxxx1
.video-details {2
text-align: left !important;3
padding: 5px;4
position: absolute;5
}6
7
.video-price {8
position: relative;9
font-size: 12px;10
bottom: 23px;11
clear: both;12
}13
14
.video-price span {15
color: #fff;16
background: #a6c;17
padding: 2px 15px;18
}xxxxxxxxxx1
$('.carousel.carousel-multi-item .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