creare un carosello di cards bootstrap e js dentro articolo

[mariarosaria]

Buon pomeriggio a tutti.
Sto cercando di creare dentro un articolo un carosello con delle card utilizzando gli strumenti già forniti da bootstrap.
Avevo preso il codice del carousel di bootstrap e avevo cercato di modificarlo sostituendo al posto delle slide, le mie card.
Poi ho trovato due guide che fanno la stessa cosa.
Una è senza js, quella in cui scorrono 3 card per volta (questa).
Una è con codice js, e cliccando sui controlli, le card avanzano una sola per volta. (quest'altra)

Ho fatto delle prove su visual studio code e nell'anteprima riuscivo a visualizzare la prima (la seconda no), poi ho provato entrambe in fondo a questa pagina, direttamente dentro l'articolo joomla, ma non riesco a farne funzionare nessuna delle due.


Per il codice js avevo provato a metterlo all'interno dell'articolo così:

Codice: [Seleziona]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var multipleCardCarousel = document.querySelector(
  "#carouselExampleControls"
);
if (window.matchMedia("(min-width: 768px)").matches) {
  var carousel = new bootstrap.Carousel(multipleCardCarousel, {
    interval: false,
  });
  var carouselWidth = $(".carousel-inner")[0].scrollWidth;
  var cardWidth = $(".carousel-item").width();
  var scrollPosition = 0;
  $("#carouselExampleControls .carousel-control-next").on("click", function () {
    if (scrollPosition < carouselWidth - cardWidth * 4) {
      scrollPosition += cardWidth;
      $("#carouselExampleControls .carousel-inner").animate(
        { scrollLeft: scrollPosition },
        600
      );
    }
  });
  $("#carouselExampleControls .carousel-control-prev").on("click", function () {
    if (scrollPosition > 0) {
      scrollPosition -= cardWidth;
      $("#carouselExampleControls .carousel-inner").animate(
        { scrollLeft: scrollPosition },
        600
      );
    }
  });
} else {
  $(multipleCardCarousel).addClass("slide");
}</script>
In quale altro modo posso integrare js se il problema sta in questo?
Avete altri suggerimenti per creare un carosello di cards?

Grazie a tutti

[marine]

io sto testando questo ed è una figata
https://storejextensions.org/extensions/jshortcodes.html

[giusebos]

è importante che le versioni di bootstrap del template e di boostrap delle card sia identica.

Può verificarsi che qualche piccola modifica sia stata fatta o al bootstrap del template o a quello delle card, ma se così fosse è probabile che vi sia una sovrascrittura del bootstrap da parte di helix che stai usando.

Mentre per la versione che usa jquery, controlla che il tuo temnplate lo includa e che il codice estra sia inserito in un file esterno inserito nella cartella js del template e richiama questo inserendo la stringa all'inizio del codice dentro all'articolo.

[tomtomeight]

Prova ultimate slider.

[mariarosaria]

Prova ultimate slider.

Non sono riuscita a trovare quest'estensione per joomla 4

io sto testando questo ed è una figata
https://storejextensions.org/extensions/jshortcodes.html

Dai demo suppongo sia fantastico, ma prima di spenderci soldi ho voluto sbatterci ancora un po' la testa.

è importante che le versioni di bootstrap del template e di boostrap delle card sia identica.

Mi sono messa a ricontrollare il codice per bene e adesso il carosello nudo e crudo funziona. Devo sistemare un po' qualche aspetto grafico e creare dei pulsanti ad hoc per questo modulo, dato che in generale non voglio modificarne l'aspetto per gli altri slider.
Devo anche capire perchè nella versione mobile, alcune card da me modificate spariscono, mentre quelle "standard" rimangono. e comunque risistemare l'assetto per i vari schermi.
Helix per quanto riguarda le card non sovrascrive nulla, invece io stessa avevo modificato un po' l'aspetto delle card.

Una volta sistemato tutto posterò il codice se può servire a qualcuno.

Per quanto riguarda la versione con jquery non saprei da dove cominciare.Nella cartella js ho già un file chiamato jquery.countdown.min.js, vuol dire che jquery è installato?
Dentro il file del countdown c'è scritto "The Final Countdown for jQuery v2.0.4".
Scusate l'ignoranza a riguardo... Devo supporre che sia la mia versione? Come si controlla?

[tomtomeight]

Scusa ricordavo male, era unite slider e ci sta pure per j4.

[xplosion]

Vi ricordo che Joomla 4 utilizza bootstrap e quindi si può fare un bel slideshow anche senza l'utilizzo delle estensioni di terze parti. Se puoi fare con il core è meglio.  E poi non e complicato. Per abilitare il componente basta aggiungere nel index del child template questo:

Codice: [Seleziona]

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', []);E poi nel'articolo o modulo inserisci il codice bootstrap dello slideshow che trovi qui:

Codice: [Seleziona]

https://getbootstrap.com/docs/5.2/components/carousel/Ed e tutto!

[mariarosaria]

Chiedo scusa, sembra molto interessante, ma in quale punto del file index dovrei aggiungerlo?
L'unico punto "simile" mi sembra questo, ma mi da un errore di sintassi. Ovviamente con le mie conoscenze nulle. 

Codice: [Seleziona]

defined('_JEXEC') or die('Restricted Direct Access!');

use HelixUltimate\Framework\Core\HelixUltimate;
use HelixUltimate\Framework\Platform\Helper;
use HelixUltimate\Framework\System\JoomlaBridge;
use Joomla\CMS\Factory;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Uri\Uri;$app = Factory::getApplication();
$this->setHtml5(true);

E poi nell'articolo lo richiamo con "https://getbootstrap.com/docs/5.2/components/carousel/", ma il contenuto del carousel come lo sistemo rispetto a quel codice?

C'è qualche guida a riguardo?

[mariarosaria]

Ci ho sbattuto un po' la testa  , ma mi sembra di avercela fatta  . Posto il codice per un carousel di card funzionante (qui il riusltato, in fondo alla pagina).
Cerco di spiegare un po' tutto quello che ho fatto, ma dopo tutte queste parole, se dovesse servire a qualcuno, gli basterà copiare il codice e sostituire i contenuti con i propri.

Mentre aspetto delucidazioni sul sistema "integrato" suggerito da xplosion, ecco tre carousel diversi, uno per ciascuna tipologia di dispositivi.

Alla fine ho dovuto ovviare attribuendo una classe per dividere le varie card in colonne (3 per i dispositivi grandi [col-4], 2 per i medi [col-6], 1 per i dispositivi mobili [col-12]). Senza impostare una larghezza di colonna, la larghezza delle card variava in base al numero di caratteri contenuti nel testo descrittivo. Ho impostato anche un padding con px-* e py-*

La classe "cards-wrapper" che raggruppava le card come elemento flex, andava in conflitto sui dispositivi più piccoli, infatti restringendo la finestra dello schermo, con il codice che avevo trovato in questa pagina, veniva visualizzata soltanto la prima delle tre card.
Per cui il primo carousel raggruppa sotto la classe "cards-wrapper" 3 card per volta, il secondo carousel 2 card per wrapper, il terzo 1 card per ogni classe "cards-wrapper". é l'unico modo che ho trovato per renderlo responsive senza problemi.
Bisogna fare attenzione che i 3 carousel abbiano l'id diverso e che data-bs-target alla fine di ogni carousel richiami esattamente quell'id a cui fa riferimento.

Nei miei carousel ho tolto l'autoplay con data-bs-interval="false", si può rimettere con la classe bootstrap data-bs-ride="carousel"

I tre carousel vengono differenziati per i dispositivi con l'aggiunta delle classi d-none d-lg-block, d-none d-md-block d-lg-none, d-md-none. Ho dovuto creare tre classi diverse, una per ogni tipo di carosel (a 3 colonne, a 2 e a 1).

Ho inserito il css personalizzato. Ho creato un effetto seppia e blur al passaggio del mouse sulle varie card. Ho inserito un titolo sopra ogni card. Inoltre ho modificato le classi bootstrap carousel-control-prev/next ricopiandole nel file custom.css e modificandole aggiungendo "personalizzato", perchè ho cambiato l'aspetto dei pulsanti e se si hanno altri slider di bootstrap all'interno del sito (come nel mio caso) avrei modificato anche quelli.

Non ricordo altre modifiche.

Sui dispositivi mobili è possibile far avanzare le card tramite i pulsanti o facendole scorrere con il dito.

Ovviamente si accettano suggerimenti. Mi piacerebbe che qualcuno lo provasse e mi facesse sapere se funziona.

Ci ho perso la testa un bel po', ma tutto sommato il risultato è soddisfacente. Ovviamente le classi css possono essere personalizzate a proprio piacimento.

Se qualcuno è disponibile, prima di mettere risolto, si accettano ancora suggerimenti su come far scorrere una sola card per volta con js (tranne che sui dispositivi mobili, dove sono già singole  ).
Se qualcuno vuole aiutarmi, si potrebbe sistemare meglio il posizionamento dei pulsanti di navigazione. Pensare di metterli sopra le card. Adesso si sovrappongono leggermente alle card più esterne.

La versione di bootstrap utilizzata è la 5.1.0
Le card hanno un'animazione fatta con questa libreria

HTML

Codice: [Seleziona]

<div id="carouselExampleControls1" class="carousel slide d-none d-lg-block" data-bs-interval="false">
      <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="cards-wrapper">
                    <div class="col-4 px-5 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="400" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 1 o titolo 1</span></h4>       
                        <div class="card">
                            <div class="hoverblur"><img src="..." alt="immagine1" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 1</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
   
                    <div class="col-4 px-5 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="600" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 2 o titolo 2</span></h4>       
                        <div class="card">
                            <div class="hoversepia"><img src="..." alt="immagine2" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 2</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
   
                    <div class="col-4 px-5 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="800" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 3 o titolo 3</span></h4>       
                        <div class="card">
                            <div class="hoverblur"><img src="..." alt="immagine3" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 3</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
     
           
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <div class="col-4 px-5 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="400" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 4 o titolo 4</span></h4>       
                        <div class="card">
                            <div class="hoversepia"><img src="..." alt="immagine4" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 4</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
   
                    <div class="col-4 px-5 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="600" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 5 o titolo 5</span></h4>       
                        <div class="card">
                            <div class="hoverblur"><img src="..." alt="immagine5" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 5</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
   
                    <div class="col-4 px-5 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="800" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 6 o titolo 6</span></h4>       
                        <div class="card">
                            <div class="hoversepia"><img src="..." alt="immagine6" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 6</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
     
        <button class="carousel-personalizzato-control-prev" type="button" data-bs-target="#carouselExampleControls1" data-bs-slide="prev">
        <span class="carousel-personalizzato-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-personalizzato-control-next" type="button" data-bs-target="#carouselExampleControls1" data-bs-slide="next">
        <span class="carousel-personalizzato-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
        </button> 
    </div>
</div>


<div id="carouselExampleControls2" class="carousel slide d-none d-md-block d-lg-none" data-bs-interval="false">
      <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="cards-wrapper">
                    <div class="col-6 px-3 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="400" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 1 o titolo 1</span></h4>       
                        <div class="card">
                            <div class="hoversepia"><img src="..." alt="immagine1" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 1</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
   
                    <div class="col-6 px-3 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="600" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 2 o titolo 2</span></h4>       
                        <div class="card">
                            <div class="hoverblur"><img src="..." alt="immagine2" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 2</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
     
           
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <div class="col-6 px-3 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="400" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 3 o titolo 3</span></h4>       
                        <div class="card">
                            <div class="hoversepia"><img src="..." alt="immagine3" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 3</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
                   
                    <div class="col-6 px-3 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="600" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 4 o titolo 4</span></h4>       
                        <div class="card">
                            <div class="hoverblur"><img src="..." alt="immagine4" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 4</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <div class="col-6 px-3 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="400" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 5 o titolo 5</span></h4>       
                        <div class="card">
                            <div class="hoversepia"><img src="..." alt="immagine5" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 5</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
   
                    <div class="col-6 px-3 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="600" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 6 o titolo 6</span></h4>       
                        <div class="card">
                            <div class="hoverblur"><img src="..." alt="immagine6" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 6</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
     
        <button class="carousel-personalizzato-control-prev" type="button" data-bs-target="#carouselExampleControls2" data-bs-slide="prev">
        <span class="carousel-personalizzato-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-personalizzato-control-next" type="button" data-bs-target="#carouselExampleControls2" data-bs-slide="next">
        <span class="carousel-personalizzato-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
        </button> 
    </div>
</div>


<div id="carouselExampleControls3" class="carousel slide d-md-none" data-bs-interval="false">
      <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="cards-wrapper">
                    <div class="col-12 col-md-6 px-3 py-4" data-aos="fade-down" data-aos-offset="150" data-aos-delay="400" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 1 o titolo 1</span></h4>       
                        <div class="card">
                            <div class="hoversepia">"><img src="..." alt="immagine1" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 1</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
     
           
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <div class="col-12 px-1 py-2" data-aos="fade-down" data-aos-offset="150" data-aos-delay="400" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 2 o titolo 2</span></h4>       
                        <div class="hoverblur"><img src="..." alt="immagine2" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 2</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
           
           
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <div class="col-12 px-1 py-2" data-aos="fade-down" data-aos-offset="150" data-aos-delay="400" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 3 o titolo 3</span></h4>       
                        <div class="card">
                            <div class="hoversepia"><img src="..." alt="immagine3" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 3</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <div class="col-12 px-1 py-2" data-aos="fade-down" data-aos-offset="150" data-aos-delay="400" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 4 o titolo 4</span></h4>       
                        <div class="card">
                            <div class="hoverblur"><img src="..." alt="immagine4" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 4</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <div class="col-12 px-1 py-2" data-aos="fade-down" data-aos-offset="150" data-aos-delay="400" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 5 o titolo 5</span></h4>       
                        <div class="card">
                            <div class="hoversepia"><img src="..." alt="immagine5" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 5</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="carousel-item">
                <div class="cards-wrapper">
                    <div class="col-12 px-1 py-2" data-aos="fade-down" data-aos-offset="150" data-aos-delay="400" data-aos-duration="500" data-aos-easing="ease-in" data-aos-mirror="true" data-aos-once="true">
                    <h4><span class="numeri">Data 6 o titolo 6</span></h4>       
                        <div class="card">
                            <div class="hoverblur"><img src="..." alt="immagine6" class="img-fluid" style="display: block; margin-left: auto; margin-right: auto;"/>
                            </div>
                                <div class="hoverdiv">
                                <h3>Titolo card 6</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
     
        <button class="carousel-personalizzato-control-prev" type="button" data-bs-target="#carouselExampleControls3" data-bs-slide="prev">
        <span class="carousel-personalizzato-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-personalizzato-control-next" type="button" data-bs-target="#carouselExampleControls3" data-bs-slide="next">
        <span class="carousel-personalizzato-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
        </button> 
    </div>
</div>
CSS

Codice: [Seleziona]

.numeri {
  font-size: 2.2rem;
  font-weight: 800;
}
@media (max-width: 650px) {
.numeri {
  font-size: 2rem;
  font-weight: 800;
}
}

/*Effetto hover zoom in su immagini*/
.hoverblur {
    width: auto;
    height: auto;
    margin: 0 0 -14px 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
    border-radius: 4px;
    display: inline-block;
}
.hoversepia {
    width: auto;
    height: auto;
    margin: 0 0 -14px 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
    border-radius: 4px;
    display: inline-block;
}
/*Zoom In*/
.hoverblur img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hoverblur:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-filter: blur(0.6px); /* Chrome, Safari, Opera */;
    filter: blur(0.6px);
}

