Carousel
Un componente di presentazione per scorrere elementi, immagini o diapositive di testo.
Come funziona
Il carousel permette di scorrere una serie di contenuti ed è realizzato con trasformazioni CSS 3D e JavaScript. Può essere utilizzato con una serie di immagini, testo o codice personalizzato. Include anche il supporto per i controlli e gli indicatori precedente/successivo ed i dots di indicazione posizione.
Il carousel può contenere vari tipi di componenti, solitamente cards o immagini.
Il plugin utilizzato è Splide.
Implementazione
Accessibilità
Splide segue le indicazioni del W3C per l’implementazione di un carousel accessibile.
Il plugin, attraverso l’opzione i18n, offre la possibilità di tradurre le aria-label utilizzate per gli elementi di interfaccia.
Bootstrap Italia fornisce le label già tradotte in italiano come segue:
- prev: ‘Slide precedente’
- next: ‘Slide successiva’
- first: ‘Vai alla prima slide’
- last: ‘Vai all’ultima slide’
- slideX: ‘Vai alla slide %s’
- pageX: ‘Vai a pagina %s’
- play: ‘Attiva autoplay’
- pause: ‘Pausa autoplay’
Per tradurre le label in altre lingue è sufficiente utilizzare l’attributo opzionale data-splide sul div it-carousel-wrapper splide come nell’esempio seguente:
<div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols splide" data-bs-carousel-splide data-splide='{"i18n":{"slideX":"Go to slide %s","pageX":"Go to page %s"}}>
Esempi di Carousel con diversi contenuti
I wrapper esterni it-carousel-wrapper e splide__track ricevono le classi necessarie per la corretta visualizzazione dei contenuti.
Titolo e Card semplici
Esempio di carousel con card semplici.
Classi da applicare:
- div
it-carousel-wrapper: viene aggiunta la classeit-carousel-landscape-abstract-three-colsche attiva la visualizzazione a 3 colonne su desktop. - div
splide__track: vengono aggiunte le classips-lg-3 pe-lg-3che implementano il padding richiesto dal breakpointlgin su.
Titolo del Carousel
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols splide" data-bs-carousel-splide>
<div class="it-header-block">
<div class="it-header-block-title">
<h2>Titolo del Carousel</h2>
</div>
</div>
<div class="splide__track ps-lg-3 pe-lg-3">
<ul class="splide__list it-carousel-all">
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">4. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">5. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper card-space">
<div class="card card-bg">
<div class="card-body">
<h5 class="card-title">6. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
Card “articolo”
Classi da applicare:
- div
it-carousel-wrapper: viene aggiunta la classeit-carousel-landscape-abstract-three-cols-arrow-visibleche attiva la visualizzazione a 3 colonne su desktop e la visualizzazione delle frecce di navigazione.
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<div class="it-carousel-wrapper splide it-carousel-landscape-abstract-three-cols-arrow-visible" data-bs-carousel-splide>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide lined_slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<div class="category-top">
<a class="category" href="#">Categoria</a>
<span class="data">10/12/2024</span>
</div>
<h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide lined_slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<div class="category-top">
<a class="category" href="#">Categoria</a>
<span class="data">10/12/2024</span>
</div>
<h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide lined_slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<div class="category-top">
<a class="category" href="#">Categoria</a>
<span class="data">10/12/2024</span>
</div>
<h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide lined_slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<div class="category-top">
<a class="category" href="#">Categoria</a>
<span class="data">10/12/2024</span>
</div>
<h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
Card con immagine in evidenza
Contiene un’immagine associata ad una card “articolo”.
Classi da applicare:
- div
it-carousel-wrapper: viene aggiunta la classeit-carousel-landscape-abstractche attiva la visualizzazione a 2 colonne in Flex.
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<div class="it-carousel-wrapper it-carousel-landscape-abstract splide" data-bs-carousel-splide>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</a>
<div class="it-text-slider-wrapper-outside">
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<div class="category-top">
<a class="category" href="#">Categoria</a>
<span class="data">10/12/2024</span>
</div>
<h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</a>
<div class="it-text-slider-wrapper-outside">
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<div class="category-top">
<a class="category" href="#">Categoria</a>
<span class="data">10/12/2024</span>
</div>
<h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<a href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</a>
<div class="it-text-slider-wrapper-outside">
<div class="card-wrapper">
<div class="card">
<div class="card-body">
<div class="category-top">
<a class="category" href="#">Categoria</a>
<span class="data">10/12/2024</span>
</div>
<h5 class="card-title big-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span class="card-signature">di Federico De Paolis</span>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
Card con immagine in alto
Classi da applicare:
- div
it-carousel-wrapper: viene aggiunta la classeit-carousel-landscape-abstract-three-colsper la visualizzazione a 3 colonne.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
Leggi di più Lorem ipsum dolor sit amet, consectetur adipiscing elit… -
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
Leggi di più Lorem ipsum dolor sit amet, consectetur adipiscing elit… -
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
Leggi di più Lorem ipsum dolor sit amet, consectetur adipiscing elit… -
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
Leggi di più Lorem ipsum dolor sit amet, consectetur adipiscing elit… -
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
Leggi di più Lorem ipsum dolor sit amet, consectetur adipiscing elit… -
Lorem ipsum dolor sit amet, consectetur adipiscing elit…
Leggi di più Lorem ipsum dolor sit amet, consectetur adipiscing elit…
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols splide" data-bs-carousel-splide>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
<div class="card-body px-3 px-md-4">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine2" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
<div class="card-body px-3 px-md-4">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine3" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
<div class="card-body px-3 px-md-4">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine4" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
<div class="card-body px-3 px-md-4">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine5" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
<div class="card-body px-3 px-md-4">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine6" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
<div class="card-body px-3 px-md-4">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<a class="read-more" href="#">
<span class="text">Leggi di più <span class="visually-hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</span></span>
<svg class="icon"><use href="/dist/svg/sprites.svg#it-arrow-right"></use></svg>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
Card speciali
Contiene Card di tipo speciale.
Classi da applicare:
- div
it-carousel-wrapper: viene aggiunta la classeit-carousel-landscape-abstract-three-colsper la visualizzazione a 3 colonne.
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols splide" data-bs-carousel-splide>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<a class="card card-img no-after special-card p-3 p-md-4" href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/360x480/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
<div class="card-body">
<div class="head-tags"><span class="data">10/10/2024</span>
</div>
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text"></p>
</div>
</a>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<a class="card card-img no-after special-card p-3 p-md-4" href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/360x480/ebebeb/808080/?text=Immagine2" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
<div class="card-body">
<div class="head-tags"><span class="data">10/10/2024</span>
</div>
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text"></p>
</div>
</a>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<a class="card card-img no-after special-card p-3 p-md-4" href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/360x480/ebebeb/808080/?text=Immagine3" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
<div class="card-body">
<div class="head-tags"><span class="data">10/10/2024</span>
</div>
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text"></p>
</div>
</a>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<a class="card card-img no-after special-card p-3 p-md-4" href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/360x480/ebebeb/808080/?text=Immagine4" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
<div class="card-body">
<div class="head-tags"><span class="data">10/10/2024</span>
</div>
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text"></p>
</div>
</a>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<a class="card card-img no-after special-card p-3 p-md-4" href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/360x480/ebebeb/808080/?text=Immagine5" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
<div class="card-body">
<div class="head-tags"><span class="data">10/10/2024</span>
</div>
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text"></p>
</div>
</a>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<a class="card card-img no-after special-card p-3 p-md-4" href="#">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/360x480/ebebeb/808080/?text=Immagine6" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
<div class="card-body">
<div class="head-tags"><span class="data">10/10/2024</span>
</div>
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
<p class="card-text"></p>
</div>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
Fullscreen di immagini
Classi da applicare:
div it-carousel-wrapper :
- viene aggiunta la classe
it-carousel-landscape-abstract-three-colsper la formattazione colonnare - viene aggiunta la classe
it-full-carouselper la visualizzazione a tutto schermo (orizzontale) - viene aggiunta la classe
it-big-imgper indicare che l’immagine contenuta è di tipo grande
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols it-full-carousel it-big-img splide" data-bs-carousel-splide>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine2" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine3" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine4" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine5" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine6" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
Fullscreen di immagini di dimensioni standard
Classi da applicare:
div it-carousel-wrapper :
- viene aggiunta la classe
it-carousel-landscape-abstract-three-colsper la formattazione colonnare - viene aggiunta la classe
it-full-carouselper la visualizzazione a tutto schermo (orizzontale) - viene aggiunta la classe
it-standard-imageper indicare che l’immagine contenuta è di tipo standard.
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols it-full-carousel it-standard-image splide" data-bs-carousel-splide>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine1" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine2" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine3" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine4" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine5" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="splide__slide">
<div class="it-single-slide-wrapper">
<div class="card-wrapper">
<div class="card card-img no-after">
<div class="img-responsive-wrapper">
<div class="img-responsive">
<div class="img-wrapper"><img src="https://placehold.co/480x360/ebebeb/808080/?text=Immagine6" title="titolo immagine" alt="descrizione immagine"></div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
Attivazione tramite JavaScript
È possibile abilitare un Carousel manualmente con:
1
2
3
4
var elementList = [].slice.call(document.querySelectorAll('.splide'))
var masonryList = elementList.map(function (element) {
return new bootstrap.CarouselBI(element)
})
Metodi
| Metodo | Descrizione |
|---|---|
| dispose | Rimuove le funzionalità di CarouselBI |
| getInstance | Metodo statico che restituisce l'istanza CarouselBI associata ad un elemento del DOM. Esempio: bootstrap.CarouselBI.getInstance(element) |
| getOrCreateInstance | Metodo statico che restituisce un'istanza CarouselBI associata ad un elemento del DOM o ne crea una nuova nel caso non fosse stata inizializzata. Esempio: bootstrap.CarouselBI.getOrCreateInstance(element) |