CODEWITHSUNDEEP
jqueryhtmlslider
allen
allen

Reputation: 380

lightSlider is not a function

In my website, I use lightSlider for product gallery. I loaded jquery and js for lightslider, but still, show error

"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" />

and after open body tag i add this script:

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

in demo file for lightslider just load in head part js, jquery and CSS and everything is ok, but here is not working and I do not see why ... if someone can resolve this problem please help

Upvotes: 4

Views: 6088

Answers (2)

mohit saint
mohit saint

Reputation: 1

I was using WordPress, I got this same problem, I had called the js in footer.php and in wp_enqueue_script in function.php also

And I had lightslider code in footer and custom.js both

I removed all the js from footer and used only wp_enqueue_script function and keep the lightslider activation code in custom.js

Upvotes: 0

Wils
Wils

Reputation: 1231

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

What you did is include the lightslider as CSS. Use script tag instead.

Upvotes: 5

Related Questions