Sliders: Tiles Slider

Ready

Notes
HTML
View
Assets
Info

No notes defined.


        
        <div class="slider--tiles  js-slider--tiles">
    <div>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=1" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  title--bg-maroon  tile__title">
                    <h3 class="h4  title__highlight">Specialist Labs</h3>
                </div>
                <div class="tile__content-body">
                    <p>Our specifically designed Science Centre includes specialist laboratories, interview suites, and dedicated specialist equipment.</p>
                </div>
            </div>
        </a>
    </div>

    <div>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=2" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  title--bg-pink  tile__title">
                    <h3 class="h4  title__highlight">Motion Capture Studio</h3>
                </div>
                <div class="tile__content-body">
                    <p>The Motion Capture Studio allows students to capture the motion of multiple human movement simultaneously in the creation of high quality for motion sequences for Games, Animation and VFX.</p>
                </div>
            </div>
        </a>
    </div>

    <div>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=3" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  tile__title">
                    <h3 class="h4  title__highlight">HDTV Center</h3>
                </div>
                <div class="tile__content-body">
                    <p>You'll use our HD Television Centre, which is equipped with broadcast standard technologies, green room, vision gallery and a comprehensive racks room.</p>
                </div>
            </div>
        </a>
    </div>

    <div>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=4" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  title--bg-slate  tile__title">
                    <h3 class="h4  title__highlight">Extremely Longworded Long Title Demonstration</h3>
                </div>
                <div class="tile__content-body">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </a>
    </div>
    <div>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=5" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  title--bg-maroon  tile__title">
                    <h3 class="h4  title__highlight">Specialist Labs</h3>
                </div>
                <div class="tile__content-body">
                    <p>Our specifically designed Science Centre includes specialist laboratories, interview suites, and dedicated specialist equipment.</p>
                </div>
            </div>
        </a>
    </div>

    <div>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=6" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  title--bg-pink  tile__title">
                    <h3 class="h4  title__highlight">Clinical Training Facilities</h3>
                </div>
                <div class="tile__content-body">
                    <p>Our labs provide the environment for you to learn fundamental skills associated with emergency pre-hospital care. This includes: advanced patient assessment techniques, airway management, obtaining intramuscular, intravenous and intraosseous access, advanced life-support skills.</p>
                </div>
            </div>
        </a>
    </div>

    <div>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=7" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  tile__title">
                    <h3 class="h4  title__highlight">HDTV Center</h3>
                </div>
                <div class="tile__content-body">
                    <p>You'll use our HD Television Centre, which is equipped with broadcast standard technologies, green room, vision gallery and a comprehensive racks room.</p>
                </div>
            </div>
        </a>
    </div>

    <div>
        <a class="tile" href="">
            <figure class="tile__figure">
                <img src="https://picsum.photos/500/500?random=8" class="tile__img" alt="" />
            </figure>

            <div class="tile__content">
                <div class="title  title--bg-slate  tile__title">
                    <h3 class="h4  title__highlight">Extremely Longworded Long Title Demonstration</h3>
                </div>
                <div class="tile__content-body">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </a>
    </div>
</div>


        <div class="slider--tiles  js-slider--tiles">
  <div>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=1" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  title--bg-maroon  tile__title">
          <h3 class="h4  title__highlight">Specialist Labs</h3>
        </div>
        <div class="tile__content-body">
          <p>Our specifically designed Science Centre includes specialist laboratories, interview suites, and dedicated specialist equipment.</p>
        </div>
      </div>
    </a>
  </div>

  <div>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=2" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  title--bg-pink  tile__title">
          <h3 class="h4  title__highlight">Motion Capture Studio</h3>
        </div>
        <div class="tile__content-body">
          <p>The Motion Capture Studio allows students to capture the motion of multiple human movement simultaneously in the creation of high quality for motion sequences for Games, Animation and VFX.</p>
        </div>
      </div>
    </a>
  </div>

  <div>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=3" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  tile__title">
          <h3 class="h4  title__highlight">HDTV Center</h3>
        </div>
        <div class="tile__content-body">
          <p>You'll use our HD Television Centre, which is equipped with broadcast standard technologies, green room, vision gallery and a comprehensive racks room.</p>
        </div>
      </div>
    </a>
  </div>

  <div>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=4" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  title--bg-slate  tile__title">
          <h3 class="h4  title__highlight">Extremely Longworded Long Title Demonstration</h3>
        </div>
        <div class="tile__content-body">
          <p>{{ loremLong }}</p>
        </div>
      </div>
    </a>
  </div>
  <div>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=5" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  title--bg-maroon  tile__title">
          <h3 class="h4  title__highlight">Specialist Labs</h3>
        </div>
        <div class="tile__content-body">
          <p>Our specifically designed Science Centre includes specialist laboratories, interview suites, and dedicated specialist equipment.</p>
        </div>
      </div>
    </a>
  </div>

  <div>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=6" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  title--bg-pink  tile__title">
          <h3 class="h4  title__highlight">Clinical Training Facilities</h3>
        </div>
        <div class="tile__content-body">
          <p>Our labs provide the environment for you to learn fundamental skills associated with emergency pre-hospital care. This includes: advanced patient assessment techniques, airway management, obtaining intramuscular, intravenous and intraosseous access, advanced life-support skills.</p>
        </div>
      </div>
    </a>
  </div>

  <div>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=7" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  tile__title">
          <h3 class="h4  title__highlight">HDTV Center</h3>
        </div>
        <div class="tile__content-body">
          <p>You'll use our HD Television Centre, which is equipped with broadcast standard technologies, green room, vision gallery and a comprehensive racks room.</p>
        </div>
      </div>
    </a>
  </div>

  <div>
    <a class="tile" href="">
      <figure class="tile__figure">
        <img src="https://picsum.photos/500/500?random=8" class="tile__img" alt=""/>
      </figure>

      <div class="tile__content">
        <div class="title  title--bg-slate  tile__title">
          <h3 class="h4  title__highlight">Extremely Longworded Long Title Demonstration</h3>
        </div>
        <div class="tile__content-body">
          <p>{{ loremLong }}</p>
        </div>
      </div>
    </a>
  </div>