.hoversepia img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.hoversepia:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-filter:  sepia(60%); /* Chrome, Safari, Opera */;
    filter:  sepia(60%);
}



.hoverdiv {
    background-color: white;
display: block;
margin-top: -8px;
z-index: 9000;
position: relative;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
text-align: center;
padding: 20px 0;
 
}
.hoverdiv > h2 {
    font-size:calc(1.325rem + .9vw);
color: #001B42;
position:relative;
  line-height: 1;
}
@media (min-width:992px) {
.hoverdiv > h2 {
   font-size:1.5rem;
}
}

.hoverdiv > h3 {
    font-size:calc(1.325rem + .9vw);
color: #001B42;
position:relative;
  line-height: 1;
}
@media (min-width:992px) {
.hoverdiv > h3 {
   font-size:1.5rem;
}
}

.hoverdiv > h2::after {
  content: '';
  position: absolute;
  top: 60px;
  width: 50px;
  height: 2px;
  background: #001B4280;
  left: calc(50% + -25px);
}
.hoverdiv > h3::after {
  content: '';
  position: absolute;
  top: 35px;
  width: 50px;
  height: 2px;
  background: #001B4280;
  left: calc(50% + -25px);
}

.hoverdiv > p {
    font-size: 1.1rem;
color: #001B42;
margin: 25px 20px 10px 20px;
 
}
/*Fine*/

