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

adottauncane2 · « **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>

giusebos · « **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à....

Alex21 · « **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

tomtomeight · « **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à.

giusebos · « **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. $:-\$

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

adottauncane2

bootstrap carousel non funziona

giusebos

Re:bootstrap carousel non funziona

Alex21

Re:bootstrap carousel non funziona

tomtomeight

Re:bootstrap carousel non funziona

giusebos

Re:bootstrap carousel non funziona