Tangible Pattern Library

Slider: Images 

<div class="c-slider c-slider--images">

    <div class="js-splide-full">
        <div class="splide__track">
            <ul class="splide__list">
                <li class="c-slider__item splide__slide">
                    <img class="" src="https://picsum.photos/900/400" srcset="https://picsum.photos/900/400" sizes="100vw" alt="Alt text sample" />
                </li>
                <li class="c-slider__item splide__slide">
                    <img class="" src="https://picsum.photos/300/680" srcset="https://picsum.photos/300/680" sizes="100vw" alt="Alt text sample" />
                </li>
                <li class="c-slider__item splide__slide">
                    <img class="" src="https://picsum.photos/640/480" srcset="https://picsum.photos/640/480" sizes="100vw" alt="Alt text sample" />
                </li>
                <li class="c-slider__item splide__slide">
                    <img class="" src="https://picsum.photos/230/260" srcset="https://picsum.photos/230/260" sizes="100vw" alt="Alt text sample" />
                </li>
                <li class="c-slider__item splide__slide">
                    <img class="" src="https://picsum.photos/640/480" srcset="https://picsum.photos/640/480" sizes="100vw" alt="Alt text sample" />
                </li>
            </ul>
        </div>
    </div>

</div>
 
<div class="c-slider c-slider--images{% if modifier is defined %} {{ modifier }}{% endif %}">

  <div class="js-splide-full">
    <div class="splide__track">
      <ul class="splide__list">
        {% for item in items %}
          <li class="c-slider__item splide__slide">
            <img class=""
              src="{{ item.src|default("") }}"
              srcset="{{ item.srcset|default("") }}"
              sizes="100vw"
              alt="{{ item.alt|default("") }}" />
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>

</div>
 
{
  "items": [
    {
      "src": "https://picsum.photos/900/400",
      "srcset": "https://picsum.photos/900/400",
      "alt": "Alt text sample"
    },
    {
      "src": "https://picsum.photos/300/680",
      "srcset": "https://picsum.photos/300/680",
      "alt": "Alt text sample"
    },
    {
      "src": "https://picsum.photos/640/480",
      "srcset": "https://picsum.photos/640/480",
      "alt": "Alt text sample"
    },
    {
      "src": "https://picsum.photos/230/260",
      "srcset": "https://picsum.photos/230/260",
      "alt": "Alt text sample"
    },
    {
      "src": "https://picsum.photos/640/480",
      "srcset": "https://picsum.photos/640/480",
      "alt": "Alt text sample"
    }
  ]
}
  • Content: 
    .c-slider {
  margin: spacing(space-48) 0;
  width: 100vw;
  margin-left: -$global-mobile-x-padding;

  @include min-screen(bp(medium)) {
    margin-left: 0;
    width: auto;
  }

  @include min-screen(bp(large)) {
    margin: spacing(space-96) 0;
  }

}

.c-slider--marginLess {
  margin: 0;
}

// .c-slider__list {
//   list-style: none;
//   display: flex;
//   overflow-x: auto;
//   width: 100%;
// }

// .c-slider__item {
//   flex: 0 0 33.3333%;
//   // margin: spacing(space-12);
// }

// .c-slider__item + .c-slider__item {
//   margin-left: remify(24px);
// }

// .c-slider__item-img {
//   // max-width: 33%;
// }
  • URL: /components/raw/slider/_slider.scss
  • Filesystem Path: src/pattern-library/02-components/slider/_slider.scss
  • Size: 624 Bytes
  • Handle: @slider--images
  • Preview:
  • Filesystem Path: src/pattern-library/02-components/slider/slider--images.twig

No notes defined.