.card {
  overflow: hidden;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
}

.card img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.card:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


.cards-wrapper {
  display: flex;
  justify-content: center;
}

/*Modifico i pulsanti del carosello soltanto per questo carosello (conflitto con slider altrimenti)*/
.carousel-personalizzato-control-next,
.carousel-personalizzato-control-prev {
 position:absolute;
  bottom:0;
 z-index:1;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:0;
 color:#fff;
 text-align:center;
 background:0 0;
 border:0;
 opacity:.7;
 transition:opacity .15s ease;
 background-color: #001B42;
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
@media (prefers-reduced-motion:reduce) {
 .carousel-personalizzato-control-next,
 .carousel-personalizzato-control-prev {
  transition:none
 }
}
.carousel-personalizzato-control-next:focus,
.carousel-personalizzato-control-next:hover,
.carousel-personalizzato-control-prev:focus,
.carousel-personalizzato-control-prev:hover {
 color:#fff;
 text-decoration:none;
 outline:0;
 opacity:1
}
.carousel-personalizzato-control-prev {
 left:0
}
.carousel-personalizzato-control-next {
 right:0
}
.carousel-personalizzato-control-next-icon,
.carousel-personalizzato-control-prev-icon {
 display:inline-block;
 width:2rem;
 height:2rem;
 background-repeat:no-repeat;
 background-position:50%;
 background-size:100% 100%
}
.carousel-personalizzato-control-prev-icon {
 background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
}
.carousel-personalizzato-control-next-icon {
 background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

/**Fine**/

[giusebos]

Ottimo lavoro!