Javascript Slick JS自定义导航不起作用

我有一个基本的SlickJS1.8旋转木马，并试图修改分页的外观。有很多类似的问题，但没有一个适合我。旋转木马工作，我可以左右滑动，圆点工作很好，但是我希望在导航方面实现此演示文稿（其中->或您可以在此处进行一些修改来解决此问题，但您仍然需要调整它以获得所需演示文稿。有关解释，请参阅代码中的注释

例如：

var$status=$（'.count'）；
变量$slickElement=$（'.slick slider'）；
//您只需要在init上添加控件。任何其他操作都可能导致行为问题。
$slickElement.on（'init'，函数（）{
$status.before（“”）；
});
$slickElement.on（'init reInit afterChange'，函数（事件、滑动、当前滑动、下一滑动）{
var i=slick.currentSlide+1；//这将在init上获取当前幻灯片。
$status.html（''+i+'/'+slick.slideCount+''）；
});
//为了举例，我简化了这一点。你必须记住，如果你的slidesToShow大于1，那么你的编号分页可能无法按照你的预期工作，因为编号将反映一行中的第一项。
$（'.slick slider'）。slick({
无限：错，
速度:300,，
幻灯片放映：1，
幻灯片滚动：1，
箭头：是的，
下一行：$（'.custom next'），
prevArrow:$（'.custom prev'），
});
//如果slick容器中没有箭头控件，可能会导致没有添加事件侦听器。您只需自己在此处添加它们即可。
$（'.custom prev'）。单击（函数（）{
$slickElement.slick（'slickPrev'）；
})
$（'.custom next'）。单击（函数（）{
$slickElement.slick（'slickNext'）；
})

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
        ]
    });

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');
})