如何使用 Slick Slider 修复幻灯片位置

Question

我正在尝试基于 Slick Slider 插件 (http://kenwheeler.github.io/slick/) 制作一个滑块

重点是我必须在点击时固定幻灯片的位置。例如，如果我单击幻灯片 3，它将被卡在其位置上，并且每隔一张幻灯片将按顺序通过它。

例如：如果单击幻灯片 3，它会变成黄色，它位于第三个位置。我们单击“下一步”，第三张幻灯片保持不动，但所有其他幻灯片都移动了一个位置，即可见的数字顺序：2 4 3 5 6... 因此，它始终“原地不动”，无论滑块分页。再次单击即可移除固定，幻灯片保持在同一位置并与每个人一起移动。

当幻灯片改变位置时，我只有解决方案，但我必须执行上述逻辑。这是我现在拥有的代码：https://jsfiddle.net/tomavl/4mgLrs5t/10/

<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
  <div class="slide">6</div>
  <div class="slide">7</div>
  <div class="slide">8</div>
  <div class="slide">9</div>
</div>

body {
  background: #FFF;
  padding: 20px;
  font-family: Helvetica;
}

.slider {
  color: #333;
  padding: 0 0 30px;
}

.slide {
  font-size: 90px;
  width: 150px;
  padding: 10px 0;
  margin: 0;
  text-align: center;
  border: 1px solid #999;
}
.slide.locked { 
  background: rgba(255,255,0,0.5); 
}

.slick-prev, .slick-next {
  position: absolute;
  bottom:0;
}
.slick-next { left:80px; }

let currentFocus, nextFocus, prevFocus;

$(document).ready(function(){

  $('.slider').slick({
    dots: false,
    infinite: false,
    speed: 300,
    slidesToShow: 5,
    slidesToScroll: 1,
     responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        }
      }
    ]
  });

    function setForFocus() {
      nextFocus = currentFocus.next();
    prevFocus = currentFocus.prev();
    if (prevFocus.length == 0)
            prevFocus = null; 
    if (nextFocus.length == 0)
            nextFocus = null; 
  }

  $('.slide').on('click', function() {   
    if ($(this).hasClass('locked')) {
        $(this).toggleClass('locked');
        currentFocus = nextFocus = prevFocus = null;
    } else {
        if (typeof currentFocus !== "undefined" &&
        currentFocus !== null)
            currentFocus.toggleClass('locked');
        $(this).toggleClass('locked');
        currentFocus = $(this);
        setForFocus();      
    }
    
  });

    $('.slick-next').on('click', function() {
    if (typeof currentFocus !== "undefined" &&
        currentFocus !== null && 
      typeof nextFocus !== "undefined" &&   
      nextFocus !== null) {
          let next_text = Number(nextFocus.text());
          let cur_text = Number(currentFocus.text());
              currentFocus.text(next_text);
          nextFocus.text(cur_text);
          currentFocus.toggleClass('locked');
          nextFocus.toggleClass('locked');
          currentFocus = nextFocus;
          setForFocus();  
      }
  });

    $('.slick-prev').on('click', function() {
    if (typeof currentFocus !== "undefined" &&
        currentFocus !== null && 
      typeof prevFocus !== "undefined" &&   
      prevFocus !== null) {
          let prev_text = Number(prevFocus.text());
          let cur_text = Number(currentFocus.text());
              currentFocus.text(prev_text);
          prevFocus.text(cur_text);
          currentFocus.toggleClass('locked');
          prevFocus.toggleClass('locked');
          currentFocus = prevFocus;
          setForFocus();  
      }
  });
});

Answer 1

你可以这样试试：

let currentFocus;

$(document).ready(function () {

    $('.slider').slick({
        dots: false,
        infinite: false,
        speed: 300,
        slidesToShow: 5,
        slidesToScroll: 1,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                }
            }
        ]
    });

    $('.slide').on('click', function () {
        $(this).toggleClass('locked');
        $('.slide').not(this).removeClass('locked')
        currentFocus = $(this);
    });

    $('.slick-next').on('click', function () {
        let next = $(currentFocus).next()
        if (next.length > 0) {
            $('.slide').removeClass('locked')
            next.toggleClass('locked')
            currentFocus = next
        }

    });

    $('.slick-prev').on('click', function () {
        let prev = $(currentFocus).prev()
        if (prev.length > 0) {
            $('.slide').removeClass('locked')
            prev.toggleClass('locked')
            currentFocus = prev
        }
    });
});

body {
        background: #FFF;
        padding: 20px;
        font-family: Helvetica;
    }

    .slider {
        color: #333;
        padding: 0 0 30px;
    }

    .slide {
        font-size: 90px;
        width: 150px;
        padding: 10px 0;
        margin: 0;
        text-align: center;
        border: 1px solid #999;
    }

    .slide.locked {
        background: rgba(255, 255, 0, 0.5);
    }

    .slick-prev, .slick-next {
        position: absolute;
        bottom: 0;
    }

    .slick-next {
        left: 80px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>

<div class="slider">
    <div class="slide">1</div>
    <div class="slide">2</div>
    <div class="slide">3</div>
    <div class="slide">4</div>
    <div class="slide">5</div>
    <div class="slide">6</div>
    <div class="slide">7</div>
    <div class="slide">8</div>
    <div class="slide">9</div>
</div>