Salta al contenuto
  • Categorie
  • Recenti
  • Tag
  • Popolare
  • Utenti
  • Gruppi
Collassa
Logo del marchio
F

fabigno

@fabigno
Informazioni
Post
8
Discussioni
5
Gruppi
0
Da chi è seguito
0
Chi segue
0

Post

Recenti Migliore Controverso

  • Documentazioni ed esempi per slideshow realizzata con Bootstrap
    F 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

  • Accedi

  • Non hai un account? Registrati

  • Accedi o registrati per effettuare la ricerca.
Powered by NodeBB Contributors
  • Primo post
    Ultimo post
0
  • Categorie
  • Recenti
  • Tag
  • Popolare
  • Utenti
  • Gruppi