为什么 Slick 滑块在表单标签内不起作用？答案

【问题标题】：Why does not Slick slider work inside a form tag?为什么 Slick 滑块在表单标签内不起作用？
【发布时间】：2017-06-02 07:00:09
【问题描述】：

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

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

【问题讨论】：

目前对我有用。你删除表格了吗？我问，因为有另一种形式包装一切。您是否尝试在表单中添加表单，如果是这样，那将不起作用。
我没有删除标签和滑块仍然不起作用，你使用什么浏览器？我在页面上有这条消息：意外的系统错误 81fd5c70-b96b-4e49-b952-792cf4b1b08b。只有一个表单标签。
Chrome、Firefox、IE - 它适用于任何地方。这是一个视频：streamable.com/ek08k 您可能是指拇指问题。将type="button" 添加到按钮。
太棒了！添加了 type="button" 这有帮助，谢谢（是的，我的意思是拇指问题）！如何评价你的答案？

标签： php jquery css plugins slick.js

【解决方案1】：

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

    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 >',

【讨论】：