<div class="featured-products u-block u-page-width-max-gutters">
    <h2 class="featured-products__title">Featured Products</h2>
    <div class="featured-products__item-wrapper">
        <div class="featured-products__items js-featured-products-carousel cards cards--even">
            <div class="card js-card">
                <div class="card__inner">
                    <a class="card__link js-card-url" href="#202-02" data-202-02-url="#202-02" data-B202-2M-url="#B202-2M" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2"
                        data-HT202-71-2-url="#HT202-71-2" data-202-02-stock="true" data-B202-2M-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true" data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true"
                        data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340" data-variant="202-02"
             data-202-02-front="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340" data-202-02-angle="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;340" data-202-02-side="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;340"
                      
             data-B202-2M-front="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;340" data-B202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-B202-2M-side="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340" data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340" data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340" data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340" data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340" data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340"
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340" data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340" data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340" data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340" data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340" data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340"
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340" data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340" data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340"
          >
      <span class="card__status js-card-status" data-202-02-status="" data-B202-2M-status="New" data-H202-10-status="New" data-H202-2M-status="" data-H202-70-status="" data-HT202-71-status="" data-H202-2M-2-status="" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          
          
          
          
          
          
          
          
          
      </span>
      <h5 class="card__title">PEAHI</h5>
      <span class="card__sale-price js-card-sale-price" data-202-02-saleprice="$229.00"data-B202-2M-saleprice="$219.00">
        $229.00
      </span>
      <span class="card__price js-card-price" data-202-02-price="$149.00" data-B202-2M-price="$189.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $149.00
      </span>
    </a>
                </div>
            </div>

            <div class="card js-card">
                <div class="card__inner">
                    <a class="card__link js-card-url" href="#HTS267-15C" data-HTS267-15C-url="#HTS267-15C" data-HS267-10M-url="#HS267-10M" data-GS267-02MR-url="#GS267-02MR" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2"
                        data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-HTS267-15C-stock="true" data-HS267-10M-stock="true" data-GS267-02MR-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true" data-HT202-71-stock="true"
                        data-H202-2M-2-stock="true" data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;340" data-variant="HTS267-15C"
             data-HTS267-15C-front="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;340" data-HTS267-15C-angle="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_quarter?$config1800$&amp;wid&#x3D;340" data-HTS267-15C-side="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_side?$config1800$&amp;wid&#x3D;340"
                      
             data-HS267-10M-front="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_front?$config1800$&amp;wid&#x3D;340" data-HS267-10M-angle="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_quarter?$config1800$&amp;wid&#x3D;340" data-HS267-10M-side="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_side?$config1800$&amp;wid&#x3D;340"
                      
             data-GS267-02MR-front="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_front?$config1800$&amp;wid&#x3D;340" data-GS267-02MR-angle="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_quarter?$config1800$&amp;wid&#x3D;340" data-GS267-02MR-side="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340" data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340" data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340" data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340"
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340" data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340" data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340" data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340" data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340" data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340"
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340" data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340" data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340"
          >
      <span class="card__status js-card-status" data-HTS267-15C-status="" data-HS267-10M-status="" data-GS267-02MR-status="" data-H202-2M-status="New" data-H202-70-status="" data-HT202-71-status="" data-H202-2M-2-status="New" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          
          
          
          
          
          
          
          
          
      </span>
      <h5 class="card__title">WATERWAYS</h5>
      <span class="card__sale-price js-card-sale-price" >
        
      </span>
      <span class="card__price js-card-price" data-HTS267-15C-price="$219.00" data-HS267-10M-price="$229.00" data-GS267-02MR-price="$239.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $219.00
      </span>
    </a>
                </div>
            </div>

            <div class="card js-card">
                <div class="card__inner">
                    <a class="card__link js-card-url" href="#H257-16C" data-H257-16C-url="#H257-16C" data-B257-05CR-url="#B257-05CR" data-257-17C-url="#257-17C" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2"
                        data-H202-70-2-url="#H202-70-2" data-HT202-71-2-url="#HT202-71-2" data-H257-16C-stock="true" data-B257-05CR-stock="true" data-257-17C-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true" data-HT202-71-stock="true" data-H202-2M-2-stock="true"
                        data-H202-70-2-stock="true" data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;340" data-variant="H257-16C"
             data-H257-16C-front="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;340" data-H257-16C-angle="https://s7d2.scene7.com/is/image/mauijim/H257-16C_quarter?$config1800$&amp;wid&#x3D;340" data-H257-16C-side="https://s7d2.scene7.com/is/image/mauijim/H257-16C_side?$config1800$&amp;wid&#x3D;340"
                      
             data-B257-05CR-front="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_front?$config1800$&amp;wid&#x3D;340" data-B257-05CR-angle="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_quarter?$config1800$&amp;wid&#x3D;340" data-B257-05CR-side="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_side?$config1800$&amp;wid&#x3D;340"
                      
             data-257-17C-front="https://s7d2.scene7.com/is/image/mauijim/257-17C_front?$config1800$&amp;wid&#x3D;340" data-257-17C-angle="https://s7d2.scene7.com/is/image/mauijim/257-17C_quarter?$config1800$&amp;wid&#x3D;340" data-257-17C-side="https://s7d2.scene7.com/is/image/mauijim/257-17C_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340" data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340" data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340" data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340"
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340" data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340" data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340" data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340" data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340" data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340"
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340" data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340" data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340"
          >
      <span class="card__status js-card-status" data-H257-16C-status="" data-B257-05CR-status="New" data-257-17C-status="New" data-H202-2M-status="New" data-H202-70-status="" data-HT202-71-status="" data-H202-2M-2-status="New" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          
          
          
          
          
          
          
          
          
      </span>
      <h5 class="card__title">KAWIKA</h5>
      <span class="card__sale-price js-card-sale-price" >
        
      </span>
      <span class="card__price js-card-price" data-H257-16C-price="$299.00" data-B257-05CR-price="$299.00" data-257-17C-price="$299.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $299.00
      </span>
    </a>
                </div>
            </div>

            <div class="card js-card">
                <div class="card__inner">
                    <a class="card__link js-card-url" href="#H178-10" data-H178-10-url="#H178-10" data-178-02-url="#178-02" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2"
                        data-HT202-71-2-url="#HT202-71-2" data-H178-10-stock="true" data-178-02-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true" data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true"
                        data-HT202-71-2-stock="true">
      <img class="card__image js-card-image" data-angle="front"
             src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;340" data-variant="H178-10"
             data-H178-10-front="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;340" data-H178-10-angle="https://s7d2.scene7.com/is/image/mauijim/H178-10_quarter?$config1800$&amp;wid&#x3D;340" data-H178-10-side="https://s7d2.scene7.com/is/image/mauijim/H178-10_side?$config1800$&amp;wid&#x3D;340"
                      
             data-178-02-front="https://s7d2.scene7.com/is/image/mauijim/178-02_front?$config1800$&amp;wid&#x3D;340" data-178-02-angle="https://s7d2.scene7.com/is/image/mauijim/178-02_quarter?$config1800$&amp;wid&#x3D;340" data-178-02-side="https://s7d2.scene7.com/is/image/mauijim/178-02_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340" data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340" data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340" data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340" data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340" data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340"
                      
             data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340" data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340" data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340" data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340"
                      
             data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340" data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340" data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340"
                      
             data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340" data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340" data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340"
          >
      <span class="card__status js-card-status" data-H178-10-status="" data-178-02-status="New" data-H202-10-status="New" data-H202-2M-status="New" data-H202-70-status="" data-HT202-71-status="" data-H202-2M-2-status="New" data-H202-70-2-status="New" data-HT202-71-2-status="New">
          
          
          
          
          
          
          
          
          
      </span>
      <h5 class="card__title">VOYAGER</h5>
      <span class="card__sale-price js-card-sale-price" >
        
      </span>
      <span class="card__price js-card-price" data-H178-10-price="$219.00" data-178-02-price="$219.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00" data-HT202-71-2-price="$229.00">
        $219.00
      </span>
    </a>
                </div>
            </div>

        </div>
        <div class="featured-products__item-controls js-featured-products-controls">
            <button class="featured-products__item-control featured-products__item-control--prev">
        <span class="u-visually-hidden">Previous</span>
        <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

      </button>
            <button class="featured-products__item-control featured-products__item-control--next">
        <span class="u-visually-hidden">Next</span>
        <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

      </button>
        </div>
    </div>
