Fatal编程技术网
  • javascript/
  • Javascript 光滑滑块和汉堡包菜单冲突

Javascript 光滑滑块和汉堡包菜单冲突

javascript jquery css

Javascript 光滑滑块和汉堡包菜单冲突,javascript,jquery,css,slider,hamburger-menu,Javascript,Jquery,Css,Slider,Hamburger Menu,我试图在一个页面上实现旋转木马效果，利用汉堡包菜单进行响应性设计项目，但无法让它们一起玩得很好。如果我为每个页面设置单独的页面，它们会完美地工作，但在组合中，一个或另一个会工作，但不是两个都工作。我一直在寻找和尝试各种解决方案，但都没有用。我怀疑这个问题与jQuery/js有关 <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <scr

我试图在一个页面上实现旋转木马效果，利用汉堡包菜单进行响应性设计项目，但无法让它们一起玩得很好。如果我为每个页面设置单独的页面，它们会完美地工作，但在组合中，一个或另一个会工作，但不是两个都工作。我一直在寻找和尝试各种解决方案，但都没有用。我怀疑这个问题与jQuery/js有关

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(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() > 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();
});
</script>
</body>
</html>


$（文档）.ready（函数（）{
$（'你的班级'）。很滑({
设置名称：设置值
});
});
$（'.responsive'）。光滑({
点：是的，
无限：错，
速度:300,，
幻灯片放映：4，
幻灯片滚动：4，
响应：[
{
断点：1024，
设置：{
幻灯片放映：3，
幻灯片滚动：3，
无限：是的，
圆点：对
}
},
{
断点：600，
设置：{
幻灯片放映：2，
幻灯片滚动：2
}
},
{
断点：480，
设置：{
幻灯片放映：1，
幻灯片滚动：1
}
}
]
}); 
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>100）{
$（'.main_h'）.addClass（'sticky'）；
}否则{
$（'.main_h'）.removeClass（'sticky'）；
}
});
//移动导航
$（'.mobile toggle'）。单击（函数（）{
if（$（'.main_h'）.hasClass（'open-nav'））{
$（'.main_h'）.removeClass（'open-nav'）；
}否则{
$（'.main_h'）.addClass（'open-nav'）；
}
});
$（'.main_h li a'）。单击（函数（）{
if（$（'.main_h'）.hasClass（'open-nav'））{
$（'.navigation'）.removeClass（'open-nav'）；
$（'.main_h'）.removeClass（'open-nav'）；
}
});
//导航滚动lijepo radi Mateem
$（'nav a'）。单击（函数（事件）{
var id=$（this.attr（“href”）；
var偏移=70；
var target=$（id）.offset（）.top-offset；
$（'html，body'）。设置动画({
滚动顶：目标
}, 500);
event.preventDefault（）；
});
以上代码适用于我的菜单，但不适用于滑块。然而，当重新排列时，以下选项允许滑块工作，但不允许菜单工作：

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(window).scroll(function() {
    if ($(window).scrollTop() > 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
          }
    }
  ]
});
    });
</script>

</body>
</html>


$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>100）{
$（'.main_h'）.addClass（'sticky'）；
}否则{
$（'.main_h'）.removeClass（'sticky'）；
}
});
//移动导航
$（'.mobile toggle'）。单击（函数（）{
if（$（'.main_h'）.hasClass（'open-nav'））{
$（'.main_h'）.removeClass（'open-nav'）；
}否则{
$（'.main_h'）.addClass（'open-nav'）；
}
});
$（'.main_h li a'）。单击（函数（）{
if（$（'.main_h'）.hasClass（'open-nav'））{
$（'.navigation'）.removeClass（'open-nav'）；
$（'.main_h'）.removeClass（'open-nav'）；
}
});
//导航滚动lijepo radi Mateem
$（'nav a'）。单击（函数（事件）{
var id=$（this.attr（“href”）；
var偏移=70；
var target=$（id）.offset（）.top-offset；
$（'html，body'）。设置动画({
滚动顶：目标
}, 500);
event.preventDefault（）；
});
$（文档）.on（'ready'，function（）{
美元（“.regular”）。光滑({
点：是的，
无限：是的，
幻灯片放映：3，
幻灯片滚动：3
});
$（“.center”）.slick({
点：是的，
无限：是的，
centerMode：对，
幻灯片放映：5，
幻灯片滚动：3
});
$（“.variable”）.slick({
点：是的，
无限：是的，
可变宽度：true
});
$（'.responsive'）。光滑({
点：是的，
无限：是的，
速度:300,，
幻灯片放映：4，
幻灯片滚动：4，
响应：[
{
断点：1024，
设置：{
幻灯片放映：3，
幻灯片滚动：3，
无限：是的，
圆点：对
}
},
{
断点：600，
设置：{
幻灯片放映：2，
幻灯片滚动：2
}
},
{
断点：480，
设置：{
幻灯片放映：1，
幻灯片滚动：1
}
}
]
});
});
我尝试过使用不同的滑块，包括一个严格使用CSS的滑块，但没有成功。是否可以解决此冲突并同时使用这些功能？我不知所措

12/30编辑 @马特·欧斯特里希 我还在想办法。我尝试更新jQuery并添加“无冲突”，但仍然没有解决问题：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  
<script type="text/javascript" src="slick/slick.min.js"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
      $(".responsive").slick({


$.noConflict（）；
jQuery（文档）.ready（函数（$）{
$（“.responsive”）.slick({
我遗漏了什么？

代码太多了……我认为最好的办法是继续创建一个堆栈片段，显示您遇到的问题。这样，与阅读大量代码相比，人们更容易看到您的问题（更不用说增加了获得答案的几率）…谢谢，马特。我集中精力解决了这个问题。很高兴你解决了这个问题。你介意在这里发布你的答案吗？这样可以帮助其他与你有相同问题的人吗？还没有解决。我接受了你的建议，将代码编辑到我认为导致菜单和滑块之间冲突的部分…“集中精力”.这就是你所说的“堆栈片段”吗？