DD Simple Slider

Vytvoří slider ze všech bloků Cover (Úvodní obrázek), pokud jsou umístěny v bloku Group (Skupina) s třídou dd-simple-slider.

Obsah

• Slider #1
  • Nastavení
• Slider #2
  • Nastavení
• Slider #3
  • Nastavení
• Slider #4
  • Nastavení
• Konfigurace

Slider #1

Aletschgletscher

Aletschgletscher

Sankt Moritz

Suvreta Loop

Mottolino

Mottolino

Carosello 3000

Madonon

Nastavení

CLASS:

dd-simple-slider dd-simple-slider-height-510 dd-simple-slider-loop dd-simple-slider-buttonscolor-2F5AAE dd-simple-slider-square dd-simple-slider-slide

-------------------------------------

CSS:

#dd-slider-1 .ddss-slide .wp-block-cover .wp-block-image figure {
    background-color: #ffffffc7;
    border-radius: 50%;
    padding: 10px;
}
#dd-slider-1 .ddss-slide.ddss-active .wp-block-cover .wp-block-image figure {
  animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 30px rgba(0, 0, 0, 0);
  }
}

Slider #2

Aletschgletscher

Carosello 3000

Madonon

Nastavení

CLASS:

dd-simple-slider dd-simple-slider-loop dd-simple-slider-zoom

-------------------------------------

CSS:

#dd-slider-2 .ddss-slide .wp-block-cover__inner-container p {
    transform: translateX(-500px);
    transition: transform 1.5s ease-out; /* plynulý přesun */
}
#dd-slider-2 .ddss-slide.ddss-active .wp-block-cover__inner-container p {
    transform: translateX(0);
}

Slider #3

Aletschgletscher

Carosello 3000

Madonon

Nastavení

CLASS:

dd-simple-slider dd-simple-slider-loop dd-simple-slider-move dd-simple-slider-autoplay

Slider #4

Aletschgletscher

Carosello 3000

Madonon

Nastavení

CLASS:

dd-simple-slider dd-simple-slider-loop dd-simple-slider-reveal

Konfigurace

Šířka slideru je 100%. Lze ji změnit nastavením šířky bloku Group na alignwide (velká šířka) nebo alignfull (celá šířka).

Vzhled a chování slideru lze ovlivnit přidáním dalších tříd do bloku Group:

 * --- Modifier classes (add to the wp-block-group alongside dd-simple-slider) ---
 *
 * Button style:
 *   dd-simple-slider-rounded      — kulaté (výchozí: rounded)
 *   dd-simple-slider-square       — hranaté
 *
 * Transition effect:
 *   dd-simple-slider-slide        — slide
 *   dd-simple-slider-zoom         — zoom-in efekt
 *   dd-simple-slider-move         — Ken Burns efekt (zoom z rohu do středu)
 *   dd-simple-slider-reveal       — clip-path odhalení (zleva/zprava/ze středu dle podnětu)
 *   (výchozí: fade)
 *
 * Autoplay:
 *   dd-simple-slider-autoplay     — zapne autoplay (výchozí interval 5000 ms)
 *   dd-simple-slider-interval-N   — nastaví interval v ms, např. dd-simple-slider-interval-6000
 *
 * Rychlost animace:
 *   dd-simple-slider-speed-N      — trvání přechodu v ms, např. dd-simple-slider-speed-800 (výchozí 1800)
 *
 * Navigace:
 *   dd-simple-slider-loop         — šipky zacyklí začátek↔konec
 *   dd-simple-slider-noarrows     — schová šipky
 *   dd-simple-slider-nodots       — schová tečky
 *
 * Barvy:
 *   dd-simple-slider-buttonscolor-RRGGBB  — barva pozadí šipek + aktivní tečky (bez #)
 *   dd-simple-slider-arrowcolor-RRGGBB    — barva ikony šipky
 *   dd-simple-slider-dotscolor-RRGGBB     — barva neaktivních teček
 *
 * Výška:
 *   dd-simple-slider-height-N     — pevná výška slideru v px, např. dd-simple-slider-height-500