Question

我正在使用光滑的滑块，但我想使其具有响应性，但我无法这样做。

我尝试通过两种方法完成任务，这些方法是我在互联网上找到的，但对我不起作用这是我的代码，这是我发现的一种方法

@Query(value="SELECT prt FROM 
ProjectReportTask prt 
WHERE prt.projects.id = ?1 AND prt.reports.id = ?2 ")
List<ProjectReportTask> getProjectReportTask(Long id, Long id2);

那是使用大小调整功能的另一种方式

 $(document).ready(function(){
 if(window.width() <= 320)
 {
     $('.slick').slick({
      slidesToShow: 2,
      slidesToScroll: 1,
  });
 }

 else if(window.width() <= 480)
 {
     $('.slick').slick({
      slidesToShow: 2,
      slidesToScroll: 1,
  });
 }

 else if(window.width() <= 542)
 {
     $('.slick').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
  });
 }

 else if(window.width() <= 768)
 {
     $('.slick').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
  });
 }

 else{
     $('.slick').slick({
      slidesToShow: 5,
      slidesToScroll: 1,
  });
 }

});

我想要的是滑块在大屏幕上显示5个帖子，在中型屏幕上显示4个帖子，在小屏幕上显示3个帖子，在超小屏幕上显示2个帖子，请在错误的地方或如果有其他更好的方法帮我，会非常感谢你的。

Answer 1

看看这个片段。主要的两个问题是您使用window.width()而不是$(window).width()，并且需要先“取消滑动”滑块，然后才能“重新滑动”它。

请注意，在“取消滑动”滑块之前，需要先“滑动”它。这就是为什么我使用$(document).ready()为它提供默认值slick()，然后我叫$(window).resize();使其“滑动”到正确的比例

$(document).ready(() => {
  $('div.slick').slick();
  $(window).resize();
});


$(window).resize(function(e){
  if($(window).width() <= 320)
  {
    $('div.slick').slick('unslick');
    $('div.slick').slick({
      slidesToShow: 2,
      slidesToScroll: 1,
    });
  }

  else if($(window).width() <= 480)
  {
    $('div.slick').slick('unslick');
    $('.slick').slick({
      slidesToShow: 2,
      slidesToScroll: 1,
    });
  }

  else if($(window).width() <= 542)
  {
    $('div.slick').slick('unslick');
    $('.slick').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
    });
  }

  else if($(window).width() <= 768)
  {
    $('div.slick').slick('unslick');
    $('.slick').slick({
      slidesToShow: 4,
      slidesToScroll: 1,
    });
  }

  else{
    $('div.slick').slick('unslick');
    $('.slick').slick({
      slidesToShow: 5,
      slidesToScroll: 1,
    });
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<div class="slick">
  <div>your content1</div>
  <div>your content2</div>
  <div>your content3</div>
  <div>your content4</div>
  <div>your content5</div>
  <div>your content6</div>
  <div>your content7</div>
  <div>your content8</div>
  <div>your content9</div>
</div>

根据屏幕大小更改jQuery

1 个答案: