Vai al contenuto principale

Bootstrap Italia

Interfacce Web Accessibili per la PA

Carousel

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’,
  • carousel: ‘carosello’,
  • select: ‘Seleziona una slide da mostrare’,
  • slide: ‘slide’,
  • slideLabel: ‘%s di %s’,

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"}}'>

I wrapper esterni it-carousel-wrapper e splide__track ricevono le classi necessarie per la corretta visualizzazione dei contenuti.

Titolo e card base solo testo

Esempio di carousel con card semplici.

Classi da applicare:

  • div it-carousel-wrapper : viene aggiunta la classe it-carousel-landscape-abstract-three-cols che attiva la visualizzazione a 3 colonne su desktop.
  • div splide__track : vengono aggiunte le classi ps-lg-3 pe-lg-3 che implementano il padding richiesto dal breakpoint lg in su.

Uso delle ombre nelle card:

Se usi ombre sulle card (.shadow) in carousel base, puoi usare le classi padding (esempio .p-2 per .shadow-sm) su .it-single-slide-wrapper per lasciare spazio utile a mostrarle. In questo caso puoi inoltre usare l’attributo data-splide='{"gap":".5rem", "breadkpoints":{"560":{"gap":".5rem"}, "768":{"gap":".5rem"}, "992":{"gap":".5rem"}}}' sul contenitore per ridurre l’intercolonna della misura necessaria in tutti i breakpoint (esempio .5rem per .p-2).

Titolo del Carousel

  • Titolo del contenuto

    Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

  • Titolo del contenuto

    Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

  • Titolo del contenuto

    Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

  • Titolo del contenuto

    Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

  • Titolo del contenuto

    Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

  • Titolo del contenuto

    Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.

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
127
128
129
130
131

<div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols splide" data-bs-carousel-splide data-splide='{"gap":".5rem", "breakpoints":{"768":{"gap":".5rem"}, "992":{"gap":".5rem"}}}'>
  <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 p-2">
          <!--start it-card-->
          <article class="it-card rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title ">
              <a href="#">Titolo del contenuto</a>
            </h3>
            <!--card body content-->
            <div class="it-card-body">
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper p-2">
          <!--start it-card-->
          <article class="it-card rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title ">
              <a href="#">Titolo del contenuto</a>
            </h3>
            <!--card body content-->
            <div class="it-card-body">
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper p-2">
          <!--start it-card-->
          <article class="it-card rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title ">
              <a href="#">Titolo del contenuto</a>
            </h3>
            <!--card body content-->
            <div class="it-card-body">
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper p-2">
          <!--start it-card-->
          <article class="it-card rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title ">
              <a href="#">Titolo del contenuto</a>
            </h3>
            <!--card body content-->
            <div class="it-card-body">
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper p-2">
          <!--start it-card-->
          <article class="it-card rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title ">
              <a href="#">Titolo del contenuto</a>
            </h3>
            <!--card body content-->
            <div class="it-card-body">
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper p-2">
          <!--start it-card-->
          <article class="it-card rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title ">
              <a href="#">Titolo del contenuto</a>
            </h3>
            <!--card body content-->
            <div class="it-card-body">
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
    </ul>
  </div>
</div>

Card editoriali solo testo

Esempio di carousel con card editoriali.

Classi da applicare:

  • div it-carousel-wrapper: viene aggiunta la classe it-carousel-landscape-abstract-three-cols-arrow-visible che attiva la visualizzazione a 3 colonne su desktop e la visualizzazione delle frecce di navigazione.

Altezze delle card:

Per visualizzare card di eguale altezza nel caso di contenuti diversi (card con classe .it-card-height-full), è necessario applicare l’attributo data-splide='{"height":"auto"}' sul wrapper e la classe .h-100 su ogni elemento .it-single-slide-wrapper.

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

