标签: splidejs

我正在使用Splide js实现轮播滑块。当我将浏览器大小调整为 767 时，响应断点设置不起作用。它仅在包括平板电脑和移动设备在内的所有屏幕上显示 1024 的断点设置。

这是我的代码：

<script>
    document.addEventListener("DOMContentLoaded", function () {
        new Splide("#card-slider", {
          type: "loop",
          heightRatio: 0.5,
          perPage: 5,
          breakpoints: {
            640: {
              perPage: 1,
        
            },
            767: {
              perPage: 2,
          
            },
            1024: {
              perPage: 3,
             
            },
          },
          focus: "center",
          gap: '2em',
          updateOnMove : true,
          pagination: false,
        }).mount();
      });
</script>

我在这里错过了什么吗？是否有解决方法可以使其在所有断点上都起作用？提前致谢！

状态：splidejs组件有24张幻灯片，只有3张幻灯片向用户显示，焦点：'center'

问题：用户拖动幻灯片后，（所选幻灯片的）属性索引仍然指示旧的不可见幻灯片。

问题：拖动后如何更改可见幻灯片（中心）的选定索引？

任何帮助将是适当的。

我按照本指南创建缩略图轮播，但由于某种原因我收到错误。

在指南中，他们没有说如何创建#main-carousel，所以我尝试了几种不同的方法，但仍然无法使其工作

[splide] A track/list element is missing

有什么想法如何解决这个问题或者为什么会发生这种情况？

这是我的代码：

    <section id="main-carousel"></section>
    <section id="thumbnail-carousel" class="splide">
      <div class="splide__track">
            <ul class="splide__list">
                <li class="splide__slide"><img src="img1.jpeg" alt=""></li>
                <li class="splide__slide"><img src="img2.jpeg" alt=""></li>
                <li class="splide__slide"><img src="img3.jpeg" alt=""></li>
          <li class="splide__slide"><img src="img4.jpeg" alt=""></li>
            </ul>
      </div>
    </section>

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/css/splide.min.css">


    document.addEventListener( 'DOMContentLoaded', function () {
    var thumbnails =  new Splide( '#thumbnail-carousel', {
        fixedWidth  : 100,
        fixedHeight : 60,
        gap         : 10,
        rewind      : true,
        pagination  : false,
        isNavigation: true,
        breakpoints : {
          600: {
            fixedWidth …

我正在构建这个带有幻灯片的引导页面（移动视图）。对于设计来说，将箭头放在幻灯片本身之外比尝试将箭头移动到位要容易得多。\n但是由于箭头位于幻灯片之外，那么它们就不起作用 - 并且我不确定需要触发什么事件才能使其滑动。

\n
• 注意 - 虽然该网站主要是 bootstrap 5，但它也有一些顺风类，例如 padding\\margins（您可能会在代码中注意到这一点）
\n

页面如下所示；\n

<!--  Mobile Display start -->\n            <div class="row d-md-none">\n                <div class="col-12 bg-white">\n                    <div class="row">\n                        <div class="col-6">\n                            <img class="" style="width:75%;" src="Assets/CEDA-Dots_1.png" alt="ceda_dots">\n                        </div>\n                        <div class="col-6">\n                            <img class="-mt-4 mx-auto" style="height:75%;" src="Assets/Qotes.png" alt="quotes">\n                        </div>\n                        <div class="col-10 pl-4 pb-2 -mt-8">\n                            <p class="text-2xl font-medium pl-5">CEDA Learning - delivering value for organisations and individuals</p>\n                        </div>\n                        <div class="col-3 ml-4" style="position:relative; height: 25px;">\n                            <div class="splide__arrows">\n                                <button class="splide__arrow splide__arrow--prev" style="background-color:#ffffff;" type="button" aria-controls="mobile-testim-carousel-track" aria-label="Go to last …