Style Guide

slider Element 

<div class="about-slider-element">
    <div class="slider-element-wrap" style="background-image: url('/images/About-BB-Geneva_modified-cutted.png')">
        <div class="container">
            <div class="contactText-wrap">
                <h2 class="main-title">About BlueBox</h2>
            </div>
        </div>
    </div>

    <div class="slider-element-wrap" style="background-image: url('/images/About-BB-London_modified-cutted.png')">
        <div class="container">
            <div class="contactText-wrap">
                <h2 class="main-title">About BlueBox2</h2>
            </div>
        </div>
    </div>

    <div class="slider-element-wrap" style="background-image: url('/images/About-BB-Mexico_modified-cutted.png')">
        <div class="container">
            <div class="contactText-wrap">
                <h2 class="main-title">About BlueBox3</h2>
            </div>
        </div>
    </div>

</div>
 
<div class="about-slider-element">
  {% for item in sliderBlock %}
    {{ item }}
  {% endfor %}
</div>
 
{
  "sliderBlock": [
    {
      "$header_slider_element": {
        "imgSrc": "/images/About-BB-Geneva_modified-cutted.png",
        "title": "About BlueBox"
      }
    },
    {
      "$header_slider_element": {
        "imgSrc": "/images/About-BB-London_modified-cutted.png",
        "title": "About BlueBox2"
      }
    },
    {
      "$header_slider_element": {
        "imgSrc": "/images/About-BB-Mexico_modified-cutted.png",
        "title": "About BlueBox3"
      }
    }
  ]
}
  • Content: 
    import $ from "jquery";

$(document).ready(function () {
  $('.about-slider-element').on('init', function(slick) {
    // Loading slider causes viewport position to shift.
    // Scroll back to target if needed.
    if (window.location.hash) {
      const targetId = window.location.hash.replace("#","");
      const target = document.getElementById(targetId);

      if (target) {
        target.scrollIntoView();
      }
    }
  });

  $(".about-slider-element").slick({
    autoplay: true,
    autoplaySpeed: 4000,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: false,
    arrows: false,
    cssEase: "ease-in-out",
    fade: true
  });
});
  • URL: /components/raw/slider_element/slider_element.js
  • Filesystem Path: components/03-components/slider_element/slider_element.js
  • Size: 651 Bytes
  • Content: 
    .about-slider-element {
  .container {
    max-width: 1060px;
    padding: 0 15px;
  }
  .slider-element-wrap {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center 0px;
    height: 492px;
    position: relative;
    overflow: hidden;
    @include media-breakpoint-down(lg) {
      height: 330px;
    }
    @include media-breakpoint-down(md) {
      background-position: bottom;
    }
    &:not(:first-child) {
      display: none;
    }
    &::after {
      content: "";
      background-color: #29235c;
      opacity: 0.8;
      position: absolute;
      bottom: 0;
      left: 0;
      height: 100%;
      width: 100%;
    }
    .contactText-wrap {
      max-width: 960px;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      padding-right: 20px;
      z-index: 1;
      @include media-breakpoint-down(lg) {
        text-align: center;
      }
      @include media-breakpoint-down(md) {
        padding-right: 0;
      }
      .main-title {
        color: $white;
        font-size: 80px;
        font-family: "PlayfairDisplay-Bold";
        line-height: 83px;
        @include media-breakpoint-down(lg) {
          font-size: 50px;
          line-height: 56px;
        }
      }
    }
  }
}
  • URL: /components/raw/slider_element/slider_element.scss
  • Filesystem Path: components/03-components/slider_element/slider_element.scss
  • Size: 1.4 KB
  • Handle: @slider_element
  • Preview:
  • Filesystem Path: components/03-components/slider_element/slider_element.twig

There are no notes for this item.