<div class="it-carousel-wrapper splide it-carousel-landscape-abstract-three-cols-arrow-visible" data-bs-carousel-splide data-splide='{"height":"auto"}'>
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide lined_slide">
        <div class="it-single-slide-wrapper h-100 p-2">
          <!--start it-card-->
          <article class="it-card it-card-height-full rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title it-card-title-icon ">
              <a href="#">Titolo contenuto</a>
            </h3>
            <!--card body content-->
            <div class="it-card-body">
              <address class="it-card-signature">di Gino Rosso</address>
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento. </p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <div class="it-card-taxonomy">
                <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
              </div>
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide lined_slide">
        <div class="it-single-slide-wrapper h-100 p-2">
          <!--start it-card-->
          <article class="it-card it-card-height-full rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title it-card-title-icon ">
              <a href="#">Titolo contenuto</a>
            </h3>
            <!--card body content-->
            <div class="it-card-body">
              <address class="it-card-signature">di Gino Rosso</address>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <div class="it-card-taxonomy">
                <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
              </div>
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide lined_slide">
        <div class="it-single-slide-wrapper h-100 p-2">
          <!--start it-card-->
          <article class="it-card it-card-height-full rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title it-card-title-icon ">
              <a href="#">Titolo contenuto</a>
            </h3>
            <!--card body content-->
            <div class="it-card-body">
              <address class="it-card-signature">di Gino Rosso</address>
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <div class="it-card-taxonomy">
                <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
              </div>
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide lined_slide">
        <div class="it-single-slide-wrapper h-100 p-2">
          <!--start it-card-->
          <article class="it-card it-card-height-full rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title it-card-title-icon ">
              <a href="#">Titolo contenuto</a>
            </h3>
            <!--card body content-->
            <div class="it-card-body">
              <address class="it-card-signature">di Gino Rosso</address>
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <div class="it-card-taxonomy">
                <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
              </div>
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
    </ul>
  </div>
</div>

Card editoriali inline (orizzontali)

Usa le varianti di card editoriale inline (orizzontali).

Classi da applicare:

  • div it-carousel-wrapper: viene aggiunta la classe it-carousel-landscape-abstract.

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

<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 p-2">
          <!--start it-card-->
          <article class="it-card it-card-inline it-card-image rounded shadow-sm border">
            <!--card first child is all the card content: title (link) + body + footer -->
            <div class="it-card-inline-content">
              <h3 class="it-card-title ">
                <a href="#">Titolo contenuto editoriale</a>
              </h3>
              <div class="it-card-body">
                <address class="it-card-signature">di Maria Verde</address>
                <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
              </div>
              <footer class="it-card-related it-card-footer">
                <div class="it-card-taxonomy">
                  <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
                </div>
                <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
              </footer>
            </div>
            <!--card second child is the image (optional)-->
            <div class="it-card-image-wrapper">
              <div class="ratio ratio-16x9">
                <figure class="figure img-full">
                  <img src="https://picsum.photos/seed/city/800/600" alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.">
                </figure>
              </div>
            </div>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper p-2">
          <!--start it-card-->
          <article class="it-card it-card-inline it-card-image rounded shadow-sm border">
            <!--card first child is all the card content: title (link) + body + footer -->
            <div class="it-card-inline-content">
              <h3 class="it-card-title ">
                <a href="#">Titolo contenuto editoriale</a>
              </h3>
              <div class="it-card-body">
                <address class="it-card-signature">di Maria Verde</address>
                <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
              </div>
              <footer class="it-card-related it-card-footer">
                <div class="it-card-taxonomy">
                  <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
                </div>
                <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
              </footer>
            </div>
            <!--card second child is the image (optional)-->
            <div class="it-card-image-wrapper">
              <div class="ratio ratio-16x9">
                <figure class="figure img-full">
                  <img src="https://picsum.photos/seed/city/800/600" alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.">
                </figure>
              </div>
            </div>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper p-2">
          <!--start it-card-->
          <article class="it-card it-card-inline it-card-image rounded shadow-sm border">
            <!--card first child is all the card content: title (link) + body + footer -->
            <div class="it-card-inline-content">
              <h3 class="it-card-title ">
                <a href="#">Titolo contenuto editoriale</a>
              </h3>
              <div class="it-card-body">
                <address class="it-card-signature">di Maria Verde</address>
                <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
              </div>
              <footer class="it-card-related it-card-footer">
                <div class="it-card-taxonomy">
                  <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
                </div>
                <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
              </footer>
            </div>
            <!--card second child is the image (optional)-->
            <div class="it-card-image-wrapper">
              <div class="ratio ratio-16x9">
                <figure class="figure img-full">
                  <img src="https://picsum.photos/seed/city/800/600" alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.">
                </figure>
              </div>
            </div>
          </article>
          <!--end it-card-->
        </div>
      </li>
    </ul>
  </div>
</div>

Card editoriali con immagine in alto

Classi da applicare:

  • div it-carousel-wrapper: viene aggiunta la classe it-carousel-landscape-abstract-three-cols per 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191

