Documentazioni ed esempi per slideshow realizzata con Bootstrap

fabigno

@webman Buongiorno, dove si può trovare della documentazione o meglio ancora un esempio su slideshow realizzata con bootstrap? Grazie

pietro strada

@fabigno ha detto in [RISOLTO] Gallery:

@webman Buongiorno, dove si può trovare della documentazione o meglio ancora un esempio su slideshow realizzata con bootstrap? Grazie

Ciao, potresti gentilmente aprire un nuovo post, è una richiesta specifica e interessante, giusto che abbia la sua visibilità

jabba

@pstrada ha detto in Documentazioni ed esempi per slideshow realizzata con Bootstrap:

@fabigno ha detto in [RISOLTO] Gallery:

@webman Buongiorno, dove si può trovare della documentazione o meglio ancora un esempio su slideshow realizzata con bootstrap? Grazie

Ciao, potresti gentilmente aprire un nuovo post, è una richiesta specifica e interessante, giusto che abbia la sua visibilità

Ho forkato la discussione così non importa crearne una nuova

jabba

@fabigno ha detto in Documentazioni ed esempi per slideshow realizzata con Bootstrap:

@webman Buongiorno, dove si può trovare della documentazione o meglio ancora un esempio su slideshow realizzata con bootstrap? Grazie

Bootstrap5 permette di utilizzare dei codici "cotti e mangiati" per creare slideshow e altri componenti. Li trovi tutti qui (da Accordion in avanti -> https://getbootstrap.com/docs/5.0/components/accordion/ ).
Devi ovviamente prima ovviamente caricare sia I CSS che i JS di Bootstrap per farli funzionare.
Se usi Cassiopeia devi solo caricare i Javascript perché i CSS ci sono già.
Se ti può servire feci un video a riguardo qualche settimana fa che spiega passo passo come usare i componenti Bootstrap5 dentro Cassiopeia: https://www.youtube.com/watch?v=J5nD6xmnf_s

webman

Aggiungo a quanto detto da @jabba , per abilitare il funzionamento carousel, nel child theme è necessario inserire questa riga di codice:

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', []);

Per abilitare altre funzionalità di bootstrap che non sono abilitate, come ad esempio tooltip e non solo, ti consiglio di mettere nei preferiti questa pagina con la documentazione.
Ciao,

fabigno

@webman ha detto in Documentazioni ed esempi per slideshow realizzata con Bootstrap:

Aggiungo a quanto detto da @jabba , per abilitare il funzionamento carousel, nel child theme è necessario inserire questa riga di codice:
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', []);
Per abilitare altre funzionalità di bootstrap che non sono abilitate, come ad esempio tooltip e non solo, ti consiglio di mettere nei preferiti questa pagina con la documentazione.
Ciao,
Grazie per le utilissime informazioni, ma essendo piuttosto inesperto non so come e dove inserire la riga di codice da te menzionata. Come accedo al child theme e quando joomla si aggiorna non si perderà?

fabigno

Buongiorno
Grazie ai suggerimenti avuti. Riporto la mia esperienza perché potrebbe essere di aiuto a qualcuno.
Ho deciso di realizzare una slide show utilizzandio un modulo personalizzato. Ho inserito tramite plugin Sourcerer le righe di codice copiate da Bootstrap 5 (Plugin JavaScript compilato seguendo le indicazioni dell'ottimo video di Jabba)

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>

quindi ho copiato subito sotto, l'esempio proposto in Components > Carousel

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Per avere l’effetto crossfade si deve sostituire il primo div con la riga

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">

Aggiungendo codice

<a href="index.php?......> <img src="images. . .> </a>

le immagini possono anche diventare lincabili
Le immagini si ridimensionano automaticamente alle dimenzioni del modulo
Per modificare il periodo di rotazione, 5000 di defoult, aggiungere data-bs-interval=" " a .carousel-item

<div class="carousel-item" data-bs-interval="2000">

(es: da 5 a 2 secondi)
Non ho aggiunto la riga di codice suggerita da Webman

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', []);

perché non sapevo dove inserirla né come. Per fortuna funziona
Ancora un grazie per il supporto

webman

Grazie per le utilissime informazioni, ma essendo piuttosto inesperto non so come e dove inserire la riga di codice da te menzionata. Come accedo al child theme e quando joomla si aggiorna non si perderà?

I temi child sono fatti apposta per poter effettuare le varie personalizzazioni e non perderle con i futuri aggiornamenti. Il codice presente li in pratica è un override del tema principale.
Per risponderti alla domanda, quel codice va inserito nel index.php del child all'inizio, in questo modo:

use Joomla\CMS\Uri\Uri;
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', []);