<div class="commitment-container-mobile dp-md-n">
    <div id="next-mobile" class="next">
        <svg>
      <use xlink:href="#icon-arrow"></use>
    </svg>
    </div>
    <div class="time-line">
        <div class="circle"></div>
    </div>
    <div class="horizontal-slider  mobile-commitment-slider" id='mobile-commitment-slider'>
    </div>
    <div class="slider-commitment-container dp-md-n">
        <div class="slide commitment">
        </div>
    </div>
</div>
<div class="commitment-container-mobile dp-md-n">
  <div id="next-mobile" class="next">
    <svg>
      <use xlink:href="#icon-arrow"></use>
    </svg>
  </div>
  {{!-- <svg class="previous">
    <use xlink:href="#icon-arrow"></use>
  </svg> --}}
  <div class="time-line">
    <div class="circle"></div>
  </div>
  <div class="horizontal-slider  mobile-commitment-slider" id='mobile-commitment-slider'>
    {{#each commitmentSlide}}
    {{render '@slide--commitment' commitmentMedia }}
    {{/each}}
  </div>
  {{!-- DUMMY SLIDE TO FORCE NEXT SLIDE --}}
  <div class="slider-commitment-container dp-md-n">
    <div class="slide commitment">
    </div>
  </div>
</div>
{
  "sliderData": [
    {
      "slideData": {
        "backgroundImg": "http://kerrymagro.com/wp-content/uploads/2016/02/Ellen-feature.jpg",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Tim",
        "partnerLocation": "Toronto",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    },
    {
      "slideData": {
        "backgroundImg": "https://images04.military.com/sites/default/files/styles/full/public/media/veteran-jobs/hiring-veterans/2016/08/starbucksaprons600.jpg?itok=PQEvZF4a",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Greg",
        "partnerLocation": "Vancouver",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    },
    {
      "slideData": {
        "backgroundImg": "http://www.nationmultimedia.com/img/news/2012/05/07/30181404/30181404-01.jpg",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Sammy",
        "partnerLocation": "Kingston",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    },
    {
      "slideData": {
        "backgroundImg": "https://www.churchmanor.com/wp-content/uploads/2018/09/Starbucks1a.jpg",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Richard",
        "partnerLocation": "Richmond",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    },
    {
      "slideData": {
        "backgroundImg": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkORjfmfpByibbQ1NPMiMDx3ixqit5egcAYH1REq2sy6n4kvlUPw",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Souvi",
        "partnerLocation": "Haul",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    },
    {
      "slideData": {
        "backgroundImg": "http://www.optionstheedge.com/sites/default/files/field/featured-image/2018/peo_sydney_6_hh.jpg",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Jeanette",
        "partnerLocation": "YellowKnife",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    },
    {
      "slideData": {
        "backgroundImg": "https://eprretailnews.com/wp-content/uploads/2015/04/Starbucks-invested-more-than-3.7-million-in-Origin-Community-Grants-in-2014-to-help-support-coffee-farming-communities.jpg",
        "slideTitle": "GIVE GOOD: YOUNGE ST. MISSION",
        "partnerName": "Sarah",
        "partnerLocation": "Regina",
        "partnerQuote": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper volutpat vestibulum. Nunc sodales diam sit amet ultricies feugiat. Sed.",
        "mediaSrc": "https://www.youtube.com/watch?v=w2LaeleCIs4"
      }
    }
  ],
  "commitmentImageSliderData": [
    {
      "commitmentImageSlideData": {
        "mainImgSrc": "https://images.glaciermedia.ca/polopoly_fs/1.23472777.1540299694!/fileImage/httpImage/image.jpg_gen/derivatives/landscape_804/starbucks-5e1989ea-d6c1-11e8-a10f-b51546b10756-jpg.jpg",
        "mainImgAlt": null,
        "subImg1Src": null,
        "subImg1Alt": null,
        "subImg2Src": null,
        "subImg2Alt": null,
        "subImg3Src": null,
        "subImg3Alt": null,
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": "Starbucks is committed to rescuing 100% of available food for donation"
      }
    },
    {
      "commitmentImageSlideData": {
        "mainImgSrc": "https://thumbs.mic.com/Mjk1YmZkMDkwZSMvajdmc0JIYjZRMnJrcXl1OWplWWhLQUhsQUNZPS81N3g0ODoxMzcxeDcyNi84MDB4NDUwL2ZpbHRlcnM6Zm9ybWF0KGpwZWcpOnF1YWxpdHkoODApL2h0dHBzOi8vczMuYW1hem9uYXdzLmNvbS9wb2xpY3ltaWMtaW1hZ2VzL3VqeDl5azRvZXJyczJobDdhcXRrejhwb2Z4dG9qeTBsN211Z2Q5emJnZGx4Z2h3ZWptYmpnenpxaDJwcGoweHouanBn.jpg",
        "mainImgAlt": null,
        "subImg1Src": null,
        "subImg1Alt": null,
        "subImg2Src": null,
        "subImg2Alt": null,
        "subImg3Src": null,
        "subImg3Alt": null,
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": "Starbucks is committed to rescuing 100% of available food for donation"
      }
    },
    {
      "commitmentImageSlideData": {
        "mainImgSrc": "https://media.glassdoor.com/l/b0/58/4e/00/starbucks-partners-employees.jpg",
        "mainImgAlt": null,
        "subImg1Src": null,
        "subImg1Alt": null,
        "subImg2Src": null,
        "subImg2Alt": null,
        "subImg3Src": null,
        "subImg3Alt": null,
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": "Starbucks is committed to rescuing 100% of available food for donation"
      }
    },
    {
      "commitmentImageSlideData": {
        "mainImgSrc": "https://frontnews.eu/contents/news/39505/images/resize_JMiFdyH7c6EpANKCequjQgV3tT9avzwD_980x590.jpg",
        "mainImgAlt": null,
        "subImg1Src": null,
        "subImg1Alt": null,
        "subImg2Src": null,
        "subImg2Alt": null,
        "subImg3Src": null,
        "subImg3Alt": null,
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": "Starbucks is committed to rescuing 100% of available food for donation"
      }
    },
    {
      "commitmentImageSlideData": {
        "mainImgSrc": "https://stories.starbucks.com/wp-content/uploads/2019/01/Inclusion_Academy_for_retail_resized.jpg",
        "mainImgAlt": null,
        "subImg1Src": null,
        "subImg1Alt": null,
        "subImg2Src": null,
        "subImg2Alt": null,
        "subImg3Src": null,
        "subImg3Alt": null,
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": "Starbucks is committed to rescuing 100% of available food for donation"
      }
    }
  ]
}
  • Content:
    .horizontal-slider {
      width: 100vw;
      overflow: hidden;
      padding: 15 0;
    
      .slick-track {
        width: 100vw;
        overflow: hidden;
        padding: 15px 0 10px;
      }
    
      .slick-initialized {
    
        /* the slides */
        .slick-slide {
          margin: 0 8px;
        }
    
        /* the parent */
        .slick-list {
          margin: 0 -8px;
        }
      }
    
      .slick-prev,
      .slick-next {
        top: auto;
        bottom: 5px;
    
        &:before {
          color: $green;
        }
      }
    
      &.mobile-commitment-slider {
        align-content: left;
        transform-origin: center center;
        resize: both;
        position: relative;
    
        .slick-track {
          padding-top: 25px;
        }
    
        .slick-initialized {
    
          /* the slides */
          .slick-slide {
            margin: 0 15px;
          }
    
          /* the slides */
          .slide:after {
            position: relative;
            right: -10px;
            width: 10px;
            height: 100%;
          }
        }
      }
    }
    
    .commitment-container-mobile {
      $timeline-grey: lighten(grey, 15%);
      position: relative;
      overflow: hidden;
      transform-origin: 0% 0%;
      transform: scale (1);
      transition: transform 150ms;
      max-width: 100vw;
    
      .slide {
        padding-left: 25px;
        max-width: 300px;
      }
    
      .next,
      .previous {
        $size: 40px;
        width: $size;
        height: $size;
        position: absolute;
        z-index: 99;
        display: flex;
        justify-content: center;
        align-items: center;
    
        svg {
          fill: $green;
          width: 18px;
          height: 10px;
        }
      }
    
      .next {
        top: -5px;
        left: 20px;
      }
    
      .previous {
        bottom: 5px;
        left: 35px;
      }
    
      .time-line {
        position: relative;
        z-index: 0;
        top: 300px;
        background-color: $timeline-grey;
        height: 1px;
        width: 100%;
    
        .circle {
          $size: 12px;
          position: absolute;
          left: -6px;
          top: -6px;
          border: 1px solid $timeline-grey;
          background-color: $light;
          width: $size;
          height: $size;
        }
      }
    
      @media all and (min-width: 450px) and (max-width: 550px) {
        transform: scale(1.1)
      }
    
      @media all and (min-width: 551px) and (max-width: 650px) {
        transform: scale(1.2)
      }
    
      @media all and (min-width: 651px) and (max-width: 780px) {
        transform: scale(1.4)
      }
    }
    
    .video-container {
      position: relative;
      padding: 15px 0;
    
      img {
    
        &.video-previous,
        &.video-next {
          position: absolute;
          width: 0;
          height: 0;
        }
      }
    
      .show-on-hover {
        &:hover {
          opacity: 0;
        }
      }
    
      .bg-scene {
        @extend %absolute-fill;
        z-index: 0;
    
        .circle {
          $size: 40px;
          width: $size;
          height: $size;
          position: absolute;
    
          &:first-of-type {
            border: 2px solid $green;
            top: -50px;
            left: 30%;
          }
    
          &:last-of-type {
            top: 15px;
            right: 30%;
            opacity: 0.9;
          }
        }
      }
    
      .arrow {
        position: relative;
        bottom: -10px;
        width: 300px;
        margin: 0 auto;
    
    
        .previous,
        .next {
          $size: 50px;
          width: $size;
          height: $size;
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          top: -15px;
    
          svg {
            fill: $green;
            width: 18px;
            height: 10px;
          }
        }
    
    
        .previous {
    
          left: 0;
    
          svg {
            transform: rotate(180deg);
          }
        }
    
        .next {
          right: 0;
        }
    
        @include respond-above(md) {
          width: 100%;
          margin: 0 auto;
    
          .previous,
          .next {
            display: none;
          }
    
          svg {
            width: 0;
            height: 0;
          }
    
          img {
            $distance: 20px;
    
            &.video-previous,
            &.video-next {
              top: -254px;
              position: absolute;
              margin: 0;
              height: auto;
              width: 47px;
              background: #fff;
              padding: 11px 15px;
              border-radius: 50%;
              border: 2px solid $green;
    
              &:hover {
                cursor: pointer;
              }
            }
    
            &.video-previous {
              left: $distance;
            }
    
            &.video-next {
              right: $distance;
            }
          }
        }
      }
    
      @include respond-above(md) {
        .show-on-hover {
          &:hover {
            opacity: 1;
          }
        }
      }
    }
    
    .fr {
      .video-container {
        button {
          font-size: 72%;
        }
      }
    }
  • URL: /components/raw/horizontal-slider/_horizontal-slider.scss
  • Filesystem Path: structures/03-organisms/horizontal-slider/_horizontal-slider.scss
  • Size: 4.2 KB

There are no notes for this item.