Joomla Bootstrap Carousel im Template einfügen

Ich habe für eine Joomla (3.4.1) Webseite einen Block für Kundenmeinungen integriert. Nachfolgend beschreibe ich den “schnellen” / “hardcoded”  Weg direkt in der index.php des Templates. Das Basistemplate bildete das bei der Installation von Joomla enthaltene protostar mit Bootstrap und jQuery.

templates/meinTemplate/index.php


<div class="row-fluid">
<div class="span12 myCarouselBlock">
<h2>das sagen unsere Gäste</h2>
<hr>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indikatoren Kreise-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- die Slides -->
<div class="carousel-inner" role="listbox">

<div class="item active">
<h4>Titel 1</h2>
<blockquote><p><i>
"Hier steht der Text für das ersten Carousel."
</i>
<br><small>von Max Mustermann (Juni 2015)</small>
</p></blockquote>
</div>

<div class="item">
<h4>Titel 2</h2>
<blockquote><p><i>

"Hier steht der Text für das zweite Carousel."
</i>
<br><small>Maxi Musterfrau(Juli 2015)</small>
</p></blockquote>
</div>
.......
</div>
</div>
</div>
</div>

Da es in Joomla 3.x und Bootstrap mit jQuery ein Problem mit Mootools gibt, und das zweite Caroussel einfach verschwindet, wegen zustäzlichen Div’s in Joomla…, kann man es wie folgt über eine feste Höhe lösen. Es gibt aber auch Plugins die Mootools Core-seitig deaktivieren und das Problem somit umgehen. Für mich ist dieser Weg ok.

/templates/meinTemplate/css/template.css


#myCarousel {
margin: 0px !important;
}
.myCarouselBlock >div{
height: 180px !important;
}

Das nächste Problem das ich hatte, war dass das Carousel nicht von alleine startete. Einmal auf eine zweite Seite geklickt, lief es dann, es sollte jedoch von alleine laufen. Normalerweise passiert dies über den obigen Code:

data-ride=”carousel”

Der machte es aber nicht. Daher habe ich es wie auf GetBootstrap beschrieben mittels JavaScript angeschoben. In die /templates/meinTemplate/index.php kommt dann folgende Zeile:

$doc->addScript($this->baseurl . ‘/templates/’ . $this->template . ‘/js/carousel.js’);


in die Datei carousel.js habe ich folgendes geschrieben:

jQuery(function() {
jQuery('.carousel').carousel({
interval: 4000});
}
);

Damit wird beim laden der Webseite das Carousel gestartet und durchläuft im 4000ms Takt die einzelnen Kommentare der Gäste im Carousel 😉

Bootstrap 2.3.2 Carousel Doc: http://getbootstrap.com/2.3.2/javascript.html#carousel

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.