</div>

File:

Content:


                                @import '../../assets/js/vendor/slick-1.8.1/slick/slick.scss';

.slick-slider {
}

.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: $page-gutter-small*2;
  width: 1em;
  height: 1em;
  padding: 0;
  text-indent: -999em;
  background: transparent;
  color: transparent;
  border: 0;
  cursor: pointer;
  z-index: 2;
  overflow: hidden; // prevents odd outline shape

  &:hover {
    opacity: 0.8;
  }

  @media (min-width: $wrap-large-gutter-width) {
    font-size: $page-gutter-large*2;
  }

  &:before {
    content: '';
    display: block;
    margin: auto;
    width: 1em;
    height: 1em;
    background: $neutral--primary url('#{$image-theme-directory-icon}/icon-gt-white.svg') no-repeat 55% 50%;
    background-size: 30%;
    border-radius: 100%;
  }
}

.slick-next {
  right: -#{$page-gutter-small/1.1};

  @media (min-width: $wrap-large-gutter-width) {
    right: -#{$page-gutter-large};
  }

  @media (min-width: $wrap-full-gutter-width) {
    right: -#{$page-gutter-full};
  }
}

.slick-prev {
  left: -#{$page-gutter-small/1.1};

  @media (min-width: $wrap-large-gutter-width) {
    left: -#{$page-gutter-large};
  }

  @media (min-width: $wrap-full-gutter-width) {
    left: -#{$page-gutter-full};
  }

  &:before {
    transform: rotate(180deg);
  }
}

.slick-disabled {
  opacity: 0;
  visibility: hidden;
}

// --

.slider {

}

.slider--tiles {
  .slick-slide {
    // these are sized in JS,
    // see sliderInit() in app.js for .js-facility-slider
    // not ideal as they're pixel based not (r)em, but will do for now.
  }
}

.slider--event-cards {
  .slick-slide {
    margin: 0 $grid-gutter 0 0;
  }
}

.slider--facilities {
  .slick-track {
    margin: 0 -$grid-gutter;
  }
  .slick-slide {
    margin: 0 $grid-gutter;
  }
}

.accolade-slider {
  &__item {
    text-align: center;
    margin: 0 $grid-gutter;
  }

  &__item-title {
    margin-bottom: $spacing-xs;
    border-bottom: 1px solid #FFF;
    padding-bottom: $spacing-xs;
    color: #FFF;
  }

  &__item-description {
    @include typescale('sm');
    @include line-height('normal');
  }

  &__item-img {
    margin: auto;
    width: auto;
    max-height: 2em;
  }

  &__item-figure {
    margin-left: auto!important;
    margin-right: auto!important;
    margin: 0 0 1rem 0;

    & svg {
      max-height: 100px;
    }
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
}

.js-slider--responsive {
  .slick-slide {
    margin: 0 $grid-gutter 0;
  }

  .slick-prev {
    left: 0;
  }

  .slick-next {
    right: 0;
  }
}


.slider--modules {
  // these are sized in JS,
  // see sliderInit() in app.js for .js-slider--variable

  .slick-slide {
    max-width: 80vw;
    margin: 0 $grid-gutter-small;

    @media (min-width: $wrap-width) {
      max-width: $wrap-width - 15rem;
    }
  }
}

.slider--gallery {

  &__nav {

    @at-root .no-js & {
      display: none;
    }

    img {
      box-sizing: border-box;
      border: $spacing-2xs solid transparent;
    }

    .slick-current {
      img {
        border-color: $primary;
      }
    }
  }
}

.js-slider--logos {

  .slick-slide {
    padding: 0 1rem;
  }

  .slick-track {
    display: flex;
  }

  .slick-track .slick-slide {
    display: flex;
    height: auto;
    align-items: center;
    justify-content: center;
  }

  .logo { margin: 0 10%; }
  .logo--low-aspect-ratio { margin: 0 25%; }
}

URL: /components/raw/slider/_slider.scss
Filesystem Path: src\components\slider\_slider.scss
Size: 3.6 KB

Handle: @slider--tiles
Preview:
- With layout
- Component only
Filesystem Path: src\components\slider\slider--tiles.twig