Carousel with Quark-Theme (spectre css)

Support Content & Markdown
1

Spectre-Carousel-Code:

I have created carousels with 4 items in two ways:

  1. I directly pasted the code sample from the Spectre page as content, uploaded new images and adjusted the image path.Everything works perfectly, even the small active strip at the bottom of the image (Link removed after getting solution).

  2. I have created a Twig template for four items and a matching blueprint (I will post the code afterwards). Everything works, only the active stripes do not change their color.
    (Link removed after getting solution).

Can anyone help me? I am trying to publish the code of the Twig template and the blueprint now.

This is the code of the content (1st Variant):

<div class="carousel">  
  <!-- carousel locator  -->
  <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
  <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
  <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
  <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">
    
  <!-- carousel container  -->
  <div class="carousel-container">   
      
  <!-- carousel item -->
    <figure class="carousel-item">
      <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
      <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label>
      <img class="img-responsive rounded"
           src="user/pages/01.leadership-training/01._karussell-content/aablue.jpg"
           alt="macOS Yosemite Wallpaper">
    </figure>
    <figure class="carousel-item">
      <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
      <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label>
      <img class="img-responsive rounded"
           src="user/pages/01.leadership-training/01._karussell-content/aagreen.jpg"
           alt="macOS Yosemite Wallpaper">
    </figure>
    <figure class="carousel-item">
      <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
      <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label>
      <img class="img-responsive rounded"
           src="user/pages/01.leadership-training/01._karussell-content/aared.jpg"
           alt="macOS El Capitan Wallpaper">
    </figure>
    <figure class="carousel-item">
      <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
      <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label>
      <img class="img-responsive rounded"
           src="user/pages/01.leadership-training/01._karussell-content/aavelvet.jpg"
           alt="macOS El Capitan Wallpaper">
    </figure>
  </div>
  <!-- carousel navigation  -->
  <div class="carousel-nav">
    <label class="nav-item text-hide c-hand" for="slide-1">1</label>
    <label class="nav-item text-hide c-hand" for="slide-2">2</label>
    <label class="nav-item text-hide c-hand" for="slide-3">3</label>
    <label class="nav-item text-hide c-hand" for="slide-4">4</label>
  </div>
</div>

This is the Template (carousel.html.twig)

{% set grid_size = theme_var('grid-size') %}
{% set columns = page.header.class == 'small' ? 'col-3 col-md-4 col-sm-6' : 'col-4 col-md-6 col-sm-12'  %}
{% set images = page.media.images %}
<section class="section modular-features {{ page.header.class}}">  {# Start section 1 #}
   <section class="container {{ grid_size }}"> {# Start section 2 #}
      <div class="frame-box">  {# Start frame-box #}
         <div class="text-left {# mx-2 px-2 #}">{{ content|raw }}</div> {# Überschrift links mit Abstand #}
 <div class="carousel">
  <!-- carousel locator -->
  <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
  <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
  <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
  <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">

  <!-- carousel container -->
  <div class="carousel-container">

    <!-- carousel item -->
      <figure class="carousel-item">
      <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
      <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label>
      <img class="img-responsive rounded" src="{{ page.media.images[header.cardimage1].url }}" alt="{{ header.AltCardImage1 }}">
    </figure>

      <figure class="carousel-item">
      <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
      <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label>
      <img class="img-responsive rounded" src="{{ page.media.images[header.cardimage2].url }}" alt="{{ header.AltCardImage2 }}">
    </figure>

      <figure class="carousel-item">
      <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
      <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label>
      <img class="img-responsive rounded" src="{{ page.media.images[header.cardimage3].url }}" alt="{{ header.AltCardImage3 }}">
    </figure>

      <figure class="carousel-item">
      <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
      <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label>
      <img class="img-responsive rounded" src="{{ page.media.images[header.cardimage4].url }}" alt="{{ header.AltCardImage4 }}">
    </figure>

      <!-- carousel navigation -->
  <div class="carousel-nav">
    <label class="nav-item text-hide c-hand" for="slide-1">1</label>
    <label class="nav-item text-hide c-hand" for="slide-2">2</label>
    <label class="nav-item text-hide c-hand" for="slide-3">3</label>
    <label class="nav-item text-hide c-hand" for="slide-4">4</label>  
  </div>
</div>


 </div>
      </div> {# Ende frame-box #}
   </section> {# Ende section 2 #}
</section> {# Ende section 1 #}

This is the Blueprint (carousel.yaml)

title: Karussell
'@extends': default

form:
  fields:
    tabs:
      fields:
        features:
          type: tab
          title: Carousel 4
          fields:
            header.cardimage1:
              type: filepicker
               # folder: '@self'
              # folder: 'page://images'
              label: Bild 1
              preview_images: true
              accept:
                - .png
                - .jpg

            header.AltCardImage1:
              type: text
              label: alt-Beschreibung Bild 1               

            header.cardimage2:
              type: filepicker
               # folder: '@self'
              # folder: 'page://images'
              label: Bild 2
              preview_images: true
              accept:
                - .png
                - .jpg

            header.AltCardImage2:
              type: text
              label: alt-Beschreibung Bild 2                  

            header.cardimage3:
              type: filepicker
               # folder: '@self'
              # folder: 'page://images'
              label: Bild 3
              preview_images: true
              accept:
                - .png
                - .jpg

            header.AltCardImage3:
              type: text
              label: alt-Beschreibung Bild 3                  

            header.cardimage4:
              type: filepicker
               # folder: '@self'
              # folder: 'page://images'
              label: Bild 4
              preview_images: true
              accept:
                - .png
                - .jpg

            header.AltCardImage4:
              type: text
              label: alt-Beschreibung Bild 4
2

You might be missing some CSS with nth-of-type()

Left is Twig and right is your 1st variant

image
image934×1034 265 KB

3

Scratch that :slight_smile:
Move your .carousel-nav out of .carousel-container - place it bellow. Currently it’s inside. Your pasted code does not match what is rendered in your linked example (I think your pasted code might be missing a closing DIV right before <!-- carousel navigation -->)

1 Like
4

Great, everything fine now :grinning: Thank you!