jQuery 「 ~ is not function」メソッドが使用できない。

Question

前提・実現したいこと

先日jQueryでのスライダーの実装を頼まれまして、
過去に実装した経験がなかったので、調査から入り、
色々と試行錯誤していたのですが、
うまくいきません。

発生している問題・エラーメッセージ

Uncaught TypeError: slider.goToNextSlide is not a function

該当のソースコード

//スクリプト(jQuery)読み込み部分
<script type='text/javascript' src='/script/jquery-1.9.1.min.js'></script>
<script type="text/javascript">
    $(function(){
        $('a[href^=#]').click(function(){
            var speed = 800;
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var position = target.offset().top;
            $("html, body").animate({scrollTop:position }, speed, "swing");
            return false;
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        var pageTop = $('.page_top');
        pageTop.hide();
        $(window).scroll(function () {
            if ($(this).scrollTop() > 400) {
                pageTop.fadeIn();
            } else {
                pageTop.fadeOut();
            }
        });
        pageTop.click(function () {
            $('body, html').animate({scrollTop:0}, 800, 'swing');
            return false;
        });
    });
</script>
<script type="text/javascript" src="/script/jquery.inview.js"></script>
<script type="text/javascript" src="/script/list.js"></script>
<script type='text/javascript' src='/script/jquery.min.js'></script>
<script type='text/javascript' src='/script/menu_fix.js'></script>
<script type="text/javascript" src="/script/jquery-1.8.0.min.js"></script>
<!--Jqueryを混在させるため以下-->
<script type="text/javascript">
    var $180 = jQuery.noConflict(true);

    (function($){
        $(function(){
            console.info("jQuery = " + $.fn.jquery);
        });
    })(jQuery);

    (function($){
        $(function(){
            console.info("$180 = " + $.fn.jquery);
        });
    })($180);
    (function($){
        $(function(){
            console.info("$ = " + $.fn.jquery);
        });
    })($);
</script>
<script type="text/javascript" src="/script/jquery.bxslider.js"></script>

  //スライダー実装部分
        (function($) {
            $(document).ready(function () {
                var slider = $('.bxslider').bxSlider({
                                easing: 'easeInOutCubic',
                                speed: 1000,
                                pager: false
                                });
                $('#next_btn').on('click', function () {
                   slider.goToNextSlide();
                })
                $('#prev_btn').on('click', function () {
                   slider.goToPrevSlide();
                })
            });

        })(jQuery);
   

試したこと

上のソースではbxsliderを利用していますが、
こだわりはありません。
slickでの実装も試みましたが、こちらに関しては、
slickメソッド自体がnot functionと言われてしまい、
何一つ動作しない状態でした。
jqueryの読み込む位置は、スライダースクリプトよりも前になっているので、
その点は問題ないかと考えています。
bxsliderを利用してみたところbxsliderメソッドだけはなぜか機能したので、
とりあえず仮でbxsliderを利用しています。

jqueryの競合による問題であることも想定して、
var $j = jQuery.noConfict()
を利用する方法も試しましたが変化はありませんでした。

スクリプトの読み込みエラーも想定し、
DevToolsのSourcesタブからjsファイルも確認したのですが、
全て問題なく読み込まれていました。

ちなみにbxsliderはbxsliderメソッド以外は何一つ機能しません。
(~ is not functionと言われる)

どちらのスライダーで試しても同じようなエラーが出たため、
スライダープラグインに問題があるのではなく、
根本的に何か問題があるのではないかと思い、
質問させていただいております。

怪しいところなど御座いましたら、ご指摘いただけると幸いです。

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを質問文に追記されたほうが回答を得やすいと思います。

Answer 1

jqueryを違うバージョンで二重に読み込んでいませんか？
とりあえず現時点の1系最新のバージョンは1.12.4だったと思いますので
それを一度だけよみ

なるべくその直後に近い場所でbxsliderを追加で読んでください

Comments

[ixa]

試してみたのですが、「$ is not a function」のエラーが出てしまいました。
これは$の部分をすべてjQueryに書き換えなくてはならないのでしょうか？

[yambejp]

> $ is not a function

はjQuery本体の読み込み箇所が後ろすぎるのだと思います
なるべくheadの先頭に近い場所で読んでください

[ixa]

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>

<script type="text/javascript">
$(function(){
$('a[href^="#"]').click(function(){
var speed = 800;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position }, speed, "swing");
return false;
});
});
</script>

この記述順序で
$('a[href^="#"]').click(function()
の行で既に$ is not function と言われてしまうのですが...

[yambejp]

なんか文字化けしてますが大丈夫ですか？
まずは

<script src="ttps://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
console.log("hoge");
});
</script>

だけで試してみてください（ttpsをhttpsに変更する）

[ixa]

<script type="text/javascript">
$(function(){
console.log("hoge");
});
</script>
<script type="text/javascript">
$(function() {
var pageTop = $('.page_top');
pageTop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
pageTop.click(function () {
$('body, html').animate({scrollTop:0}, 800, 'swing');
return false;
});
});
</script>

hogeの部分は通るようになったのですが、var pageTopの行でエラーが出ますね...($ is not a function)