HTML
xxxxxxxxxx1
<div id="carousel-example-multi" class="carousel slide carousel-multi-item v-2" data-ride="carousel">2
3
<!--Controls-->4
<div class="controls-top mt-4">5
<a class="btn-floating mdb-color" href="#carousel-example-multi" data-slide="prev"><i class="fas fa-chevron-left"></i></a>6
<a class="btn-floating mdb-color" href="#carousel-example-multi" data-slide="next"><i class="fas fa-chevron-right"></i></a>7
</div>8
<!--/.Controls-->9
10
<!-- Indicators -->11
<ol class="carousel-indicators">12
<li data-target="#carousel-example-multi" data-slide-to="0" class="active"></li>13
<li data-target="#carousel-example-multi" data-slide-to="1"></li>14
<li data-target="#carousel-example-multi" data-slide-to="2"></li>15
<li data-target="#carousel-example-multi" data-slide-to="3"></li>16
<li data-target="#carousel-example-multi" data-slide-to="4"></li>17
<li data-target="#carousel-example-multi" data-slide-to="5"></li>18
<li data-target="#carousel-example-multi" data-slide-to="6"></li>19
<li data-target="#carousel-example-multi" data-slide-to="7"></li>20
<li data-target="#carousel-example-multi" data-slide-to="8"></li>21
<li data-target="#carousel-example-multi" data-slide-to="9"></li>22
<li data-target="#carousel-example-multi" data-slide-to="10"></li>23
<li data-target="#carousel-example-multi" data-slide-to="11"></li>24
<li data-target="#carousel-example-multi" data-slide-to="12"></li>25
<li data-target="#carousel-example-multi" data-slide-to="13"></li>26
<li data-target="#carousel-example-multi" data-slide-to="14"></li>27
<li data-target="#carousel-example-multi" data-slide-to="15"></li>28
<li data-target="#carousel-example-multi" data-slide-to="16"></li>29
<li data-target="#carousel-example-multi" data-slide-to="17"></li>30
<li data-target="#carousel-example-multi" data-slide-to="18"></li>31
<li data-target="#carousel-example-multi" data-slide-to="19"></li>32
</ol>33
<!--/.Indicators-->34
35
<div class="carousel-inner" role="listbox">36
37
<div class="carousel-item active">38
<div class="col-md-4">39
<div class="parent z-depth-1-half mt-3">40
<p class="title living-coral-text font-weight-bold">2019 Living Coral</p>41
<div class="child living-coral"></div>42
<div class="coty__colors_box d-flex justify-content-between">43
<p class="mb-0 mr-4"><span class="h6">HEX</span> #FF6F61</p>44
<p class="mb-0"><span class="h6">RGB</span> 255 111 97</p>45
</div>46
</div>47
</div>48
</div>49
<div class="carousel-item">50
<div class="col-md-4">51
<div class="parent z-depth-1-half mt-3">52
<p class="title ultra-violet-text font-weight-bold">2018 Ultra Violet</p>53
<div class="child ultra-violet"></div>54
<div class="coty__colors_box d-flex justify-content-between">55
<p class="mb-0 mr-4"><span class="h6">HEX</span> #645394</p>56
<p class="mb-0"><span class="h6">RGB</span> 100 83 148</p>57
</div>58
</div>59
</div>60
</div>61
<div class="carousel-item">62
<div class="col-md-4">63
<div class="parent z-depth-1-half mt-3">64
<p class="title greenery-text font-weight-bold">2017 Greenery</p>65
<div class="child greenery"></div>66
<div class="coty__colors_box d-flex justify-content-between">67
<p class="mb-0 mr-4"><span class="h6">HEX</span> #91B54D</p>68
<p class="mb-0"><span class="h6">RGB</span> 145 181 77</p>69
</div>70
</div>71
</div>72
</div>73
<div class="carousel-item">74
<div class="col-md-4">75
<div class="parent z-depth-1-half mt-3">76
<p class="title rose-quartz-text font-weight-bold">2016 Rose Quartz</p>77
<div class="child rose-quartz"></div>78
<div class="coty__colors_box d-flex justify-content-between">79
<p class="mb-0 mr-4"><span class="h6">HEX</span> #F8CDCD</p>80
<p class="mb-0"><span class="h6">RGB</span> 247 205 204</p>81
</div>82
</div>83
</div>84
</div>85
<div class="carousel-item">86
<div class="col-md-4">87
<div class="parent z-depth-1-half mt-3">88
<p class="title serenity-text font-weight-bold">2016 Serenity</p>89
<div class="child serenity"></div>90
<div class="coty__colors_box d-flex justify-content-between">91
<p class="mb-0 mr-4"><span class="h6">HEX</span> #95AAD3</p>92
<p class="mb-0"><span class="h6">RGB</span> 148 170 211</p>93
</div>94
</div>95
</div>96
</div>97
<div class="carousel-item">98
<div class="col-md-4">99
<div class="parent z-depth-1-half mt-3">100
<p class="title marsala-text font-weight-bold">2015 Marsala</p>101
<div class="child marsala"></div>102
<div class="coty__colors_box d-flex justify-content-between">103
<p class="mb-0 mr-4"><span class="h6">HEX</span> #975A58</p>104
<p class="mb-0"><span class="h6">RGB</span> 151 89 88</p>105
</div>106
</div>107
</div>108
</div>109
<div class="carousel-item">110
<div class="col-md-4">111
<div class="parent z-depth-1-half mt-3">112
<p class="title radiant-orchid-text font-weight-bold">2014 Radiant Orchid</p>113
<div class="child radiant-orchid"></div>114
<div class="coty__colors_box d-flex justify-content-between">115
<p class="mb-0 mr-4"><span class="h6">HEX</span> #B067A1</p>116
<p class="mb-0"><span class="h6">RGB</span> 176 103 160</p>117
</div>118
</div>119
</div>120
</div>121
<div class="carousel-item">122
<div class="col-md-4">123
<div class="parent z-depth-1-half mt-3">124
<p class="title emerald-text font-weight-bold">2013 Emerald</p>125
<div class="child emerald"></div>126
<div class="coty__colors_box d-flex justify-content-between">127
<p class="mb-0 mr-4"><span class="h6">HEX</span> #00997B</p>128
<p class="mb-0"><span class="h6">RGB</span> 0 153 123</p>129
</div>130
</div>131
</div>132
</div>133
<div class="carousel-item">134
<div class="col-md-4">135
<div class="parent z-depth-1-half mt-3">136
<p class="title tangerine-tango-text font-weight-bold">2012 Tangerine Tango</p>137
<div class="child tangerine-tango"></div>138
<div class="coty__colors_box d-flex justify-content-between">139
<p class="mb-0 mr-4"><span class="h6">HEX</span> #E34F33</p>140
<p class="mb-0"><span class="h6">RGB</span> 227 79 50</p>141
</div>142
</div>143
</div>144
</div>145
<div class="carousel-item">146
<div class="col-md-4">147
<div class="parent z-depth-1-half mt-3">148
<p class="title honeysuckle-text font-weight-bold">2011 Honeysuckle</p>149
<div class="child honeysuckle"></div>150
<div class="coty__colors_box d-flex justify-content-between">151
<p class="mb-0 mr-4"><span class="h6">HEX</span> #D85A7B</p>152
<p class="mb-0"><span class="h6">RGB</span> 216 90 122</p>153
</div>154
</div>155
</div>156
</div>157
<div class="carousel-item">158
<div class="col-md-4">159
<div class="parent z-depth-1-half mt-3">160
<p class="title turquoise-text font-weight-bold">2010 Turquoise</p>161
<div class="child turquoise"></div>162
<div class="coty__colors_box d-flex justify-content-between">163
<p class="mb-0 mr-4"><span class="h6">HEX</span> #45B5AA</p>164
<p class="mb-0"><span class="h6">RGB</span> 69 181 170</p>165
</div>166
</div>167
</div>168
</div>169
<div class="carousel-item">170
<div class="col-md-4">171
<div class="parent z-depth-1-half mt-3">172
<p class="title mimosa-text font-weight-bold">2009 Mimosa</p>173
<div class="child mimosa"></div>174
<div class="coty__colors_box d-flex justify-content-between">175
<p class="mb-0 mr-4"><span class="h6">HEX</span> #F0C05A</p>176
<p class="mb-0"><span class="h6">RGB</span> 240 192 90</p>177
</div>178
</div>179
</div>180
</div>181
<div class="carousel-item">182
<div class="col-md-4">183
<div class="parent z-depth-1-half mt-3">184
<p class="title blue-iris-text font-weight-bold">2008 Blue Iris</p>185
<div class="child blue-iris"></div>186
<div class="coty__colors_box d-flex justify-content-between">187
<p class="mb-0 mr-4"><span class="h6">HEX</span> #5A5B9F</p>188
<p class="mb-0"><span class="h6">RGB</span> 90 91 159</p>189
</div>190
</div>191
</div>192
</div>193
<div class="carousel-item">194
<div class="col-md-4">195
<div class="parent z-depth-1-half mt-3">196
<p class="title chili-pepper-text font-weight-bold">2007 Chili Pepper</p>197
<div class="child chili-pepper"></div>198
<div class="coty__colors_box d-flex justify-content-between">199
<p class="mb-0 mr-4"><span class="h6">HEX</span> #9B1B30</p>200
<p class="mb-0"><span class="h6">RGB</span> 155 27 48</p>201
</div>202
</div>203
</div>204
</div>205
<div class="carousel-item">206
<div class="col-md-4">207
<div class="parent z-depth-1-half mt-3">208
<p class="title sand-dollar-text font-weight-bold">2006 Sand Dollar</p>209
<div class="child sand-dollar"></div>210
<div class="coty__colors_box d-flex justify-content-between">211
<p class="mb-0 mr-4"><span class="h6">HEX</span> #e0cebc</p>212
<p class="mb-0"><span class="h6">RGB</span> 224, 206, 188</p>213
</div>214
</div>215
</div>216
</div>217
<div class="carousel-item">218
<div class="col-md-4">219
<div class="parent z-depth-1-half mt-3">220
<p class="title blue-turquoise-text font-weight-bold">2005 Blue Turquoise</p>221
<div class="child blue-turquoise"></div>222
<div class="coty__colors_box d-flex justify-content-between">223
<p class="mb-0 mr-4"><span class="h6">HEX</span> #00b2ad</p>224
<p class="mb-0"><span class="h6">RGB</span> 0, 178, 173</p>225
</div>226
</div>227
</div>228
</div>229
<div class="carousel-item">230
<div class="col-md-4">231
<div class="parent z-depth-1-half mt-3">232
<p class="title tigerlily-text font-weight-bold">2004 Tigerlily</p>233
<div class="child tigerlily"></div>234
<div class="coty__colors_box d-flex justify-content-between">235
<p class="mb-0 mr-4"><span class="h6">HEX</span> #f74c3d</p>236
<p class="mb-0"><span class="h6">RGB</span> 247, 76, 61</p>237
</div>238
</div>239
</div>240
</div>241
<div class="carousel-item">242
<div class="col-md-4">243
<div class="parent z-depth-1-half mt-3">244
<p class="title aqua-sky-text font-weight-bold">2003 Aqua Sky</p>245
<div class="child aqua-sky"></div>246
<div class="coty__colors_box d-flex justify-content-between">247
<p class="mb-0 mr-4"><span class="h6">HEX</span> #5cc6c3</p>248
<p class="mb-0"><span class="h6">RGB</span> 92, 198, 195</p>249
</div>250
</div>251
</div>252
</div>253
<div class="carousel-item">254
<div class="col-md-4">255
<div class="parent z-depth-1-half mt-3">256
<p class="title true-red-text font-weight-bold">2002 True Red</p>257
<div class="child true-red"></div>258
<div class="coty__colors_box d-flex justify-content-between">259
<p class="mb-0 mr-4"><span class="h6">HEX</span> #d20033</p>260
<p class="mb-0"><span class="h6">RGB</span> 210, 0, 51</p>261
</div>262
</div>263
</div>264
</div>265
<div class="carousel-item">266
<div class="col-md-4">267
<div class="parent z-depth-1-half mt-3">268
<p class="title fuchsia-rose-text font-weight-bold">2001 Fuchsia Rose</p>269
<div class="child fuchsia-rose"></div>270
<div class="coty__colors_box d-flex justify-content-between">271
<p class="mb-0 mr-4"><span class="h6">HEX</span> #db0075</p>272
<p class="mb-0"><span class="h6">RGB</span> 219, 0, 117</p>273
</div>274
</div>275
</div>276
</div>277
<div class="carousel-item">278
<div class="col-md-4">279
<div class="parent z-depth-1-half mt-3">280
<p class="title cerulean-blue-text font-weight-bold">2000 Cerulean Blue</p>281
<div class="child cerulean-blue"></div>282
<div class="coty__colors_box d-flex justify-content-between">283
<p class="mb-0 mr-4"><span class="h6">HEX</span> #92aad0</p>284
<p class="mb-0"><span class="h6">RGB</span> 146, 170, 208</p>285
</div>286
</div>287
</div>288
</div>289
290
</div>291
292
</div>CSS
xxxxxxxxxx1
body {2
background-color: #f6f6f6;3
}4
.parent {5
position: relative;6
height: 420px;7
background-color: white;8
margin-bottom: 40px;9
border-radius: 16px;10
overflow: hidden;11
}12
.child {13
position: absolute;14
left: 0;15
right: 0;16
bottom: 0;17
top: 0;18
margin: auto;19
border-radius: 50%;20
height: 250px;21
width: 250px;22
background-repeat: no-repeat;23
background-size: cover;24
background-position: center;25
}26
.title {27
margin-left: 30px;28
margin-top: 25px;29
}30
.coty__colors_box {31
position: absolute;32
left: 30px;33
bottom: 20px;34
}35
.carousel-indicators li {36
background-color: #45526e !important;37
}38
.living-coral {39
background-color: #FF6F61;40
}41
.living-coral-text {42
color: #FF6F61;43
}44
.ultra-violet {45
background-color: #645394;46
}47
.ultra-violet-text {48
color: #645394;49
}50
.greenery {51
background-color: #91B54D;52
}53
.greenery-text {54
color: #91B54D;55
}56
.rose-quartz {57
background-color: #F8CDCD;58
}59
.rose-quartz-text {60
color: #F8CDCD;61
}62
.serenity {63
background-color: #95AAD3;64
}65
.serenity-text {66
color: #95AAD3;67
}68
.marsala {69
background-color: #975A58;70
}71
.marsala-text {72
color: #975A58;73
}74
.radiant-orchid {75
background-color: #B067A1;76
}77
.radiant-orchid-text {78
color: #B067A1;79
}80
.emerald {81
background-color: #00997B;82
}83
.emerald-text {84
color: #00997B;85
}86
.tangerine-tango {87
background-color: #E34F33;88
}89
.tangerine-tango-text {90
color: #E34F33;91
}92
.honeysuckle {93
background-color: #D85A7B;94
}95
.honeysuckle-text {96
color: #D85A7B;97
}98
.rose-quartz {99
background-color: #F8CDCD;100
}101
.rose-quartz-text {102
color: #F8CDCD;103
}104
.serenity {105
background-color: #95AAD3;106
}107
.serenity-text {108
color: #95AAD3;109
}110
.marsala {111
background-color: #975A58;112
}113
.marsala-text {114
color: #975A58;115
}116
.radiant-orchid {117
background-color: #B067A1;118
}119
.radiant-orchid-text {120
color: #B067A1;121
}122
.emerald {123
background-color: #00997B;124
}125
.emerald-text {126
color: #00997B;127
}128
.tangerine-tango {129
background-color: #E34F33;130
}131
.tangerine-tango-text {132
color: #E34F33;133
}134
.honeysuckle {135
background-color: #D85A7B;136
}137
.honeysuckle-text {138
color: #D85A7B;139
}140
.turquoise {141
background-color: #45B5AA;142
}143
.turquoise-text {144
color: #45B5AA;145
}146
.mimosa {147
background-color: #F0C05A;148
}149
.mimosa-text {150
color: #F0C05A;151
}152
.blue-iris {153
background-color: #5A5B9F;154
}155
.blue-iris-text {156
color: #5A5B9F;157
}158
.chili-pepper {159
background-color: #9B1B30;160
}161
.chili-pepper-text {162
color: #9B1B30;163
}164
.sand-dollar {165
background-color: #e0cebc;166
}167
.sand-dollar-text {168
color: #e0cebc;169
}170
.blue-turquoise {171
background-color: #00b2ad;172
}173
.blue-turquoise-text {174
color: #00b2ad;175
}176
.tigerlily {177
background-color: #f74c3d;178
}179
.tigerlily-text {180
color: #f74c3d;181
}182
.aqua-sky {183
background-color: #5cc6c3;184
}185
.aqua-sky-text {186
color: #5cc6c3;187
}188
.true-red {189
background-color: #d20033;190
}191
.true-red-text {192
color: #d20033;193
}194
.fuchsia-rose {195
background-color: #db0075;196
}197
.fuchsia-rose-text {198
color: #db0075;199
}200
.cerulean-blue {201
background-color: #92aad0;202
}203
.cerulean-blue-text {204
color: #92aad0;205
}JS
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<3;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
});16
function copyToClipboard(element) {17
var $temp = $("<input>");18
$("body").append($temp);19
$temp.val($(element).text()).select();20
document.execCommand("copy");21
$temp.remove();22
} Console errors: 0