Slider and Product Functionality

In this example below you will see how to do a Slider and Product Functionality with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jeffpannone, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jeffpannone ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Slider and Product Functionality</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://i.icomoon.io/public/c88de6d4a5/DWSiteGenesis/style.css'>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css'>
<link rel='stylesheet prefetch' href='https://photoswipe.s3.amazonaws.com/pswp/dist/photoswipe.css'>
<link rel='stylesheet prefetch' href='https://photoswipe.s3.amazonaws.com/pswp/dist/default-skin/default-skin.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper">
  
   <!--  Hero Slider (i.e. homepage)  -->
  <strong>Homepage Slider</strong>
  <div class="hero-wrap loading">
    <ul class="hero-slider">
      <li>
        <a href="#"><img src="https://s3.amazonaws.com/f.cl.ly/items/1c3Y3d1L2a1f2S451T0r/lazy-default-1000x500.png" data-src-mobile="https://unsplash.it/800/600/?image=582" data-src-desktop="https://unsplash.it/1000/500/?image=582" data-lazy="" alt="" />
        </a>
      </li>
      <li>
        <a href="#"><img src="https://s3.amazonaws.com/f.cl.ly/items/1c3Y3d1L2a1f2S451T0r/lazy-default-1000x500.png" data-src-mobile="https://unsplash.it/800/600/?image=943" data-src-desktop="https://unsplash.it/1000/500/?image=943" data-lazy="" alt="" />
        </a>
      </li>
      <li>
        <a href="#"><img src="https://s3.amazonaws.com/f.cl.ly/items/1c3Y3d1L2a1f2S451T0r/lazy-default-1000x500.png" data-src-mobile="https://unsplash.it/800/600/?image=1020" data-src-desktop="https://unsplash.it/1000/500/?image=1020" data-lazy="" alt="" />
        </a>
      </li> 
      <li>
        <a href="#"><img src="https://s3.amazonaws.com/f.cl.ly/items/1c3Y3d1L2a1f2S451T0r/lazy-default-1000x500.png" data-src-mobile="https://unsplash.it/800/600/?image=718" data-src-desktop="https://unsplash.it/1000/500/?image=718" data-lazy="" alt="" />
        </a>
      </li>       
    </ul>
  </div>
  
  
  <!--  Items/Recommended Slider (i.e. recommended slider)  -->
  <strong>Recommended Slider</strong>
  <div class="items-wrap">
    <ul class="items-slider">
      <li>
        <a href="#">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://clifbarstore.staging.brandshop.com/imagesEdp/p169887.jpg" alt="" />
          <div class="is-bottom">
            <h3>Product Title</h3>
            <span class="is-price">$19.99</span>
            <span href="#" class="is-add-cart">Add to Cart</span>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://clifbarstore.staging.brandshop.com/imagesEdp/p169888.jpg" alt="" />
          <div class="is-bottom">
            <h3>Product Title</h3>
            <span class="is-price">$19.99</span>
            <span href="#" class="is-add-cart">Add to Cart</span>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://clifbarstore.staging.brandshop.com/imagesEdp/p169889.jpg" alt="" />
          <div class="is-bottom">
            <h3>Product Title</h3>
            <span class="is-price">$19.99</span>
            <span href="#" class="is-add-cart">Add to Cart</span>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://clifbarstore.staging.brandshop.com/imagesEdp/p169890.jpg" alt="" />
          <div class="is-bottom">
            <h3>Product Title</h3>
            <span class="is-price">$19.99</span>
            <span href="#" class="is-add-cart">Add to Cart</span>
          </div>
        </a>
      </li>      
      <li>
        <a href="#">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://clifbarstore.staging.brandshop.com/imagesEdp/p169891.jpg" alt="" />
          <div class="is-bottom">
            <h3>Product Title</h3>
            <span class="is-price">$19.99</span>
            <span href="#" class="is-add-cart">Add to Cart</span>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://clifbarstore.staging.brandshop.com/imagesEdp/p169892.jpg" alt="" />
          <div class="is-bottom">
            <h3>Product Title</h3>
            <span class="is-price">$19.99</span>
            <span href="#" class="is-add-cart">Add to Cart</span>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://clifbarstore.staging.brandshop.com/imagesEdp/p169893.jpg" alt="" />
          <div class="is-bottom">
            <h3>Product Title</h3>
            <span class="is-price">$19.99</span>
            <span href="#" class="is-add-cart">Add to Cart</span>
          </div>
        </a>
      </li> 
      <li>
        <a href="#">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://clifbarstore.staging.brandshop.com/imagesEdp/p169894.jpg" alt="" />
          <div class="is-bottom">
            <h3>Product Title</h3>
            <span class="is-price">$19.99</span>
            <span href="#" class="is-add-cart">Add to Cart</span>
          </div>
        </a>
      </li> 
      <li>
        <a href="#">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://clifbarstore.staging.brandshop.com/imagesEdp/p169895.jpg" alt="" />
          <div class="is-bottom">
            <h3>Product Title</h3>
            <span class="is-price">$19.99</span>
            <span href="#" class="is-add-cart">Add to Cart</span>
          </div>
        </a>
      </li>   
      <li>
        <a href="#">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://clifbarstore.staging.brandshop.com/imagesEdp/p169896.jpg" alt="" />
          <div class="is-bottom">
            <h3>Product Title</h3>
            <span class="is-price">$19.99</span>
            <span href="#" class="is-add-cart">Add to Cart</span>
          </div>
        </a>
      </li>  
      <li>
        <a href="#">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://clifbarstore.staging.brandshop.com/imagesEdp/p169897.jpg" alt="" />
          <div class="is-bottom">
            <h3>Product Title</h3>
            <span class="is-price">$19.99</span>
            <span href="#" class="is-add-cart">Add to Cart</span>
          </div>
        </a>
      </li>   
      <li>
        <a href="#">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://clifbarstore.staging.brandshop.com/imagesEdp/p169898.jpg" alt="" />
          <div class="is-bottom">
            <h3>Product Title</h3>
            <span class="is-price">$19.99</span>
            <span href="#" class="is-add-cart">Add to Cart</span>
          </div>
        </a>
      </li>        
    </ul>
  </div>
  
  <!-- Product Images & Alternates -->
  <strong>Product Slider & Zoom</strong>
  <div class="product-images">
    <!-- Begin Product Images Slider -->
    <div class="main-img-slider">
    <figure>
      <a href="http://images.hersheysstore.com/imagesEdp/p113221z.jpg" data-size="1400x1400">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://images.hersheysstore.com/imagesEdp/p113221b.jpg"  alt="" />
      </a>                                
    </figure>
    <figure>
      <a href="http://images.hersheysstore.com/imagesEdp/p113220z.jpg" data-size="1400x1400">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://images.hersheysstore.com/imagesEdp/p113220b.jpg"  alt="" />
      </a>                                
    </figure>
     <figure>
      <a href="http://images.hersheysstore.com/imagesEdp/p113159z.jpg" data-size="1400x1400">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://images.hersheysstore.com/imagesEdp/p113159b.jpg"  alt="" />
      </a>                                
    </figure>
    <figure>
      <a href="http://images.hersheysstore.com/imagesEdp/p113160z.jpg" data-size="1400x1400">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://images.hersheysstore.com/imagesEdp/p113160b.jpg"  alt="" />
      </a>                                
    </figure>
   <figure>
      <a href="http://images.hersheysstore.com/imagesEdp/p143710z.jpg" data-size="1400x1400">
          <img src="https://s3.amazonaws.com/f.cl.ly/items/0W1C1K0144451j3P2a43/lazy-default-500x500.png" data-lazy="http://images.hersheysstore.com/imagesEdp/p143710b.jpg"  alt="" />
      </a>                                
    </figure>     
  </div>
  <!-- End Product Images Slider -->

  <!-- Begin product thumb nav -->
  <ul class="thumb-nav">
      <li><img src="http://images.hersheysstore.com/imagesEdp/p113221th.jpg" /></li>
      <li><img src="http://images.hersheysstore.com/imagesEdp/p113220th.jpg" /></li>
       <li><img src="http://images.hersheysstore.com/imagesEdp/p113159th.jpg" /></li>
      <li><img src="http://images.hersheysstore.com/imagesEdp/p113160th.jpg" /></li>
      <li><img src="http://images.hersheysstore.com/imagesEdp/p143710th.jpg" /></li> 
  </ul>
  <!-- End product thumb nav -->
