Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Slider 

<div class="container">
    <div class="grid-x">
        <div class="cell">
            <div class="slider">
                <div class="slider__list">
                    <div class="slider__item -active">
                        <div class="container">
                            <div class="grid-x grid-margin-x grid-margin-y">
                                <div class="cell medium-6 large-2">
                                    <span class="h2">Header</span>
                                    <p>paragraph</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slider__item ">
                        <div class="container">
                            <div class="grid-x grid-margin-x grid-margin-y">
                                <div class="cell medium-6 large-2">
                                    <span class="h2">Header</span>
                                    <p>paragraph</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slider__item ">
                        <div class="container">
                            <div class="grid-x grid-margin-x grid-margin-y">
                                <div class="cell medium-6 large-2">
                                    <span class="h2">Header</span>
                                    <p>paragraph</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <ul class="slider__indicators">
                    <li class="slider__indicator -active"></li>
                    <li class="slider__indicator "></li>
                    <li class="slider__indicator "></li>
                </ul>
                <div class="slider__controls">
                    <a class="slider__prev btn -chevron-left" href="#"> Back
                    </a>
                    <a class="slider__next btn -cta" href="#"> Next
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="container">
  <div class="grid-x">
    <div class="cell">
      <div class="slider">
        <div class="slider__list">
          {{#each items}}
            <div class="slider__item {{modifiers}}">
              <div class="container">
                <div class="grid-x grid-margin-x grid-margin-y">
                  <div class="cell medium-6 large-2">
                    <span class="h2">Header</span>
                    <p>paragraph</p>
                    {{!-- {{render '@helper-dummy'}} --}}
                  </div>
                  {{!--               <div class="cell medium-6 large-2">
                    <span class="h2">Header</span>
                    {{render '@helper-dummy'}}
                  </div>
                  <div class="cell medium-6 large-2">
                    <span class="h2">Header</span>
                    {{render '@helper-dummy'}}
                  </div>
                  <div class="cell medium-6 large-2">
                    <span class="h2">Header</span>
                    {{render '@helper-dummy'}}
                  </div>
                  <div class="cell medium-6 large-2">
                    <span class="h2">Header</span>
                    {{render '@helper-dummy'}}
                  </div>
                  <div class="cell medium-6 large-2">
                    <span class="h2">Header</span>
                    {{render '@helper-dummy'}}
                  </div> --}}
                </div>
              </div>
            </div>
          {{/each}}
        </div>
        <ul class="slider__indicators">
          {{#each items}}
            <li class="slider__indicator {{modifiers}}"></li>
          {{/each}}
        </ul>
        <div class="slider__controls">
          {{render '@atoms-button--cta' previous}}
          {{render '@atoms-button--cta' next}}
        </div>
      </div>
    </div>
  </div>
</div>
 
{
  "previous": {
    "tag": "a",
    "mixes": "slider__prev",
    "href": "#",
    "title": "Back",
    "modifiers": "-chevron-left"
  },
  "next": {
    "tag": "a",
    "mixes": "slider__next",
    "href": "#",
    "title": "Next",
    "modifiers": "-cta"
  },
  "items": [
    {
      "modifiers": "-active",
      "captionedImage": {
        "image": {
          "src": "/demo/teaser/teaser1.jpg"
        },
        "caption": "Elektro-/Akku-hydraulisches Schiebehulsenwerkzeug RAUTOOL G2"
      }
    },
    {
      "captionedImage": {
        "image": {
          "src": "/demo/teaser/teaser2.jpg"
        },
        "caption": "RAUTOOL K-Werkzeug"
      }
    },
    {
      "captionedImage": {
        "image": {
          "src": "/demo/teaser/teaser3.jpg"
        },
        "caption": "Hydraulisch-mechanisch betriebenes Schiebehülsenwerkzeug für die Abmessung 50 bis 63 mm bzw. 40 bis 110 mm"
      }
    }
  ]
}
  • Content: 
    .slider {
  $root: &;
  $icon-font-size: 3.2rem;
  $icon-margin-size: 0.8rem;

  &__list {
    position: relative;
  }

  &__item {
    display: none;

    &.-active {
      display: block;
      animation: gallery-image-blink 0.4s linear;
    }
  }

  &__indicators {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding: 1.6rem 0;
  }

  &__indicator {
    position: relative;
    flex: 0 1 4rem;
    height: 0.4rem;
    background-color: $gray-lighter;
    list-style-type: none;

    &::before,
    &::after {
      content: '';
      position: absolute;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 0.8rem;
    }

    &::before {
      top: -0.8rem;
    }

    &::after {
      bottom: -0.8rem;
    }

    &.-active {
      background-color: $secondary;
    }
  }

  &__controls {
    display: flex;
    justify-content: space-between;
  }
}
  • URL: /components/raw/molecules-slider/_slider.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/24-slider/_slider.scss
  • Size: 913 Bytes

There are no notes for this item.