title: Slick slider and hamburger menu conflict
body: <p>I'm attempting to achieve a carousel effect on a page utilizing a hamburger menu for a responsive design project, but cannot get them to play nice together. If I set up separate pages for each, they work flawlessly, but in combination, one or the other will work, but not both. I've been searching for and trying various solutions, but to no avail. I suspect the issue is related to jQuery/js .</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="./slick/slick.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
    $('.your-class').slick({
      setting-name: setting-value
    });
  });
  
  $('.responsive').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  }); 
  
  $(window).scroll(function() {
  
      if ($(window).scrollTop() &gt; 100) {
          $('.main_h').addClass('sticky');
      } else {
          $('.main_h').removeClass('sticky');
      }
  });
  
  // Mobile Navigation
  $('.mobile-toggle').click(function() {
      if ($('.main_h').hasClass('open-nav')) {
          $('.main_h').removeClass('open-nav');
      } else {
          $('.main_h').addClass('open-nav');
      }
  });
  
  $('.main_h li a').click(function() {
      if ($('.main_h').hasClass('open-nav')) {
          $('.navigation').removeClass('open-nav');
          $('.main_h').removeClass('open-nav');
      }
  });
  
  // navigation scroll lijepo radi materem
  $('nav a').click(function(event) {
      var id = $(this).attr("href");
      var offset = 70;
      var target = $(id).offset().top - offset;
      $('html, body').animate({
          scrollTop: target
      }, 500);
      event.preventDefault();
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The above code works for my menu but not the slider. Whereas, when rearranged, the following allows the slider to work, but not the menu:</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="./slick/slick.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    $(window).scroll(function() {
      if ($(window).scrollTop() &gt; 100) {
          $('.main_h').addClass('sticky');
      } else {
          $('.main_h').removeClass('sticky');
      }
  });
  
  // Mobile Navigation
  $('.mobile-toggle').click(function() {
      if ($('.main_h').hasClass('open-nav')) {
          $('.main_h').removeClass('open-nav');
      } else {
          $('.main_h').addClass('open-nav');
      }
  });
  
  $('.main_h li a').click(function() {
      if ($('.main_h').hasClass('open-nav')) {
          $('.navigation').removeClass('open-nav');
          $('.main_h').removeClass('open-nav');
      }
  });
  
  // navigation scroll lijepo radi materem
  $('nav a').click(function(event) {
      var id = $(this).attr("href");
      var offset = 70;
      var target = $(id).offset().top - offset;
      $('html, body').animate({
          scrollTop: target
      }, 500);
      event.preventDefault();
  });
  
      $(document).on('ready', function() {
        $(".regular").slick({
          dots: true,
          infinite: true,
          slidesToShow: 3,
          slidesToScroll: 3
        });
        $(".center").slick({
          dots: true,
          infinite: true,
          centerMode: true,
          slidesToShow: 5,
          slidesToScroll: 3
        });
        $(".variable").slick({
          dots: true,
          infinite: true,
          variableWidth: true
        });
        $('.responsive').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 4,
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 3,
              infinite: true,
              dots: true
            }
          },
          {
            breakpoint: 600,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
      }
    ]
  });
      });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I've tried using different sliders including one which was strictly CSS without any success. Is it possible to resolve this conflict and use these features together? I am at a loss.</p>
  
  <p>12/30 edit
  @Matt Oestreich
  Still trying to figure this out. I tried updating jQuery and adding "no conflict" still without resolving the issue:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;  
  &lt;script type="text/javascript" src="slick/slick.min.js"&gt;&lt;/script&gt;
  &lt;script src="./slick/slick.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $.noConflict();
  jQuery(document).ready(function($){
        $(".responsive").slick({
  </code></pre>
  
  <p>What am I missing? </p>