php - 为什么 Slick slider 不能在表单标签内工作？

Question

https://magenta-spirit.codio.io/ - 如果删除标签形式一切正常。但是内部表单标签 slider 不起作用。控制台是空的。是什么原因？ 光滑:

$().ready(function(e) {
$('.calc-photos-slider').slick({
    dots: true,
    infinite: false,
    speed: 500,
    fade: false,
    slide: 'li',
    cssEase: 'linear',
    centerMode: true,
    slidesToShow: 1,
    variableWidth: true,
    autoplay: false,
    autoplaySpeed: 4000,
    responsive: [{
        breakpoint: 800,
        settings: {
            arrows: false,
            centerMode: false,
            centerPadding: '40px',
            variableWidth: false,
            slidesToShow: 1,
            dots: true
        },
        breakpoint: 1200,
        settings: {
            arrows: false,
            centerMode: false,
            centerPadding: '40px',
            variableWidth: false,
            slidesToShow: 1,
            dots: true

        }
    }],
    customPaging: function(slider, i) {
        return '<button class="tab">' + $('.slick-thumbs li:nth-child(' + (i + 1) + ')').html() + '</button>';
    }
});
});

Answer 1

问题已解决，我们只是将左右按钮标签更改为 anchor 标签，问题已解决。

    Just change 
return '<button class="tab">' + $('.slick-thumbs li:nth-child(' + (i + 1) + ')').html() + '</button>';

to 

return '<a class="tab">' + $('.slick-thumbs li:nth-child(' + (i + 1) + ')').html() + '</a>';


This will work for you

prevArrow: '<button class="slick-prev"></button>',
nextArrow: '<button class="slick-next"></button>',

to

prevArrow: '< a class="slick-prev"> <i class="ion-ios-arrow-back"></i >< /a >',
nextArrow: '<a class="slick-next">< i class="ion-ios-arrow-forward"> </i > </a >',