</div>
<div class="featured-products u-block u-page-width-max-gutters">
  <h2 class="featured-products__title">{{title}}</h2>
  <div class="featured-products__item-wrapper">
    <div class="featured-products__items js-featured-products-carousel cards cards--even">
      {{#each cards}}
        {{render (dynamicVariant 'card' ../cardVariant) this merge=true}}
      {{/each}}
    </div>
    <div class="featured-products__item-controls js-featured-products-controls">
      <button class="featured-products__item-control featured-products__item-control--prev">
        <span class="u-visually-hidden">Previous</span>
        {{render '@icons--arrow-left'}}
      </button>
      <button class="featured-products__item-control featured-products__item-control--next">
        <span class="u-visually-hidden">Next</span>
        {{render '@icons--arrow-right'}}
      </button>
    </div>
  </div>
</div>
{
  "title": "Featured Products",
  "cardVariant": "zeal",
  "cards": [
    {
      "name": "PEAHI",
      "summary": "Polarized men's classic sunglasses",
      "description": "Pe'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.",
      "category": "Wrap",
      "rating": [
        "star-full",
        "star-full",
        "star-empty",
        "star-empty",
        "star-empty"
      ],
      "vip": null,
      "tax": "Inkl. MWST",
      "variants": [
        {
          "id": "202-02",
          "name": "Gloss Black",
          "color": "#000",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$149.00",
          "salePrice": "$229.00",
          "url": "#202-02",
          "status": null,
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "202-02",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "B202-2M",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$189.00",
          "salePrice": "$219.00",
          "url": "#B202-2M",
          "status": "New",
          "stock": "In Stock",
          "lens": "Blue Hawaii",
          "lensId": "bluehawaii",
          "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "B202-2M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-10",
          "name": "Dark Tortoise",
          "color": "#303032",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": "https://mauijim.scene7.com/is/image/mauijim/10",
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-10",
          "status": "New",
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-10",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-2M",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-2M",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-2M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-70",
          "name": "Redfish",
          "color": "#7d4a07",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-70",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-70",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "HT202-71",
          "name": "MahiMahi",
          "color": "#218b16",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#HT202-71",
          "status": null,
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "HT202-71",
            "inactive": true,
            "material": "mauipure"
          }
        },
        {
          "id": "H202-2M-2",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-2M-2",
          "status": null,
          "stock": "Out of Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-2M-2",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-70-2",
          "name": "Redfish",
          "color": "#7d4a07",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-70-2",
          "status": "New",
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-70-2",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "HT202-71-2",
          "name": "MahiMahi",
          "color": "#218b16",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#HT202-71-2",
          "status": "New",
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "HT202-71-2",
            "inactive": true,
            "material": "mauipure"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": true,
      "excludeVariants": true,
      "mymaui": "true",
      "prescription": null
    },
    {
      "name": "WATERWAYS",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-empty",
        "star-empty",
        "star-empty"
      ],
      "vip": {
        "cardValue": "30%",
        "originalPrice": "$319.00"
      },
      "tax": "Inkl. MWST",
      "variants": [
        {
          "id": "HTS267-15C",
          "name": "Olive Stripe",
          "color": "#808000",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$219.00",
          "salePrice": null,
          "url": "#HTS267-15C",
          "status": null,
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "HTS267-15C",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "HS267-10M",
          "name": "Matte Tortoise",
          "color": "#303032",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#HS267-10M",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "HS267-10M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "GS267-02MR",
          "name": "Matte Black Rubber",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$239.00",
          "salePrice": null,
          "url": "#GS267-02MR",
          "status": null,
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "GS267-02MR",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": true,
      "excludeVariants": true,
      "mymaui": "true",
      "prescription": null
    },
    {
      "name": "KAWIKA",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-half",
        "star-empty"
      ],
      "vip": {
        "cardValue": "30%",
        "originalPrice": "$319.00"
      },
      "tax": null,
      "variants": [
        {
          "id": "H257-16C",
          "name": "Tortoise with Antique Gold",
          "color": "#e0d468",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$299.00",
          "salePrice": null,
          "url": "#H257-16C",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "H257-16C",
            "inactive": null,
            "material": "mauipure"
          }
        },
        {
          "id": "B257-05CR",
          "name": "Crystal",
          "color": "#fff; border: 1px solid #dedede",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#B257-05CR",
          "status": "New",
          "stock": "In Stock",
          "lens": "Blue Hawaii",
          "lensId": "bluehawaii",
          "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "B257-05CR",
            "inactive": true,
            "material": "mauipure"
          }
        },
        {
          "id": "257-17C",
          "name": "Black Gloss with Antique Pewter",
          "color": "#808080",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/257-17C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/257-17C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/257-17C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#257-17C",
          "status": "New",
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "257-17C",
            "inactive": true,
            "material": "mauipure"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": true,
      "excludeVariants": true,
      "mymaui": "true",
      "prescription": null
    },
    {
      "name": "VOYAGER",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-half",
        "star-empty"
      ],
      "vip": null,
      "tax": null,
      "variants": [
        {
          "id": "H178-10",
          "name": "Tortoise",
          "color": "#303032",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/H178-10_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/H178-10_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$219.00",
          "salePrice": null,
          "url": "#H178-10",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H178-10",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "178-02",
          "name": "Gloss Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/178-02_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/178-02_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/178-02_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$219.00",
          "salePrice": null,
          "url": "#178-02",
          "status": "New",
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "178-02",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": null,
      "zeal": true,
      "excludeVariants": true,
      "mymaui": "true",
      "prescription": null
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      function initCarousel(carousel) {
        return imagesLoaded(carousel, function () {
          tns({
            container: carousel,
            controlsContainer: carousel.parentNode.querySelector('.js-featured-products-controls'),
            items: 1,
            gutter: 20,
            responsive: {
              661: 2,
              1025: 4,
              // Ensures the carousel is never active at this size. Also involves
              // CSS that overrides the inline carousel CSS.
              1360: 1000
            },
            slideBy: 'page',
            nav: false,
            loop: false
          });
        });
      }
    
      function init() {
        const featuredProductCarousels = document.querySelectorAll('.js-featured-products-carousel');
    
        for (let i = 0; i < featuredProductCarousels.length; i++) {
          if (!featuredProductCarousels[i].classList.contains('js-component-init')) {
            initCarousel(featuredProductCarousels[i]);
    
            featuredProductCarousels[i].classList.add('js-component-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/featured-products/featured-products.js
  • Filesystem Path: src/components/02-components/featured-products/featured-products.js
  • Size: 1.2 KB
  • Content:
    .featured-products {
      text-align: center;
    }
    
    .featured-products__title {
      margin: 20px 0 -20px;
      font-size: map-get($featured-products-font-size, sm);
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: map-get($featured-products-line-height, sm);
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-xl) {
        font-size: map-get($featured-products-font-size, xl);
        line-height: map-get($featured-products-line-height, xl);
      }
    }
    
    .featured-products__item-wrapper {
      position: relative;
      width: calc(100% + 20px);
      margin: 0 (-1 * $gutter-width-half);
      padding: 0 $gutter-width-half;
      box-sizing: border-box;
    
      .card.card {
        margin: 0;
        overflow: visible !important;
      }
    
      // Fixes odd Firefox layout issues in medium-large breakpoints on some pages.
      & > [data-tns-role='wrapper'] {
        clear: both;
      }
    
      @include breakpoint(1340px) {
        // Ensure the card shadows are visible when it is no longer a carousel.
        & > [data-tns-role='wrapper'] {
          overflow: visible;
        }
    
        // Overrides inline carousel CSS at a width that doesn't use the carousel.
        .card.card {
          width: calc(25% - 20px) !important;
          margin: 0 10px !important;
    
          // Fixes layout issues when card height varies.
          &:nth-child(4n+1) {
            clear: both;
          }
        }
    
        .featured-products__item-control {
          display: none;
        }
      }
    }
    
    .featured-products__items {
      // Allows space for card dropshadow.
      margin-top: 40px;
    
      // Overrides inline carousel CSS at a width that doesn't use the carousel.
      @include breakpoint(1340px) {
        width: 100% !important;
      }
    
      &.cards {
        display: block;
      }
    }
    
    .featured-products__item-control {
      @include reset-button;
      position: absolute;
      top: 50%;
      width: 34px;
      height: 40px;
      margin-top: -20px;
      background-color: $color-white;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
    
      .icon {
        position: relative;
        top: 1px;
        width: 9px;
        height: 15px;
      }
    
      &[disabled],
      &:not([data-controls]) {
        display: none;
      }
    }
    
    .featured-products__item-control--prev {
      left: 0;
      border-radius: 0 10px 10px 0;
    
      .icon {
        right: 1px;
      }
    }
    
    .featured-products__item-control--next {
      right: 0;
      border-radius: 10px 0 0 10px;
    
      .icon {
        left: 1px;
      }
    }
    
  • URL: /components/raw/featured-products/featured-products.scss
  • Filesystem Path: src/components/02-components/featured-products/featured-products.scss
  • Size: 2.3 KB

This component can be used for a number of product carousels depicted in the designs throughout the site, including “You May Also Like”.