How do I fix: Uncaught TypeError: Object [object Object] has no method 'goToSlide' with bxslider?

StackOverflow https://stackoverflow.com/questions/21793115

문제

I'm trying to use bxslider to slide an entire page's worth of content using the goToSlide function from bxslider with a custom set of buttons. When I load the slider with the .bxSlider function, it loads just fine. But when I click the button to go to a specific slide, it says the method does not exist! Any idea on where I made the mistake?

Here is my code: 

<html>
<head>
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/grids.css">
    <link rel="stylesheet" href="css/main.css">

    <script src="js/vendor/jquery-1.11.0.min.js"></script>
    <script src="js/main-test.js"></script>
    <script src="js/vendor/jquery.bxslider.min.js"></script>
</head>
<body>
    <section class="section-3" id="lastBlock-wrapper">
        <ul id="lastBlockCtrl">
            <li class="switch">
                <div class="switchbar"></div>
                <div class="switchbar"></div>
                <div class="switchbar"></div>
            </li>
            <li class="diamond"><a onClick="jumptoslide(0);" class="active">Performance</a></li>
            <li class="diamond"><a onClick="jumptoslide(1);">Durability</a></li>
            <li class="diamond"><a onClick="jumptoslide(2);">Transparency</a></li>
        </ul>
        <ul id="slider">
            <li>
                <section class="feature">
                    <div class="grid" style="height: 100%;">
                        <div class="grid__item two-fifths grid--center slider-bg">
                            <h1>Test</h1>
                        </div>
                        <div class="grid__item three-fifths cont">
                            <h1>Performance</h1>
                            <p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p>
                        </div>
                    </div>
                </section>
            </li>
            <li>
                <section class="feature">
                    <div class="grid">
                        <div class="grid__item two-fifths grid--left">

                        </div>
                        <div class="grid__item three-fifths cont">
                            <h1>Showcase</h1>
                            <p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p>
                        </div>
                    </div>
                </section>
            </li>
            <li>
                <section class="feature">
                    <div class="grid">
                        <div class="grid__item two-fifths grid--left">

                        </div>
                        <div class="grid__item three-fifths cont">
                            <h1>Showcase</h1>
                            <p>Two perfect examples of live sites using Startup Framework: Crumbs and Hipsta Food. These guys have a passion for cooking food and they are really a good deal. Have you created a project using Startup Framework? Share it with us and you just might be featured on Designmodo!</p>
                        </div>
                    </div>
                </section>
            </li>
        </ul>
    </section>
</body>


$( document ).ready( function () {

    //last slider
    var bxslider = $('.slider').bxSlider({        
        controls: false,
        easing: 'ease-in-out'
    });

    jumptoslide = function (slide) { 
        bxslider.goToSlide(slide);
    };

} );
도움이 되었습니까?

해결책

You have no slider class. You only have a slider ID.

Change

var bxslider = $('.slider').bxSlider({        
    controls: false,
    easing: 'ease-in-out'
});

to

var bxslider = $('#slider').bxSlider({        
    controls: false,
    easing: 'ease-in-out'
});

다른 팁

Change the $('.slider') to $('#slider') in your javascript code as slider is id as you mentioned in your html its not class.

. is used to represent class.

# is used to represent id.

Hope it helps.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top