jquery - lightSlider 不是函数

Question

在我的网站中，我使用 lightSlider 作为产品图库。我为 lightslider 加载了 jquery 和 js，但仍然显示错误

"Uncaught TypeError: $(...).lightSlider is not a function" here is my head

 <link  href="/css/bootstrap.css" rel="stylesheet">
 <link href="/plugins/revolution/css/settings.css" rel="stylesheet" type="text/css">
 <link href="/plugins/revolution/css/layers.css" rel="stylesheet" type="text/css">
 <link href="/plugins/revolution/css/navigation.css" rel="stylesheet" type="text/css">
 <link href="/css/style.css" rel="stylesheet">
 <link href="/css/responsive.css" rel="stylesheet">
 <link href="/css/custom.css" rel="stylesheet" type="text/css">
 <link id="color_scheme" href="/css/home3.css" rel="stylesheet">
 <link href="/js/lightslider/lightslider.css" rel="stylesheet">
 <link href="/js/owl-carousel/owl.carousel.css" rel="stylesheet">
 <link href="/css/lib.css" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="/js/jquery-ui/jquery-ui.css" media="all" />
<script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui/jquery-ui.js"></script>
<link href="/js/lightslider/lightslider.js" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/bootstrap-datetimepicker.min.css" media="all" />

在打开 body 标签后，我添加了这个脚本:

<script>

    $("#thumb-slider-vertical .owl2-item").each(function() {
        $(this).find("[data-index='0']").addClass('active');
    });

    $('.product-options li.radio').click(function(){
        $(this).addClass(function() {
            if($(this).hasClass("active")) return "";
            return "active";
        });

        $(this).siblings("li").removeClass("active");
        $(this).parent().find('.selected-option').html('<span class="label label-success">'+ $(this).find('img').data('original-title') +'</span>');
    });

    var _isMobile = {
        iOS: function() {
            return navigator.userAgent.match(/iPhone/i);
        },
        any: function() {
            return (_isMobile.iOS());
        }
    };

    $(".thumb-vertical-outer .next-thumb").click(function () {
        $( ".thumb-vertical-outer .lSNext" ).trigger( "click" );
    });

    $(".thumb-vertical-outer .prev-thumb").click(function () {
        $( ".thumb-vertical-outer .lSPrev" ).trigger( "click" );
    });

    $(".thumb-vertical").lightSlider({
        gallery:true,
        item: 3,
        thumbItem:9,
        autoWidth: false,
        vertical:true,
        slideMargin: 15,
        verticalHeight:340,
        pager: false,
        controls: true,
        prevHtml: '<i class="fa fa-angle-up"></i>',
        nextHtml: '<i class="fa fa-angle-down"></i>',
        responsive: [
            {
                breakpoint: 1199,
                settings: {
                    verticalHeight: 330,
                    item: 3,
                }
            },
            {
                breakpoint: 1024,
                settings: {
                    verticalHeight: 235,
                    item: 2,
                    slideMargin: 5,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    verticalHeight: 340,
                    item: 3,
                }
            }
            ,
            {
                breakpoint: 480,
                settings: {
                    verticalHeight: 100,
                    item: 1,
                }
            }

        ]

    });
 </script>

在 lightslider 的演示文件中，只需加载头部部分 js、jquery 和 CSS，一切正常，但这里不起作用，我不明白为什么……如果有人能解决这个问题请帮忙

Answer 1

<script type="text/javascript" src="/js/lightslider/lightslider.js"></script>

您所做的是将 lightslider 作为 CSS 包含在内。请改用脚本标签。