Slick JS 自定义导航无法正常工作

Question

我有一个基本的 slickJS 1.8 Carousel 并试图修改分页的外观。有很多 Whosebug 类似的问题，但是 none 对我有用。旋转木马工作，我可以左右滑动，点工作正常但是我想在导航时实现这个演示 <- 1/3 -> （其中 -> 或 <- 是一个图标）这是设置

var $status = $('.count');
var $slickElement = $('.carousel');

$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
        //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
        var i = (currentSlide ? currentSlide : 0) + 1;
        $status.html('<button type="button" class="custom-prev"><</button>' + '<span class="current_slide">' + i + '</span> / <span class="total_slides"> ' + slick.slideCount + '</span>' + '<button type="button" class="custom-next">></button>');
    });



    $('.carousel').slick({
        infinite: false,
        speed: 300,
        slidesToShow: 4.5,
        slidesToScroll: 4,
        arrows: true,
        nextArrow: $('.custom-next'),
        prevArrow: $('.custom-prev'),


        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
            }
            }
            // You can unslick at a given breakpoint now by adding:
            // settings: "unslick"
            // instead of a settings object
        ]
    });

下一张和上一张按钮出现，但导航到下一张幻灯片不起作用，但圆点起作用。禁用点对我自定义的下一个和上一个按钮没有任何影响，我做错了什么吗？我不是 JS 专家，因此不胜感激。

Answer 1

您可以在此处通过一些修改来解决此问题，但您仍需要对其进行调整以获得您想要的演示文稿。请参阅代码中的注释以获取解释。

示例：https://codepen.io/alexpetergill/pen/56c63447c77c07e84407f08016cf17b2

var $status = $('.count');
var $slickElement = $('.slick-slider');

// You only need to add the controls on init. Anything more will probably result in issues with behaviour.
$slickElement.on('init', function () {
  $status.before('<button type="button" class="custom-prev"><</button>' + '<button type="button" class="custom-next">></button>');
});

$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
  var i = slick.currentSlide + 1; // This will get you the current slide on init.
  $status.html('<span class="current_slide">' + i + '</span> / <span class="total_slides">' + slick.slideCount + '</span>');
});

// I've simplified this for sake of example. You have to bare in mind that if your slidesToShow is more than 1 then your numbered pagination probably wont work how you expect as the number will reflect the first item in a row.
$('.slick-slider').slick({
  infinite: false,
  speed: 300,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  nextArrow: $('.custom-next'),
  prevArrow: $('.custom-prev'),
});

// Not having the arrow controls within the slick container probably results in the event listeners not being added. You can simply add them yourself here.
$('.custom-prev').click(function(){
  $slickElement.slick('slickPrev');
})

$('.custom-next').click(function(){
  $slickElement.slick('slickNext');
})

Slick JS 自定义导航无法正常工作

Slick JS Custom Navigation not functioning

javascript

jquery

slick.js