• slideshow-capetown
  • slideshow-stonehenge
  • slideshow-sydney-oper
  • slideshow-yucatan

Parameter und Beispiele

 

Hauptparameter

Einstellung Wert
Geschwindigkeit Animation Legen Sie die Geschwindigkeit der Animation fest
Autoplay (Ja | Nein) Aktivieren oder deaktivieren des Autoplay
Geschwindigkeit Autoplay Legen Sie die Geschwindigkeit der automatischen Wiedergabe in Millisekunden fest. Sie muss größer sein als die Summe der Zeiten aller Animationen.
Vor/Zurück (Ja | Nein) Aktivieren oder deaktivieren der Vor/Zurück Navigation.
Dots (Ja | Nein) Aktivieren oder deaktivieren der Dots Navigation
Höhe Legen Sie die Höhe der Slideshow fest. Zum Beispiel: '70vh'. Wird ignoriert wenn der 'Rest der Seite ausfüllen' Parameter aktiviert ist.
Rest der Seite ausfüllen (Ja | Ja (50 %) | Ja (67 %) | Ja (75 %) | Nein) Aktivieren oder deaktivieren Sie die volle Höhe. Die Slideshow füllt den Rest der Seite auf großen Bildschirmen aus.
Rest der Seite ausfüllen - Seitenverhältnis (Kleine Bildschirme) Wenn das Ausfüllen des restlichen Seitenbereichs auf großen Bildschirmen aktiviert ist, können Sie hier das Verhältnis zwischen Breite und Höhe festlegen, um die Größe auf kleinen Bildschirmen zu korrigieren.
Slideshow anzeigen(Minimale Breite) Legen Sie fest, ab welcher Breite die Slideshow angezeigt werden soll
Hintergrundbild Gewünschtes Hintergrundbild wählen. Dieses Hintergrundbild gilt für alle Slides und kann durch das Hintergrundbild jedes Slides überschrieben werden.
Hintergrundvideo Legen Sie das Hintergrundvideo fest (verwenden Sie den vollständigen Pfad, zum Beispiel: images / video.mp4). Das Video wird nur angezeigt, wenn kein Hintergrundbild und kein Hintergrundelementbild festgelegt ist.
Anzeigen (Komponente) Legen Sie die Komponente fest, in der das Karussell angezeigt werden soll. Wenn Sie mehrere Komponenten festlegen möchten, trennen Sie die einzelnen Komponenten durch Kommas (,). Zum Beispiel: com_phocacart, com_phocadownload, com_phocagallery. Leer lassen, um das Karussell überall anzuzeigen.
Anzeigen (Ansicht) Legen Sie die Ansicht fest, in der das Karussell angezeigt werden soll. Wenn Sie mehrere Ansichten festlegen möchten, trennen Sie die einzelnen Ansichten durch Kommas (,). Zum Beispiel: categories, category, item. Wenn Sie die Ansicht festlegen, muss auch die Komponente festgelegt werden. Leer lassen, um das Karussell überall anzuzeigen.
Anzeige ID Legen Sie die ID fest, unter der das Karussell angezeigt werden soll. Wenn Sie weitere IDs festlegen, trennen Sie jede ID durch Komma (,). Wenn Sie die ID festlegen, müssen auch die Ansicht und die Komponente festgelegt werden. Leer lassen, um das Karussell überall anzuzeigen.

 

Elementeparameter

Einstellung Wert
Hintergrundbild Gewünschtes Hintergrundbild wählen
Hintergrundbild Animation Hintergrundbild Animation einfügen. Zum Beispiel: 'kenburnsBottomLeft'
Titel Titel einfügen
Titel CSS Titel CSS einfügen
Titel Animation Titel Animation einfügen. Zum Beispiel: 'fadeIn'
Beschreibung Beschreibung einfügen
Beschreibung CSS Beschreibung CSS einfügen
Beschreibung Animation Beschreibung Animation einfügen. Zum Beispiel: 'bounceInLeft'
Button Titel Button Titel einfügen
Button Link Button Link einfügen
Button CSS Button CSS einfügen
Button Animation Button Animation einfügen. Zum Beispiel: 'zoomIn'
Erstes Bild Erstes Bild wählen
Erstes Bild CSS Erstes Bild CSS einfügen
Größe erstes Bild CSS Größe erstes Bild CSS einfügen
Erstes Bild Animation Erstes Bild Animation einfügen. Zum Beispiel: 'bounceInDown'
Zweites Bild Zweites Bild wählen
Zweites Bild CSS Zweites Bild CSS einfügen
Größe zweites Bild CSS Größe zweites Bild CSS einfügen
Zweites Bild Animation Zweites Bild Animation einfügen. Zum Beispiel: 'bounceInDown'

 

Beispiele für Elementeparameter:

Titel CSS:

animation-duration: 5s;
animation-delay: 0s;
position: absolute;
left: 26%;
top: 15%;
font-size: 4vw;
z-index: 1000;
text-align: center;
color: #fff;
font-weight: bold;

Beschreibung CSS:

animation-duration: 6s;
animation-delay: 3s;
position: absolute;
left: 29%;
top: 28%;
z-index: 1000;
padding: 1vw;
font-size: 3vw;
line-height: 1.3;
color: #fff;

Button CSS:

animation-duration: 1s;
animation-delay: 4s;
position: absolute;
bottom: 25%;
padding: 9vw auto;
border: 4px solid #DAA520;
color: #DAA520;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
z-index: 1001;
width: 20vw;
font-size: 2vw;
text-transform: uppercase;
white-space: nowrap;
background: rgba(0,0,0,0.1);

Erstes Bild CSS:

animation-duration: 2s;
animation-delay: 2s;
position: absolute;
bottom: 20%;
left: 7%;
z-index: 1002;

Erstes Bild Größe:

height: 20vw;
width: auto;

Zweites Bild CSS:

animation-duration: 1s;
animation-delay: 3s;
position: absolute;
bottom: 0%;
right: 10%;
z-index: 1003;

Zweites Bild Größe:

height: 34vw;
width: auto;
Sie können die Slideshow hier sehen: Phoca Premiere Temlate Demo

Stand: Phoca Carousel Modul v3.0.3 (03.10.2020)

 

 

Wir bedanken uns für gute Zusammenarbeit und freundliche Unterstützung bei:

NMMN

 

 

 

Phoca