Style Guide

Vertical Slider 

<div class="verticalSlider-wrap  bg-grey">

    <div class="slider-vertical">

        <div class="slider-wrap">
            <div class="row verticalSlider-row">
                <div class="col-lg-6">
                    <div class="leftTextWrap">
                        <h2 class="main-title">1 million to <span>5 billion Assets</span> under Management in 3.7 Years</h2>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="rightTextWrap">
                        <h3 class="sub-title">Why BlueBox</h3>
                        <p>The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years. The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years, driving an acceleration in tech adoption simultaneously across all industry verticals. The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years,</p>
                        <a class="btn btn-link" href="#">Find out more</a>
                    </div>
                </div>
            </div>

        </div>
        <div class="slider-wrap">
            <div class="row verticalSlider-row">
                <div class="col-lg-6">
                    <div class="leftTextWrap">
                        <h2 class="main-title">1 million to <span>5 billion Assets</span> under Management in 3.7 Years</h2>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="rightTextWrap">
                        <h3 class="sub-title">Why BlueBox</h3>
                        <p>The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years, driving an acceleration in tech adoption simultaneously across all industry verticals. </p>
                        <a class="btn btn-link" href="#">Find out more</a>
                    </div>
                </div>
            </div>

        </div>
        <div class="slider-wrap">
            <div class="row verticalSlider-row">
                <div class="col-lg-6">
                    <div class="leftTextWrap">
                        <h2 class="main-title">1 million to <span>5 billion Assets</span> under Management in 3.7 Years</h2>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="rightTextWrap">
                        <h3 class="sub-title">Why BlueBox</h3>
                        <p>The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years, driving an acceleration in tech adoption simultaneously across all industry verticals. </p>
                        <a class="btn btn-link" href="#">Find out more</a>
                    </div>
                </div>
            </div>

        </div>
        <div class="slider-wrap">
            <div class="row verticalSlider-row">
                <div class="col-lg-6">
                    <div class="leftTextWrap">
                        <h2 class="main-title">1 million to <span>5 billion Assets</span> under Management in 3.7 Years</h2>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="rightTextWrap">
                        <h3 class="sub-title">Why BlueBox</h3>
                        <p>The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years.</p>
                        <a class="btn btn-link" href="#">Find out more</a>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>
 
