EasyZoom and Slick jQuery

https://stackoverflow.com/q/64470545

by joshmoto

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/easyzoom.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/easyzoom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<style>
.mobile-nav { z-index: 9999; position: fixed; left: 10px; top: 60px; width: 20px; }
.menu-btn span { display: block; width: 20px; height: 3px; margin: 4px 0; background: #000; z-index: 99; }
.btn1, .btn2, .btn3 { cursor:pointer; width: 25px;  height: 3px;  background-color: #333;  margin: 6px 0;  transition: 0.4s;}
.change .btn1 {  -webkit-transform: rotate(-45deg) translate(-9px, 6px);  transform: rotate(-55deg) translate(-9px, 2px);}
.change .btn2 {opacity: 0;}
.change .btn3 {  -webkit-transform: rotate(45deg) translate(-8px, -8px);  transform: rotate(55deg) translate(-8px, -4px);}
.responsive-menu { box-shadow: 2px 2px; max-height: 0; background-color: #fff; width: 200px; overflow: hidden; transition: all .25s; position: absolute; right: -220px; text-align: left; top: 10px;}
.responsive-menu ul { padding: 20px 0 0 20px; list-style: none; }
.responsive-menu ul li { padding-bottom: 10px; }
.responsive-menu a { text-decoration: none; color: #000;}
.expand {max-height: none; }
</style>

<script>

</script>

<div class="mobile-nav">
            <div class="menu-btn" id="menu-btn" onclick="myFunction(this)">
                <div class="btn1"></div>
  <div class="btn2"></div>
  <div class="btn3"></div>
            </div>
         
             <div class="responsive-menu">
                <ul>
                  <li><a href="index.php"> <i class="glyphicon glyphicon-home"></i> HOME </a></li>
                </ul>
             </div>
        </div>

CSS

BODY {
  margin: 0;
  padding: 20px;
}

/* The minor fix I added to get demo working */

.ez-slider .easyzoom .easyzoom-flyout {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Slide demo css not needed */

.ez-slider {
  max-width: 400px;
  margin: 0 auto 20px auto !important;
}

.ez-slider FIGURE {
  margin: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.ez-slider FIGURE > A {
  height: auto;
  display: block;
  width: 100%;
}

.ez-slider FIGURE > A > IMG {
  height: auto;
  width: 100%;
  display: block;
}

.ez-slider .slick-dots {
  margin: 10px -5px 0 -5px;
  position: relative;
  bottom: 0;
  width: auto;
  display: block;
  
}

.ez-slider .slick-dots LI {
  width: calc(20% - 10px);
  height: auto;
  margin: 0 0 10px 0;
  padding: 0 5px 0 5px;
  display: inline-block;
}

.ez-slider .slick-dots LI.slick-active BUTTON,
.ez-slider .slick-dots LI:hover BUTTON {
  opacity: 1;
}

.ez-slider .slick-dots LI BUTTON {
  overflow: hidden;
  position: relative;
  height: auto;
  padding: 0;
  transition: all .5s ease;
  width: 100%;
  opacity: .8;
}

.ez-slider .slick-dots LI BUTTON IMG {
  display: block;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.ez-slider .slick-dots LI BUTTON:before {
  display: block;
  position: relative;
  content: '';
  width: 100%;
  padding-top: 100%;
  height: auto;
}

JavaScript

jQuery(function($){

  $( '.menu-btn' ).click(function(){
    $('.responsive-menu').toggleClass('expand');
  });

  $(document).on("click", function(e){
    if( 
      $(e.target).closest(".responsive-menu").length == 0 &&
      $(".responsive-menu").hasClass("expand") &&
      $(e.target).closest(".menu-btn").length == 0
    ){
      $('.responsive-menu').toggleClass('expand');
    }
  });
});
function myFunction(x) {
  x.classList.toggle("change");
}