Question

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

＆＃34;未捕获的TypeError：$（...）。lightSlider不是一个函数＆＃34; 这是我的头脑

 <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，一切正常，但这里不起作用，我不明白为什么......如果有人可以解决这个问题，请帮助< / p>

Answer 1

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

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

Answer 2

我在使用WordPress时遇到了同样的问题，我在footer.php和wp_enqueue_script的{{1}}中也叫js

我在页脚中有function.php代码，而在lightslider中都有代码

我从页脚中删除了所有js，仅使用了custom.js函数，并将wp_enqueue_script激活代码保留在lightslider

lightSlider不是一个功能

2 个答案: