Back to top

Autore Topic: bootstrap carousel non funziona  (Letto 2401 volte)

Offline adottauncane2

  • Esploratore
  • **
  • Post: 84
    • Mostra profilo
bootstrap carousel non funziona
« il: 18 Lug 2018, 16:47:25 »
ciao sto provanso a fare un carosello con 3 item visibili alla volta ma nel mio sito non funziona...
ho seguito questo esempio ma continuo a vederne una alla volta.esempio: https://codepen.io/MarkitDigital/pen/ZpEByzHo creato un articolo e inserito il codice all'interno di esso all'interno dello stesso articolo ho meso prima html poi <style> poi <script> tutto suddiviso nei tag appropriati.niente non funziona continua a farmi vedre solo una slide alla volta.


AGGIORNAMENTO
ho creato un file nel desktop e vi ho messo dentro il codice seguente... poi l'ho aperto con firefox tutto funzionaa questo punto ho deciso di inserire all'interno del mio articolo tutto il codice  e magicamente tutto funziona
però credo che se osservate il codice non sia corretto mettere tutto quello che ho scritto all'interno di un div in un articolo.perche credo che si creino tag doppi tipo body ecc..

Codice: [Seleziona]
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Carousel Example</h2>

<div id="carousel-example-multi" class="carousel carousel-multi slide">


  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox" data-ride="carousel">
    <div class="item active">
      <div class="media media-card">
        <time class="small">10 Aug 2016</time>
        <div class="media-category">Commodities Quarterly</div>
        <h4 class="media-heading">
                <a href="#">Research article 1</a>
            </h4>
        <a class="aside" href="#">Read more</a>
      </div>
    </div>

    <div class="item ">
      <div class="media media-card">
        <time class="small">10 Aug 2016</time>
        <div class="media-category">Commodities Quarterly</div>
        <h4 class="media-heading">
                <a href="#">Research article number two</a>
            </h4>
        <a class="aside" href="#">Read more</a>
      </div>
    </div>

    <div class="item ">
      <div class="media media-card">
        <time class="small">10 Aug 2016</time>
        <div class="media-category">Commodities Quarterly</div>
        <h4 class="media-heading">
                <a href="#">Number 3</a>
            </h4>
        <a class="aside" href="#">Read more</a>
      </div>
    </div>

    <div class="item ">
      <div class="media media-card">
        <time class="small">10 Aug 2016</time>
        <div class="media-category">Commodities Quarterly</div>
        <h4 class="media-heading">
                <a href="#">This is the fourth article</a>
            </h4>
        <a class="aside" href="#">Read more</a>
      </div>
    </div>

    <div class="item ">
      <div class="media media-card">
        <time class="small">10 Aug 2016</time>
        <div class="media-category">Commodities Quarterly</div>
        <h4 class="media-heading">
                <a href="#">...and this is the fifth</a>
            </h4>
        <a class="aside" href="#">Read more</a>
      </div>
    </div>

    <div class="item ">
      <div class="media media-card">
        <time class="small">10 Aug 2016</time>
        <div class="media-category">Commodities Quarterly</div>
        <h4 class="media-heading">
                <a href="#">Sixth</a>
            </h4>
        <a class="aside" href="#">Read more</a>
      </div>
    </div>

  </div>

</div>
<style>
.carousel-inner .active.left {
  left: -33%;
}
.carousel-inner .next {
  left: 33%;
}
.carousel-inner .prev {
  left: -33%;
}
.carousel-control.left,
.carousel-control.right {
  background-image: none;
}
.carousel-multi .carousel-inner > .item {
  transition: 500ms ease-in-out left;
}
.carousel-multi .carousel-inner > .item > .media-card {
  background: #333;
  border-right: 10px solid #fff;
  display: table-cell;
  width: 1%;
}
.carousel-multi .carousel-inner > .item > .media-card:last-of-type {
  border-right: none;
}
.carousel-multi .carousel-inner .active {
  display: table;
}
.carousel-multi .carousel-inner .active.left {
  left: -33%;
}
.carousel-multi .carousel-inner .active.right {
  left: 33%;
}
.carousel-multi .carousel-inner .next {
  left: 33%;
}
.carousel-multi .carousel-inner .prev {
  left: -33%;
}
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-multi .carousel-inner > .item {
    transition: 500ms ease-in-out all;
    backface-visibility: visible;
    transform: none!important;
  }
}
</style>

<script>
//Allows bootstrap carousels to display 3 items per page rather than just one
$('.carousel.carousel-multi .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().attr("aria-hidden", "true").appendTo($(this));

    if (next.next().length > 0) {
        next.next().children(':first-child').clone().attr("aria-hidden", "true").appendTo($(this));
    }
    else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});
</script>


</body>
</html>
« Ultima modifica: 18 Lug 2018, 17:03:57 da adottauncane2 »

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:bootstrap carousel non funziona
« Risposta #1 il: 18 Lug 2018, 17:00:51 »
con il link del sito originale cosa ci dobbiamo fare?

Occorre un paragnosta anche stavolta?

Così posso dirti che non hai integrato bene css e js, ma forse lo sapevi già....
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline Alex21

  • Appassionato
  • ***
  • Post: 645
    • Mostra profilo
Re:bootstrap carousel non funziona
« Risposta #2 il: 18 Lug 2018, 19:54:53 »
ciao adottauncane2,
penso che non sia possibile inserire il frammento dentro un articolo, così come sta,
perché i tag <head> e <body> li mette joomla e non si possono raddoppiare.
Oddio, i browser hanno una grandissima tolleranza ed eseguono qualcosa lo stesso, però possono smettere di farlo da un momento all' altro.
Anche lo stile nel tag <style> dovrebbe stare nella <head> e in nessun altro posto.


E quindi, lo stile sarebbe meglio posizionato in un file custom.css, così verrebbe caricato nella sezione giusta della pagina. Nell' articolo ci può andare quello che c'è tra i due tag <body>, javascript compreso se l'editor dell'articolo è stato abilitato.
I due scripy jQuery e Bootstrap potresti provare a non caricarli, perché dovrebbero essere già caricati da joomla, altrimenti li metti nell'articolo prima dello <script> finale sperando che funzionino.
Un saluto

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:bootstrap carousel non funziona
« Risposta #3 il: 18 Lug 2018, 20:39:09 »
Evita di aggiungere aggiornamenti allo stesso post, non vengono più marcati come non letti e perdi visibilità.

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:bootstrap carousel non funziona
« Risposta #4 il: 18 Lug 2018, 20:52:05 »
se non cera tomtom con l'avviso io nemmeno me ne sarei accorto. Questa è l'ennesima riprova che di come si usa un forum, dovrebbe essere la prima cosa da imparare prima di postare.  :-\ :(
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

 



Web Design Bolzano Kreatif