<div id="commitmentCarousel" class="d-flex col-2 commitment-slider-desktop">
    <div>
        <div class="commitment-slide">
            <div class="img-container">
                <img data-src="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" alt="" class="main-img rounded lozad">
            </div>
        </div>
        <div class="commitment-slide">
            <div class="img-container">
                <img data-src="https://thumbs.mic.com/Mjk1YmZkMDkwZSMvajdmc0JIYjZRMnJrcXl1OWplWWhLQUhsQUNZPS81N3g0ODoxMzcxeDcyNi84MDB4NDUwL2ZpbHRlcnM6Zm9ybWF0KGpwZWcpOnF1YWxpdHkoODApL2h0dHBzOi8vczMuYW1hem9uYXdzLmNvbS9wb2xpY3ltaWMtaW1hZ2VzL3VqeDl5azRvZXJyczJobDdhcXRrejhwb2Z4dG9qeTBsN211Z2Q5emJnZGx4Z2h3ZWptYmpnenpxaDJwcGoweHouanBn.jpg"
                    alt="" class="main-img rounded lozad">
                <img data-src="https://thumbs.mic.com/Mjk1YmZkMDkwZSMvajdmc0JIYjZRMnJrcXl1OWplWWhLQUhsQUNZPS81N3g0ODoxMzcxeDcyNi84MDB4NDUwL2ZpbHRlcnM6Zm9ybWF0KGpwZWcpOnF1YWxpdHkoODApL2h0dHBzOi8vczMuYW1hem9uYXdzLmNvbS9wb2xpY3ltaWMtaW1hZ2VzL3VqeDl5azRvZXJyczJobDdhcXRrejhwb2Z4dG9qeTBsN211Z2Q5emJnZGx4Z2h3ZWptYmpnenpxaDJwcGoweHouanBn.jpg"
                    alt="" class="sub-img-3 rounded lozad">
            </div>
        </div>
        <div class="commitment-slide">
            <div class="img-container">
                <img data-src="https://media.glassdoor.com/l/b0/58/4e/00/starbucks-partners-employees.jpg" alt="" class="main-img rounded lozad">
                <img data-src="https://thumbs.mic.com/Mjk1YmZkMDkwZSMvajdmc0JIYjZRMnJrcXl1OWplWWhLQUhsQUNZPS81N3g0ODoxMzcxeDcyNi84MDB4NDUwL2ZpbHRlcnM6Zm9ybWF0KGpwZWcpOnF1YWxpdHkoODApL2h0dHBzOi8vczMuYW1hem9uYXdzLmNvbS9wb2xpY3ltaWMtaW1hZ2VzL3VqeDl5azRvZXJyczJobDdhcXRrejhwb2Z4dG9qeTBsN211Z2Q5emJnZGx4Z2h3ZWptYmpnenpxaDJwcGoweHouanBn.jpg"
                    alt="" class="sub-img-1 rounded lozad">
                <img data-src="https://media.glassdoor.com/l/b0/58/4e/00/starbucks-partners-employees.jpg" alt="" class="sub-img-2 rounded lozad">
            </div>
        </div>
        <div class="commitment-slide">
            <div class="img-container">
                <img data-src="https://frontnews.eu/contents/news/39505/images/resize_JMiFdyH7c6EpANKCequjQgV3tT9avzwD_980x590.jpg" alt="" class="main-img rounded lozad">
            </div>
        </div>
        <div class="commitment-slide">
            <div class="img-container">
                <img data-src="https://stories.starbucks.com/wp-content/uploads/2019/01/Inclusion_Academy_for_retail_resized.jpg" alt="" class="main-img rounded lozad">
                <img data-src="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" alt="" class="sub-img-1 rounded lozad">
            </div>
        </div>
    </div>

    <div class="label-carousel">

        <div class="vertical-slider">
            <div class="commitment-slide-label clearfix">
                <div class="circle"></div>
                <p class="text-dark">
                    <span class="multi-underline">
      <a target="_blank" rel="noopener" href="www.starbucks.ca">Starbucks is committed to rescuing 100% of available food for donation</a>
    </span>
                </p>
            </div>
            <div class="commitment-slide-label clearfix">
                <div class="circle"></div>
                <p class="text-dark">
                    <span class="multi-underline">
      <a target="_blank" rel="noopener" href="www.starbucks.ca">Starbucks is committed to being nice to animals</a>
    </span>
                </p>
            </div>
            <div class="commitment-slide-label clearfix">
                <div class="circle"></div>
                <p class="text-dark">
                    <span class="multi-underline">
      <a target="_blank" rel="noopener" href="www.starbucks.ca">Starbucks is committed to being nice to plants</a>
    </span>
                </p>
            </div>
            <div class="commitment-slide-label clearfix">
                <div class="circle"></div>
                <p class="text-dark">
                    <span class="multi-underline">
      <a target="_blank" rel="noopener" href="www.starbucks.ca">Starbucks is committed to being courterous to your gran</a>
    </span>
                </p>
            </div>
            <div class="commitment-slide-label clearfix">
                <div class="circle"></div>
                <p class="text-dark">
                    <span class="multi-underline">
      <a target="_blank" rel="noopener" href="www.starbucks.ca">,Starbucks is committed trying oat milk we hear it&#x27;s great</a>
    </span>
                </p>
            </div>
        </div>
        <div class="post"></div>
        <div class="progressBar"></div>
        <div class="post end"></div>
    </div>
    <div id='greenDot' class="green-dot blur circle"></div>
