0

carouFredSel jQUERY プラグインに問題があります。すべてのスタイルをローカルで (MAMP を使用せずに) うまく動作させましたが、ファイルをライブ サーバーに移動し、すべてが適切な場所にあることを確認すると、壊れてしまいました。

同じファイルをローカルに保存でき、カルーセルが機能します。それは自分のコードやレイアウトに関係があるのではないかと考え始めています。私は Javascript にあまり精通していないので ( jQUERY を使用できます)、これは一種の学習プロセスです。どんな助けでも大歓迎です。

これが私のヘッダー コードです。HTML 5 ボイラープレートを使用しています。

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Site Title</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <!-- LOAD JQUERY -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <!-- GOOGLE WEB FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,700,600,300,800' rel='stylesheet' type='text/css'>

            <!-- CSS -->
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/carousel.css" />

    <!-- MODERNIZER -->
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>

    <!-- JAVASCRIPT -->
    <!-- CAROUSEL & jQUERY UI -->
            <script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
            <script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>

            <!-- CAROUSEL -->
            <script type="text/javascript" language="javascript" src="js/jquery.carouFredSel-6.1.0.js"></script>

            <!-- optional include helper plugins -->
            <script type="text/javascript" language="javascript" src="js/jquery.mousewheel.min.js"></script>
            <script type="text/javascript" language="javascript" src="js/jquery.touchSwipe.min.js"></script>
            <script type="text/javascript" language="javascript" src="js/jquery.ba-throttle-debounce.min.js"></script>

            <script type="text/javascript">
            $(document).ready(function() {
                $('#carousel').carouFredSel({
                    auto: true,
                    prev: '#prev2',
                    next: '#next2',
                    pagination: {
                        container: ".pager",
                        pagination: {anchorBuilder: function(nr) { return '<a href="#"><span>'+'XXX'+nr+'</span></a>'; }}
                    },
                    width: 700,
                    height: 150,
                    align: 'center',
                    scroll: {
                items: 4,
                fx: "scroll",
                easing: "swing",
                duration: 1000,
                pauseOnHover: true
                        },
                });
            });
            </script>

</head>

編集:私の間違いです。エラー コンソールの内容を投稿するのを完全に忘れていました。次のように述べています。

エラー: TypeError: $("#carousel").carouFredSel は関数ではありません。

何か案は？どんな助けでも大歓迎です。ありがとうございました！

4

1 に答える 1

0

私はそれを理解しました。私は何が間違っていたのかよくわかりません。上記を置き換えたものは次のとおりです。

    <!-- JAVASCRIPT -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>
            <script type="text/javascript" src="js/jquery.ui.core.min.js"></script>
            <script type="text/javascript" src="js/jquery.ui.widget.min.js"></script>

なぜそれがうまくいったのか誰か知っていますか？おそらく、jQUERY がどこかで 2 回初期化されたためでしょうか?

于 2013-01-30T20:33:09.873 に答える