<div class="it-carousel-wrapper it-carousel-landscape-abstract-three-cols splide" data-bs-carousel-splide data-splide='{"height":"auto", "gap":".5rem", "breakpoints":{"768":{"gap":".5rem"}, "992":{"gap":".5rem"}}}'>
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">
        <div class="it-single-slide-wrapper h-100 p-2">
          <!--start it-card-->
          <article class="it-card it-card-image it-card-height-full rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title ">
              <a href="#">Titolo del contenuto</a>
            </h3>
            <!--card second child is the image (optional)-->
            <div class="it-card-image-wrapper">
              <div class="ratio ratio-16x9">
                <figure class="figure img-full">
                  <img src="https://picsum.photos/seed/city/800/600" alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.">
                </figure>
              </div>
            </div>
            <!--card body content-->
            <div class="it-card-body">
              <p class="it-card-text">Questo è un testo breve.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <div class="it-card-taxonomy">
                <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
              </div>
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper h-100 p-2">
          <!--start it-card-->
          <article class="it-card it-card-image it-card-height-full rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title ">
              <a href="#">Titolo del contenuto</a>
            </h3>
            <!--card second child is the image (optional)-->
            <div class="it-card-image-wrapper">
              <div class="ratio ratio-16x9">
                <figure class="figure img-full">
                  <img src="https://picsum.photos/seed/city/800/600" alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.">
                </figure>
              </div>
            </div>
            <!--card body content-->
            <div class="it-card-body">
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <div class="it-card-taxonomy">
                <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
              </div>
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper h-100 p-2">
          <!--start it-card-->
          <article class="it-card it-card-image it-card-height-full rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title ">
              <a href="#">Titolo del contenuto</a>
            </h3>
            <!--card second child is the image (optional)-->
            <div class="it-card-image-wrapper">
              <div class="ratio ratio-16x9">
                <figure class="figure img-full">
                  <img src="https://picsum.photos/seed/city/800/600" alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.">
                </figure>
              </div>
            </div>
            <!--card body content-->
            <div class="it-card-body">
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <div class="it-card-taxonomy">
                <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
              </div>
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper h-100 p-2">
          <!--start it-card-->
          <article class="it-card it-card-image it-card-height-full rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title ">
              <a href="#">Titolo del contenuto</a>
            </h3>
            <!--card second child is the image (optional)-->
            <div class="it-card-image-wrapper">
              <div class="ratio ratio-16x9">
                <figure class="figure img-full">
                  <img src="https://picsum.photos/seed/city/800/600" alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.">
                </figure>
              </div>
            </div>
            <!--card body content-->
            <div class="it-card-body">
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <div class="it-card-taxonomy">
                <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
              </div>
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper h-100 p-2">
          <!--start it-card-->
          <article class="it-card it-card-image it-card-height-full rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title ">
              <a href="#">Titolo del contenuto</a>
            </h3>
            <!--card second child is the image (optional)-->
            <div class="it-card-image-wrapper">
              <div class="ratio ratio-16x9">
                <figure class="figure img-full">
                  <img src="https://picsum.photos/seed/city/800/600" alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.">
                </figure>
              </div>
            </div>
            <!--card body content-->
            <div class="it-card-body">
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <div class="it-card-taxonomy">
                <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
              </div>
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
      <li class="splide__slide">
        <div class="it-single-slide-wrapper h-100 p-2">
          <!--start it-card-->
          <article class="it-card it-card-image it-card-height-full rounded shadow-sm border">
            <!--card first child is the title (link)-->
            <h3 class="it-card-title ">
              <a href="#">Titolo del contenuto</a>
            </h3>
            <!--card second child is the image (optional)-->
            <div class="it-card-image-wrapper">
              <div class="ratio ratio-16x9">
                <figure class="figure img-full">
                  <img src="https://picsum.photos/seed/city/800/600" alt="Breve descrizione immagine se ha senso nel contesto, marcare altrimenti come decorativa lasciando l'alt applicato ma vuoto.">
                </figure>
              </div>
            </div>
            <!--card body content-->
            <div class="it-card-body">
              <p class="it-card-text">Questo è un testo breve che riassume il contenuto della pagina di destinazione in massimo tre o quattro righe, senza troncamento.</p>
            </div>
            <!--finally the card footer metadata-->
            <footer class="it-card-related it-card-footer">
              <div class="it-card-taxonomy">
                <a href="#" class="it-card-category it-card-link link-secondary"><span class="visually-hidden">Categoria correlata: </span>Categoria</a>
              </div>
              <time class="it-card-date" datetime="2026-04-22">22 aprile 2026</time>
            </footer>
          </article>
          <!--end it-card-->
        </div>
      </li>
    </ul>
  </div>
</div>

Fullscreen di immagini

Classi da applicare:

div it-carousel-wrapper :

  • viene aggiunta la classe it-carousel-landscape-abstract-three-cols per la formattazione colonnare
  • viene aggiunta la classe it-full-carousel per la visualizzazione a tutto schermo (orizzontale)
  • viene aggiunta la classe it-big-img per indicare che l’immagine contenuta è di tipo grande
  • descrizione immagine
  • descrizione immagine
  • descrizione immagine
  • descrizione immagine
  • descrizione immagine
  • descrizione immagine

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-cols per la formattazione colonnare
  • viene aggiunta la classe it-full-carousel per la visualizzazione a tutto schermo (orizzontale)
  • viene aggiunta la classe it-standard-image per indicare che l’immagine contenuta è di tipo standard.
  • descrizione immagine
  • descrizione immagine
  • descrizione immagine
  • descrizione immagine
  • descrizione immagine
  • descrizione immagine

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 codice

Nel caso in cui si desidera che il componente sia inizializzato in maniera automatica utilizzare l’attributo data-bs-carousel-splide per la sua inizializzazione.

Nel caso in cui si desidera importare e inizializzare autonomamente il componente l’attributo data-bs-carousel-splide non deve essere incluso così da evitare inizializzazioni automatiche che possono portare a comportamenti inaspettati.

Per maggiori informazioni consulta la sezione JavaScript di Bootstrap Italia.

È possibile abilitare un Carousel manualmente con:

1
2
3
4
5
6

import { Carousel } from 'bootstrap-italia';

const elementList = document.querySelectorAll('.splide');
const carouselElements = elementList.forEach((element) => {
  return new Carousel(element)
})

Metodi

Metodo Descrizione
dispose Rimuove le funzionalità di Carousel
getInstance Metodo statico che restituisce l'istanza Carousel associata ad un elemento del DOM. Esempio: bootstrap.Carousel.getInstance(element)
getOrCreateInstance Metodo statico che restituisce un'istanza Carousel associata ad un elemento del DOM o ne crea una nuova nel caso non fosse stata inizializzata. Esempio: bootstrap.Carousel.getOrCreateInstance(element)

Properties

Il selettore da utilizzare per le sovrascrittura delle property è .it-carousel-wrapper. La descrizione delle custom properties è in inglese perché risiede nei files .scss dei componenti.

Properties statiche

Variabile CSS Descrizione (Inglese) Predefinito
--bsi-carousel-arrow-size Controls the arrow button size, using spacing tokens. var(--bsi-spacing-xl)
--bsi-carousel-arrow-icon-size Controls the arrow icon size, using spacing tokens var(--bsi-spacing-s)
--bsi-carousel-arrow-background Controls the arrow button background, using color tokens var(--bsi-color-background-primary)
--bsi-carousel-arrow-icon-color Controls the arrow icon color, using color tokens var(--bsi-color-text-inverse)
--bsi-carousel-arrow-offset Controls the arrow offset from the carousel edges, using spacing tokens var(--bsi-spacing-m)
--bsi-carousel-card-padding-bottom Controls the card bottom padding, using spacing tokens var(--bsi-spacing-s)
--bsi-carousel-divider-color Controls the divider color between slides, using color tokens var(--bsi-color-border-subtle)
--bsi-carousel-divider-offset Controls the divider offset from the slide edge, using spacing tokens var(--bsi-spacing-xs)
--bsi-carousel-heading-font-size Controls the heading font size for carousel header. 1.75rem
--bsi-carousel-heading-padding-inline Controls the inline padding for carousel header, using spacing tokens var(--bsi-spacing-m)
--bsi-carousel-heading-border-color Controls the heading border color, using color tokens var(--bsi-color-border-subtle)
--bsi-carousel-landscape-card-spacing Controls the landscape card body spacing, using spacing tokens var(--bsi-spacing-xxl)
--bsi-carousel-pagination-dot-size Controls the dot size for carousel pagination, using spacing tokens 1rem
--bsi-carousel-pagination-dot-color Controls the dot color for carousel pagination. var(--bsi-color-background-subtle)
--bsi-carousel-pagination-spacing Controls the spacing around pagination dots, using spacing tokens var(--bsi-spacing-m)
--bsi-carousel-pagination-height Controls the pagination height, used for arrow vertical alignment var(--bsi-carousel-pagination-dot-size)
--bsi-carousel-track-padding-top Controls the track top padding, using spacing tokens. var(--bsi-spacing-m)

Breaking change

Implementato negli esempi il nuovo componente card definito dalle classi .it-card e relativi modificatori. Il markup degli esempi e gli attributi per attivare il componente sono inoltre cambiati laddove c’è la necessità di gestire le altezze delle card con classi .it-card-full-height e/o la necessità di mostrarne le ombre .shadow-.

Le classi legacy di Bootstrap .card sono ora deprecate ma saranno mantenute nei fogli di stile fino al prossimo rilascio maggiore, per permettere una migrazione graduale.

Lato JavaScript il componente Carousel deve essere importato tramite la classe Carousel e non più CarouselBI.