</div>
<div id="commitmentCarousel" class="d-flex col-2 commitment-slider-desktop">
    <div>
        {{#each commitmentSlide}}
            {{render '@commitment-slide' commitmentMedia merge=false}}
        {{/each}}
    </div>

    <div class="label-carousel">

        <div class="vertical-slider">
            {{#each commitmentSlide}}
                {{render '@commitment-slide-lable-desktop' commitmentMedia merge=false}}
            {{/each}}
        </div>
        <div class="post"></div>
        <div class="progressBar"></div>
        <div class="post end"></div>
    </div>
    <div id='greenDot' class="green-dot blur circle"></div>
</div>
{
  "commitmentSlide": [
    {
      "commitmentMedia": {
        "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"
      }
    },
    {
      "commitmentMedia": {
        "mainImgSrc": "https://thumbs.mic.com/Mjk1YmZkMDkwZSMvajdmc0JIYjZRMnJrcXl1OWplWWhLQUhsQUNZPS81N3g0ODoxMzcxeDcyNi84MDB4NDUwL2ZpbHRlcnM6Zm9ybWF0KGpwZWcpOnF1YWxpdHkoODApL2h0dHBzOi8vczMuYW1hem9uYXdzLmNvbS9wb2xpY3ltaWMtaW1hZ2VzL3VqeDl5azRvZXJyczJobDdhcXRrejhwb2Z4dG9qeTBsN211Z2Q5emJnZGx4Z2h3ZWptYmpnenpxaDJwcGoweHouanBn.jpg",
        "mainImgAlt": null,
        "subImg1Src": null,
        "subImg1Alt": null,
        "subImg2Src": null,
        "subImg2Alt": null,
        "subImg3Src": "https://thumbs.mic.com/Mjk1YmZkMDkwZSMvajdmc0JIYjZRMnJrcXl1OWplWWhLQUhsQUNZPS81N3g0ODoxMzcxeDcyNi84MDB4NDUwL2ZpbHRlcnM6Zm9ybWF0KGpwZWcpOnF1YWxpdHkoODApL2h0dHBzOi8vczMuYW1hem9uYXdzLmNvbS9wb2xpY3ltaWMtaW1hZ2VzL3VqeDl5azRvZXJyczJobDdhcXRrejhwb2Z4dG9qeTBsN211Z2Q5emJnZGx4Z2h3ZWptYmpnenpxaDJwcGoweHouanBn.jpg",
        "subImg3Alt": null,
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": "Starbucks is committed to being nice to animals"
      }
    },
    {
      "commitmentMedia": {
        "mainImgSrc": "https://media.glassdoor.com/l/b0/58/4e/00/starbucks-partners-employees.jpg",
        "mainImgAlt": null,
        "subImg1Src": "https://thumbs.mic.com/Mjk1YmZkMDkwZSMvajdmc0JIYjZRMnJrcXl1OWplWWhLQUhsQUNZPS81N3g0ODoxMzcxeDcyNi84MDB4NDUwL2ZpbHRlcnM6Zm9ybWF0KGpwZWcpOnF1YWxpdHkoODApL2h0dHBzOi8vczMuYW1hem9uYXdzLmNvbS9wb2xpY3ltaWMtaW1hZ2VzL3VqeDl5azRvZXJyczJobDdhcXRrejhwb2Z4dG9qeTBsN211Z2Q5emJnZGx4Z2h3ZWptYmpnenpxaDJwcGoweHouanBn.jpg",
        "subImg1Alt": null,
        "subImg2Src": "https://media.glassdoor.com/l/b0/58/4e/00/starbucks-partners-employees.jpg",
        "subImg2Alt": null,
        "subImg3Src": null,
        "subImg3Alt": "https://media.glassdoor.com/l/b0/58/4e/00/starbucks-partners-employees.jpg",
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": "Starbucks is committed to being nice to plants"
      }
    },
    {
      "commitmentMedia": {
        "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 being courterous to your gran"
      }
    },
    {
      "commitmentMedia": {
        "mainImgSrc": "https://stories.starbucks.com/wp-content/uploads/2019/01/Inclusion_Academy_for_retail_resized.jpg",
        "mainImgAlt": null,
        "subImg1Src": "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",
        "subImg1Alt": null,
        "subImg2Src": null,
        "subImg2Alt": null,
        "subImg3Src": null,
        "subImg3Alt": null,
        "lableLinkSrc": "www.starbucks.ca",
        "lableLinkText": ",Starbucks is committed trying oat milk we hear it's great"
      }
    }
  ]
}
  • Content:
    .commitment-slider-desktop {
      margin: 0 auto;
      transition: opacity 300ms ease-out;
      max-width: 1110px;
      // DO NOT CHANGE PADDING - WILL CREATE BUGS
      padding: 0 30px;
      // DO NOT CHANGE PADDING - WILL CREATE BUGS
      margin-bottom: calc(100vh + 300px);
    
      .commitment-slide {
        height: 533px;
    
        &.active {
          .img-container {
            opacity: 1;
          }
        }
    
        .img-container {
          opacity: 0;
          position: absolute;
          transition: opacity 300ms;
          top: calc(50vh - 246px);
          left: calc(25vw - 150px);
        }
    
        &:last-child {
          &.active {
            .img-container {
              position: fixed;
            }
          }
        }
      }
    
      .green-dot {
        $size: 300px;
        position: absolute;
        background-color: $green;
        width: $size;
        height: $size;
        top: calc(50vh - 225px);
        left: calc(25% - 150px);
        z-index: -1;
        top: -60px;
        opacity: 0;
        transition: box-shadow 300ms ease-out, opacity 500ms ease-in-out, top 700ms ease-out;
        margin-bottom: 50vh;
    
        &.fading-in {
          opacity: 1;
          top: 0;
        }
        &.faded-in {
          transition: none;
        }
      }
    
      .label-carousel {
        height: 490px;
        width: 50vw;
        position: absolute;
        left: 50vw;
        top: calc(50vh - 275px);
        display: flex;
        align-items: center;
        overflow: hidden;
        padding-bottom: 100px;
    
        &:after {
          content: '';
          height: calc(50% - 10px);
          position: absolute;
          top: 9px;
          left: 22px;
          z-index: -1;
          border-left: 3px solid $green;
        }
    
        &:before {
          position: absolute;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          top: 0;
        }
    
        .commitment-slide-label {
          height: 70px;
          width: 50vw;
          transition: all 300ms;
          display: flex;
          opacity: 0;
    
          p {
            font-weight: 450;
            line-height: 30px;
            font-size: 16.5px;
            opacity: 0;
          }
    
          &.slick-active,
          &.slick-active p,
          &.from-active-1,
          &.from-active-2 {
            opacity: 1;
          }
    
          &.from-active-1 {
            p {
              opacity: 0.3;
            }
          }
    
          &.from-active-2 {
            p {
              opacity: 0.1;
            }
          }
    
        }
    
        .slick-list {
          overflow: visible;
          position: absolute;
        }
    
      }
    
      &.section-active {
        .commitment-slide .img-container,
        .green-dot,
        .label-carousel {
          position: fixed;
        }
    
        .commitment-slide-label {
          &.slick-active {
            .circle:after {
              $size: 40px;
              min-width: $size;
              min-height: $size;
            }
    
            p {
              opacity: 1;
    
              span.multi-underline {
                padding-bottom: 1px;
                background-size: 100% 105%;
              }
            }
          }
        }
      }
    
      .post {
        margin: 0 14px;
        position: absolute;
        border-radius: 50%;
        border: 1px solid grey;
        background-color: $light;
        width: 10px;
        height: 10px;
        top: 0;
        left: 4.3px;
    
        &.end {
          top: unset;
          bottom: 0;
          background-color: grey;
        }
      }
    
      #progressBar {
        border-left: 3px solid $green;
        position: relative;
        top: 60px;
        left: 22px;
        z-index: -1;
      }
    
      .progressBar {
        width: 1px;
        position: absolute;
        background: $gray-300;
        height: 100%;
        top: 8px;
        left: 23px;
        z-index: -1;
      }
    
    
    
      @media all and (min-width: 930px) {
        .label-carousel {
          top: calc(50vh - 240px);
          height: 470px;
        }
    
        .green-dot {
    
          $size: 350px;
          width: $size;
          height: $size;
          left: calc(25% - 185px);
          background-color: $green;
    
          &.fading-in {
            top: calc(50vh - 275px);
          }
        }
      }
    
      @media all and (min-width: 1100px) {
        .label-carousel {
          top: calc(50vh - 295px);
          height: 575px;
          padding-bottom: 120px;
        }
    
        .commitment-slide {
          height: 663px;
        }
    
        .green-dot {
    
          $size: 450px;
          width: $size;
          height: $size;
          left: calc(25% - 245px);
    
          &.fading-in {
            top: calc(50vh - 320px);
          }
        }
      }
    
      @include respond-above(lg) {
        .commitment-slide-label {
          p {
            font-size: 19px;
    
          }
        }
      }
    }
  • URL: /components/raw/commitment-slider-desktop/commitment-slider-desktop.scss
  • Filesystem Path: structures/04-templates/commitment-slider-desktop/commitment-slider-desktop.scss
  • Size: 4.2 KB

There are no notes for this item.