</div>
<!-- End Product Images & Alternates -->


<!-- Begin Product Image Zoom -->
<!--
This should live at bottom of page before closing body tag 
So that it renders on top of all page elements.
-->
  
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element, as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
        <div class="pswp__container">
            <!-- don't modify these 3 pswp__item elements, data is added later on -->
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

          </div>

        </div>
  </div>
<!--  End product zoom  -->
  
</div>
<!-- wrapper -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://photoswipe.s3-eu-west-1.amazonaws.com/pswp/dist/photoswipe-ui-default.min.js'></script>
<script src='https://photoswipe.s3-eu-west-1.amazonaws.com/pswp/dist/photoswipe.min.js'></script>
<script src='https://kenwheeler.github.io/slick/slick/slick.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jeffpannone/slider-and-product-functionality-KzYppj */
*,
*:before,
*:after {
  box-sizing: inherit;
}

.sr-text {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

.slick-slider .slick-slide img {
  display: block;
  width: 100%;
  max-width: 100%;
}
.slick-slider .slick-prev, .slick-slider .slick-next {
  z-index: 100;
  font-size: 2.5em;
  height: 40px;
  width: 40px;
  margin-top: -20px;
  color: #B7B7B7;
  position: absolute;
  top: 50%;
  text-align: center;
  color: #000;
  opacity: .4;
  transition: opacity .25s;
  cursor: pointer;
}
.slick-slider .slick-prev:hover, .slick-slider .slick-next:hover {
  opacity: .65;
}
.slick-slider .slick-prev.slick-disabled, .slick-slider .slick-next.slick-disabled {
  cursor: default;
  opacity: 0.1;
}
.slick-slider .slick-prev {
  left: 0;
}
.slick-slider .slick-next {
  right: 0;
}
.slick-slider .slick-dots {
  position: absolute;
  left: 0;
  bottom: -34px;
  width: 100%;
  text-align: center;
}
.slick-slider .slick-dots li {
  display: inline-block;
  margin: 0 4px;
}
.slick-slider .slick-dots li button {
  text-indent: -9999px;
  display: block;
  border: 2px solid #000;
  border-radius: 100px;
  width: 13px;
  height: 13px;
  padding: 0;
  background: transparent;
  cursor: pointer;
  opacity: .5;
  transition: background .25s, opacity .25s;
}
.slick-slider .slick-dots li button:focus {
  outline: none;
}
.slick-slider .slick-dots li button:before {
  display: none;
}
.slick-slider .slick-dots li.slick-active button {
  background-color: #000;
  opacity: 1;
}
@media only screen and (max-width: 41.688em) {
  .slick-slider .slick-prev, .slick-slider .slick-next {
    display: none !important;
  }
  .slick-slider .slick-dots li {
    margin: 0 2px;
  }
  .slick-slider .slick-dots li button {
    width: 8px;
    height: 8px;
    border-width: 1px;
  }
}

.wrapper {
  max-width: 1024px;
  width: 90%;
  margin: 0 auto;
  font-family: helvetica, arial, sans-serif !important;
  font-weight: 400;
}
.wrapper strong {
  font-weight: 400;
  color: #232323;
  letter-spacing: 2px;
  font-size: 1.2em;
  display: block;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  padding: 1.8em 0 1.5em;
}

@media only screen and (max-width: 64em) {
  .wrapper {
    width: 100%;
  }
}
.hero-wrap {
  border-bottom: 1px dotted #888;
  padding-bottom: 3.2em;
}

.hero-slider {
  width: 100%;
}
.hero-slider .slick-slide {
  background: #fff url(" https://cdn.jsdelivr.net/jquery.slick/1.5.9/ajax-loader.gif") no-repeat 50% 50%;
  background-size: 30px;
  transition: background-size .3s;
}
.hero-slider .slick-slide a {
  display: block;
}
.hero-slider .slick-prev {
  left: -50px;
}
.hero-slider .slick-next {
  right: -50px;
}
@media only screen and (max-width: 64em) {
  .hero-slider .slick-prev, .hero-slider .slick-next {
    color: #fff;
    opacity: .6;
  }
  .hero-slider .slick-prev:hover, .hero-slider .slick-next:hover {
    opacity: .95;
  }
  .hero-slider .slick-prev {
    left: 10px;
  }
  .hero-slider .slick-next {
    right: 10px;
  }
}
@media only screen and (max-width: 41.688em) {
  .hero-slider .slick-prev, .hero-slider .slick-next {
    display: none;
  }
}

.items-wrap {
  border-bottom: 1px dotted #888;
  padding-bottom: 5em;
}

.items-slider {
  max-width: 1024px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.items-slider .slick-track {
  display: inline-block;
}
.items-slider .slick-prev,
.items-slider .slick-next {
  margin-top: 0;
  top: 25%;
}
.items-slider .slick-slide {
  background: #fff url(" https://cdn.jsdelivr.net/jquery.slick/1.5.9/ajax-loader.gif") no-repeat 50% 31%;
  background-size: 30px;
  padding: 0 8px;
  display: inline-block;
  float: none;
}
.items-slider .slick-slide:focus, .items-slider .slick-slide:active {
  outline: none;
}
.items-slider .slick-slide a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.items-slider .slick-slide a:focus {
  outline: none;
  border: none;
}
.items-slider .slick-slide img {
  display: block;
  margin: 0 auto;
  max-width: 200px;
}
.items-slider .slick-slide .is-bottom {
  padding-top: 1em;
  font-weight: 700;
}
.items-slider .slick-slide .is-bottom span.is-price {
  display: block;
  padding: 10px 0;
}
.items-slider .slick-slide .is-bottom span.is-add-cart {
  display: block;
  font-size: .7em;
  width: 100px;
  padding: 10px 0 8px;
  margin: 0 auto;
  background: #ffc21d;
  color: #000;
  text-transform: uppercase;
}
.items-slider .slick-slide .is-bottom span.is-add-cart:hover {
  background: #ffd259;
}
.items-slider .slick-dots {
  bottom: -50px;
}
.items-slider .slick-prev {
  left: -50px;
}
.items-slider .slick-next {
  right: -50px;
}
@media only screen and (max-width: 64em) {
  .items-slider .slick-prev {
    left: -38px;
  }
  .items-slider .slick-next {
    right: -38px;
  }
}
@media only screen and (max-width: 41.688em) {
  .items-slider .slick-prev, .items-slider .slick-next {
    display: none;
  }
}

@media only screen and (max-width: 64em) {
  .items-slider {
    width: 90%;
  }
  .items-slider .slick-prev {
    left: -28px;
  }
  .items-slider .slick-next {
    right: -28px;
  }
}
@media only screen and (max-width: 30em) {
  .items-slider {
    width: 100%;
  }
  .items-slider .slick-prev, .items-slider .slick-next {
    display: none !important;
  }
  .items-slider .slick-slide {
    zoom: 1;
    background: none;
  }
  .items-slider .slick-slide:before, .items-slider .slick-slide:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }
  .items-slider .slick-slide:after {
    clear: both;
  }
  .items-slider .slick-slide img {
    float: left;
    width: 40%;
  }
  .items-slider .slick-slide .is-bottom {
    width: 55%;
    padding-left: 20px;
    float: left;
    text-align: left;
  }
  .items-slider .slick-slide .is-bottom span.is-add-cart {
    text-align: center;
    margin: 0;
  }
}
.product-images {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 2em 0;
}
.product-images li, .product-images figure, .product-images a, .product-images img {
  display: block;
  outline: none;
  border: none;
}
.product-images .main-img-slider figure {
  background: #fff url(" https://cdn.jsdelivr.net/jquery.slick/1.5.9/ajax-loader.gif") no-repeat 50% 50%;
  background-size: 30px;
  margin: 0 auto;
  padding: 0 2em;
}
.product-images .main-img-slider figure a {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}
.product-images .main-img-slider figure a img {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
@media only screen and (max-width: 41.688em) {
  .product-images .main-img-slider figure {
    padding: 0;
  }
  .product-images .main-img-slider .slick-prev, .product-images .main-img-slider .slick-next {
    display: none !important;
  }
}
.product-images .thumb-nav {
  margin: 0 auto;
  margin-top: 50px;
  max-width: 260px;
  padding: 0;
  text-align: center;
}
.product-images .thumb-nav.slick-slider .slick-track {
  display: inline-block;
}
.product-images .thumb-nav.slick-slider .slick-prev, .product-images .thumb-nav.slick-slider .slick-next {
  font-size: 1.2em;
  height: 20px;
  width: 26px;
  margin-top: -10px;
}
.product-images .thumb-nav.slick-slider .slick-prev {
  margin-left: -30px;
}
.product-images .thumb-nav.slick-slider .slick-next {
  margin-right: -30px;
}
.product-images .thumb-nav li {
  display: inline-block;
  margin: 0 auto;
  cursor: pointer;
  float: none;
}
.product-images .thumb-nav li img {
  display: block;
  width: 100%;
  max-width: 65px;
  margin: 0 auto;
  border: 2px solid transparent;
  -webkit-transition: border-color .25s;
  -ms-transition: border-color .25s;
  -moz-transition: border-color .25s;
  transition: border-color .25s;
}
.product-images .thumb-nav li:hover, .product-images .thumb-nav li:focus {
  border-color: #999;
}
.product-images .thumb-nav li.slick-current img {
  border-color: rgba(0, 0, 0, 0.75);
}

.pswp__bg {
  background: #fff;
}

.pswp__top-bar {
  background-color: transparent !important;
}

.pswp__button,
.pswp__button:before,
.pswp__button--close:before,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  background: none !important;
  background-size: 100%;
  width: 44px;
  height: 44px;
  font-family: 'icomoon';
}

.pswp__button {
  color: #000 !important;
  opacity: 0.4 !important;
  transition: opacity .25s;
}
.pswp__button:hover {
  opacity: 0.65 !important;
}
.pswp__button:before {
  opacity: 1 !important;
}
.pswp__button.pswp__button--arrow--left:before, .pswp__button.pswp__button--arrow--right:before {
  font-size: 44px;
}
.pswp__button.pswp__button--arrow--left:before {
  content: "\e93b";
}
.pswp__button.pswp__button--arrow--right:before {
  content: "\e93c";
}
.pswp__button.pswp__button--close {
  top: 10px;
  right: 20px;
}
.pswp__button.pswp__button--close:before {
  content: "\e92a";
  font-size: 44px;
}
.pswp__button.pswp__button--close:hover {
  color: red;
}
@media only screen and (max-width: 41.688em) {
  .pswp__button.pswp__button--arrow--left, .pswp__button.pswp__button--arrow--right {
    display: none !important;
  }
}


/*Downloaded from https://www.codeseek.co/jeffpannone/slider-and-product-functionality-KzYppj */
// Hero Slider (i.e. homepage)
// Desktop and mobile images stored in data-attributes
// JS determines window width on page load
// and pushes the approriate image to data-lazy attribute
// Slick is initialized thereafter
$( document ).ready(function() {  
  var windowWidth = $(window).width();
  // initialize slick after image data is updated
  updateImgData(windowWidth).done(initSlick);  
});

function updateImgData(windowWidth){
  var defer = $.Deferred();
  // console.log(windowWidth);
  
  $('.hero-slider img').each(function (index, value) { 
    var imgSrcDesktop = $(this).data('src-desktop');
    var imgSrcMobile = $(this).data('src-mobile');
  if (windowWidth >= 630){
    $(this)
      .attr('src', 'https://s3.amazonaws.com/f.cl.ly/items/1c3Y3d1L2a1f2S451T0r/lazy-default-1000x500.png')
      .attr('data-lazy', imgSrcDesktop)
  } else{
    $(this)
      .attr('src', 'https://s3.amazonaws.com/f.cl.ly/items/3i2V0a3a2j18302b463h/lazy-default-800x600.png')
      .attr('data-lazy', imgSrcMobile);
  }      
  defer.resolve();
  });
  return defer;
}  

function initSlick(){
  $('.hero-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    infinite: true,
    arrows: true,
    autoplay: false,
    autoplaySpeed: 5500,
    speed:Modernizr.touch? 200 : 650,
    dots:true,    
    fade:  Modernizr.touch? false : true,
    lazyLoad: 'ondemand',
    prevArrow: '<div class="slick-prev"><i class="i-chev-left-thin"></i><span class="sr-text">Previous</span></div>',
    nextArrow: '<div class="slick-next"><i class="i-chev-right-thin"></i><span class="sr-text">Next</span></div>'
  });
}
//Items slider (i.e. recommended products)
 $('.items-slider').slick({
    slidesToShow: 4,
    slidesToScroll: 4,
    infinite: false,
    arrows: true,
    speed:300,
    dots:true,    
    // fade:  Modernizr.touch? false : true,
    lazyLoad: 'ondemand',
    prevArrow: '<div class="slick-prev"><i class="i-chev-left-thin"></i><span class="sr-text">Previous</span></div>',
    nextArrow: '<div class="slick-next"><i class="i-chev-right-thin"></i><span class="sr-text">Next</span></div>',
  responsive: [
    {
      breakpoint: 930,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
      }
    },
    {
      breakpoint: 590,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1      
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]   
  });