<div class="verticalSlider-wrap  {{ bgGrey ? 'bg-grey' : 'bg-white' }}">
  
  <div class="slider-vertical">
    {# <div class="container"> #}
      {% for item in sliderBox %}
        <div class="slider-wrap">
          {{ item }}
        </div>
      {% endfor %}
    {# </div> #}
  </div>
</div>
 
{
  "bgGrey": true,
  "sliderBox": [
    {
      "$vertical_slider_element": {
        "mainTitle": "1 million to <span>5 billion Assets</span> under Management in 3.7 Years",
        "subTitle": "Why BlueBox",
        "desc": "The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years. The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years, driving an acceleration in tech adoption simultaneously across all industry verticals. The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years,",
        "btn_text": "Find out more",
        "btn_link": "#"
      }
    },
    {
      "$vertical_slider_element": {
        "mainTitle": "1 million to <span>5 billion Assets</span> under Management in 3.7 Years",
        "subTitle": "Why BlueBox",
        "desc": "The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years, driving an acceleration in tech adoption simultaneously across all industry verticals. ",
        "btn_text": "Find out more",
        "btn_link": "#"
      }
    },
    {
      "$vertical_slider_element": {
        "mainTitle": "1 million to <span>5 billion Assets</span> under Management in 3.7 Years",
        "subTitle": "Why BlueBox",
        "desc": "The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years, driving an acceleration in tech adoption simultaneously across all industry verticals. ",
        "btn_text": "Find out more",
        "btn_link": "#"
      }
    },
    {
      "$vertical_slider_element": {
        "mainTitle": "1 million to <span>5 billion Assets</span> under Management in 3.7 Years",
        "subTitle": "Why BlueBox",
        "desc": "The Direct Connection of computers to the real world has enabled the technology revolution of the past 15 years.",
        "btn_text": "Find out more",
        "btn-link": "#"
      }
    }
  ]
}
  • Content: 
    import $ from "jquery";

$(document).ready(function () {
  const slider = $(".slider-vertical");

  // $(".slider-vertical").slick({
  //   // autoplay: true,
  //   // autoplaySpeed: 5000,
  //   vertical: true,
  //   verticalSwiping: true,
  //   slidesToShow: 1,
  //   slidesToScroll: 1,
  //   dots: true,
  //   arrows: false,
  //   loops: false,
  //   Infinity: false
  // });

  // setTimeout(function () {
  //   var maxHeight = -1;
  //   $(".slick-slide").each(function () {
  //     if ($(this).height() > maxHeight) {
  //       maxHeight = $(this).height();
  //     }
  //   });
  //   $(".slick-slide").each(function () {
  //     if ($(this).height() < maxHeight) {
  //       $(this).css(
  //         "margin",
  //         Math.ceil((maxHeight - $(this).height()) / 2) + "px 0"
  //       );
  //     }
  //   });
  // }, 1000);

  // slider.on("wheel", function(e) {
  //   e.preventDefault();

  //   if (e.originalEvent.deltaY < 0) {
  //     $(this).slick("slickNext");
  //   } else {
  //     $(this).slick("slickPrev");
  //   }
  // });
});

// $(window).on("resize", function () {
//   setTimeout(function () {
//     var maxHeight = -1;
//     $(".slick-slide").each(function () {
//       if ($(this).height() > maxHeight) {
//         maxHeight = $(this).height();
//       }
//     });
//     $(".slick-slide").each(function () {
//       if ($(this).height() < maxHeight) {
//         $(this).css(
//           "margin",
//           Math.ceil((maxHeight - $(this).height()) / 2) + "px 0"
//         );
//       }
//     });
//   }, 500);
// });



$(document).ready(function () {

  const slider = $('.slider-vertical');

  function onSliderAfterChange(event, slick, currentSlide) {
    $(event.target).data('current-slide', currentSlide);
  }

  function onSliderWheel(e) {
    const deltaY = e.originalEvent.deltaY,
      $currentSlider = $(e.currentTarget),
      currentSlickIndex = $currentSlider.data('current-slide') || 0;

    if (
      // check when you scroll up
      (deltaY < 0 && currentSlickIndex == 0) ||
      // check when you scroll down
      (deltaY > 0 && currentSlickIndex == $currentSlider.data('slider-length') - 1)
    ) {
      return;
    }

    e.preventDefault();

    if (e.originalEvent.deltaY < 0) {
      $currentSlider.slick('slickPrev');
    } else {
      $currentSlider.slick('slickNext');
    }
  }

  slider.each(function (index, element) {
    const $element = $(element);
    // set the length of children in each loop
    // but the better way for performance is to set this data attribute on the div.slider in the markup
    $element.data('slider-length', $element.children().length);

    var maxHeight = -1;
    $element.find('.slider-wrap').each(function(){
      if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
      }
    });
    $element.find('.slider-wrap').css({
      'height': maxHeight + 'px',
      'min-height': maxHeight + 'px'
    });
  }).slick({
    vertical: true,
    verticalSwiping: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    arrows: false,
    loops: false,
    infinity: false,
    centerMode: true,
    speed: 1000,
    centerPadding: '0',
  })
  .on('afterChange', onSliderAfterChange)
  .on('wheel', onSliderWheel)
})
  • URL: /components/raw/vertical_slider/vertical_slider.js
  • Filesystem Path: components/03-components/vertical_slider/vertical_slider.js
  • Size: 3.3 KB
  • Content: 
    .verticalSlider-wrap {
  // padding: 80px 0;
  // @include media-breakpoint-down(lg) {
  //   padding: 80px 0;
  // }
  &::-webkit-scrollbar {
    display: none;
  }
  .container {
    max-width: 1060px;
    padding: 0 15px;
  }
  .slider-wrap {
    transition: all 0.15s ease-in-out;
    max-width: 1060px;
    padding: 0 15px;
    margin: 50px auto;
    display: flex !important;
    @include media-breakpoint-down(md) {
      padding: 30px;
    }
    &::-webkit-scrollbar {
      display: none;
    }
    .verticalSlider-row {
      // align-items: center;
      // padding-bottom: 90px;
      @include media-breakpoint-down(lg) {
        padding-bottom: 40px;
      }
      .leftTextWrap {
        @include media-breakpoint-down(lg) {
          margin-bottom: 30px;
        }
        @include media-breakpoint-down(md) {
          margin-bottom: 30px;
        }
        .main-title {
          color: #120f29;
          font-size: 45px;
          font-family: "PlayfairDisplay-Bold";
          line-height: 62px;
          max-width: 380px;
          @include media-breakpoint-down(lg) {
            font-size: 30px;
            line-height: 42px;
            margin-bottom: 0;
          }
          span {
            color: $secondary;
          }
        }
      }
      .rightTextWrap {
        .sub-title {
          font-size: 17px;
          font-family: "OpenSans_light";
          line-height: 23px;
          margin-bottom: 43px;
          color: #120f29;
          @include media-breakpoint-down(md) {
            margin-bottom: 30px;
            font-size: 14px;
            line-height: 28px;
          }
        }
        p {
          @include media-breakpoint-down(xl) {
            margin-right: 35px;
          }
          @include media-breakpoint-down(lg) {
            margin-right: 0;
            margin-bottom: 30px;
          }
          @include media-breakpoint-down(md) {
            margin-bottom: 30px;
          }
        }
      }
    }
  }
  .slick-dots {
    position: absolute;
    top: 26%;
    right: 14%;
    // transform: rotate(180deg);
    padding-left: 2rem;
    padding-right: 0;
    @media only screen and (max-width: 1500px) {
      right: 10%;
    }
    @media only screen and (max-width: 1366px) {
      right: 6%;
    }
    @include media-breakpoint-down(xl) {
      right: 3%;
    }
    @include media-breakpoint-down(lg) {
      top: 15%;
    }
    @include media-breakpoint-down(sm) {
      top: 10%;
    }
    li {
      list-style: none;
      padding: 5px 0px;
      &.slick-active {
        button {
          background-color: $secondary;
          opacity: 1;
          width: 14px;
          height: 14px;
          @include media-breakpoint-down(md) {
            width: 8px;
            height: 10px;
          }
          @include media-breakpoint-down(sm) {
            width: 11px;
            height: 11px;
          }
        }
      }
      button {
        background-color: #120f29;
        opacity: 0.5;
        border: 0;
        font-size: 0;
        width: 11px;
        height: 11px;
        border-radius: 100%;
        @include media-breakpoint-down(md) {
          width: 8px;
          height: 10px;
        }
        @include media-breakpoint-down(sm) {
          width: 11px;
          height: 11px;
        }
      }
    }
  }
}

// .slick-vertical .slick-slide {
//   max-height: 270px;
//   height: 100%;
// }
  • URL: /components/raw/vertical_slider/vertical_slider.scss
  • Filesystem Path: components/03-components/vertical_slider/vertical_slider.scss
  • Size: 3.4 KB
  • Handle: @vertical_slider
  • Preview:
  • Filesystem Path: components/03-components/vertical_slider/vertical_slider.twig

There are no notes for this item.