// Main/Product image slider for product page
$('.main-img-slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: true,
  arrows: true,
  fade:  Modernizr.touch? false : true,
  speed: 300,
  lazyLoad: 'ondemand',
  asNavFor: '.thumb-nav',
  prevArrow: '<div class="slick-prev"><i class="i-chev-left-thin"></i><span class="sr-text">Previous</span></div>',
  nextArrow: '<div class="slick-next"><i class="i-chev-right-thin"></i><span class="sr-text">Next</span></div>'
});
// Thumbnail/alternates slider for product page
$('.thumb-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 3,
  infinite: true,
  centerPadding: '0px',
  asNavFor: '.main-img-slider',
  dots: false,
  centerMode: true,
  draggable: false,
  speed:200,
  focusOnSelect: true,
  prevArrow: '<div class="slick-prev"><i class="i-chev-left-thin"></i><span class="sr-text">Previous</span></div>',
  nextArrow: '<div class="slick-next"><i class="i-chev-right-thin"></i><span class="sr-text">Next</span></div>'  
});

//keeps thumbnails active when changing main image, via mouse/touch drag/swipe
$('.main-img-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
  //remove all active class
  $('.thumb-nav .slick-slide').removeClass('slick-current');
  //set active class for current slide
  $('.thumb-nav .slick-slide:not(.slick-cloned)').eq(currentSlide).addClass('slick-current');  
});

//Photoswipe configuration for product page zoom
var initPhotoSwipeFromDOM = function(gallerySelector) {

    // parse slide data (url, title, size ...) from DOM elements 
    // (children of gallerySelector)
    var parseThumbnailElements = function(el) {
        var thumbElements = el.childNodes,
            numNodes = thumbElements.length,
            items = [],
            figureEl,
            linkEl,
            size,
            item;

        for(var i = 0; i < numNodes; i++) {

            figureEl = thumbElements[i]; // <figure> element

            // include only element nodes 
            if(figureEl.nodeType !== 1) {
                continue;
            }

            linkEl = figureEl.children[0]; // <a> element

            size = linkEl.getAttribute('data-size').split('x');

            // create slide object
            item = {
                src: linkEl.getAttribute('href'),
                w: parseInt(size[0], 10),
                h: parseInt(size[1], 10)
            };



            if(figureEl.children.length > 1) {
                // <figcaption> content
                item.title = figureEl.children[1].innerHTML; 
            }

            if(linkEl.children.length > 0) {
                // <img> thumbnail element, retrieving thumbnail url
                item.msrc = linkEl.children[0].getAttribute('src');
            } 

            item.el = figureEl; // save link to element for getThumbBoundsFn
            items.push(item);
        }

        return items;
    };

    // find nearest parent element
    var closest = function closest(el, fn) {
        return el && ( fn(el) ? el : closest(el.parentNode, fn) );
    };

    // triggers when user clicks on thumbnail
    var onThumbnailsClick = function(e) {
        e = e || window.event;
        e.preventDefault ? e.preventDefault() : e.returnValue = false;

        var eTarget = e.target || e.srcElement;

        // find root element of slide
        var clickedListItem = closest(eTarget, function(el) {
            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
        });

        if(!clickedListItem) {
            return;
        }

        // find index of clicked item by looping through all child nodes
        // alternatively, you may define index via data- attribute
        var clickedGallery = clickedListItem.parentNode,
            childNodes = clickedListItem.parentNode.childNodes,
            numChildNodes = childNodes.length,
            nodeIndex = 0,
            index;

        for (var i = 0; i < numChildNodes; i++) {
            if(childNodes[i].nodeType !== 1) { 
                continue; 
            }

            if(childNodes[i] === clickedListItem) {
                index = nodeIndex;
                break;
            }
            nodeIndex++;
        }



        if(index >= 0) {
            // open PhotoSwipe if valid index found
            openPhotoSwipe( index, clickedGallery );
        }
        return false;
    };

    // parse picture index and gallery index from URL (#&pid=1&gid=2)
    var photoswipeParseHash = function() {
        var hash = window.location.hash.substring(1),
        params = {};

        if(hash.length < 5) {
            return params;
        }

        var vars = hash.split('&');
        for (var i = 0; i < vars.length; i++) {
            if(!vars[i]) {
                continue;
            }
            var pair = vars[i].split('=');  
            if(pair.length < 2) {
                continue;
            }           
            params[pair[0]] = pair[1];
        }

        if(params.gid) {
            params.gid = parseInt(params.gid, 10);
        }

        return params;
    };

    var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
        var pswpElement = document.querySelectorAll('.pswp')[0],
            gallery,
            options,
            items;

        items = parseThumbnailElements(galleryElement);

        // define options (if needed)
        options = {
//             loop:false,
            // define gallery index (for URL)

            // barsSize : {top:140,bottom:0},
            captionEl : false,
            fullscreenEl : false,
            shareEl : false,
            bgOpacity : 1,
            tapToClose : true,
            tapToToggleControls : false,
            closeOnScroll: false,
            history:false,
            closeOnVerticalDrag:false,
            captionEl: false,
            fullscreenEl: false,
            zoomEl: false,
            shareEl: false,
            counterEl: false,
            arrowEl: true,          
            galleryUID: galleryElement.getAttribute('data-pswp-uid'),

            getThumbBoundsFn: function(index) {
                // See Options -> getThumbBoundsFn section of documentation for more info
                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                    rect = thumbnail.getBoundingClientRect(); 

                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
            }

        };

        // PhotoSwipe opened from URL
        if(fromURL) {
            if(options.galleryPIDs) {
                // parse real index when custom PIDs are used 
                // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
                for(var j = 0; j < items.length; j++) {
                    if(items[j].pid == index) {
                        options.index = j;
                        break;
                    }
                }
            } else {
                // in URL indexes start from 1
                options.index = parseInt(index, 10) - 1;
            }
        } else {
            options.index = parseInt(index, 10);
        }

        // exit if index not found
        if( isNaN(options.index) ) {
            return;
        }

        if(disableAnimation) {
            options.showAnimationDuration = 0;
        }

        // Pass data to PhotoSwipe and initialize it
        gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
        gallery.init();
        var psIndex = gallery.getCurrentIndex();
        var psIndexSlick = psIndex;
        // console.log(psIndexSlick);
         gallery.listen('afterChange', function() { 
          var psIndex = gallery.getCurrentIndex();
          var psIndexSlick = psIndex;
          console.log('afterChange: ' + psIndexSlick);
          $(".main-img-slider").slick( "slickGoTo", psIndexSlick); 
        });
    };
 

      var options = {
      loop: false
    };
    // loop through all gallery elements and bind events
    var galleryElements = document.querySelectorAll( gallerySelector );

    for(var i = 0, l = galleryElements.length; i < l; i++) {
        galleryElements[i].setAttribute('data-pswp-uid', i+1);
        galleryElements[i].onclick = onThumbnailsClick;
    }

    // Parse URL and open gallery if it contains #&pid=3&gid=1
    var hashData = photoswipeParseHash();
    if(hashData.pid && hashData.gid) {
        openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );
    }
};

// execute above function
initPhotoSwipeFromDOM('.product-images');

Comments