Question

我需要你的帮助。我想将bxslider添加到我的html模板中，但它不起作用。我已经尝试了我能想象到的一切。当我预览我的网站时，我会立即获得所有三张图像的奖励，每张图片都在另一张下面。我希望有人可以解释和/或告诉我应该做些什么才能让我的滑块正常工作。 HTML

<link rel="stylesheet" href="css/style.css" media="screen" />
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700" />
    <link rel="stylesheet" href="css/flexslider.css" media="screen" />
    <link rel="stylesheet" href="css/jquery.fancybox.css" media="screen" />
    <link rel="stylesheet" href="css/jquery.bxslider.css" media="screen" />

    <script type="text/javascript">
    $(document).ready(function(){
    $('.slider').bxSlider({
        mode: 'fade',
        captions: true,
        auto: true,
        autoControls: false
    });
     });
</script>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery-migrate-1.2.1.min.js"></script>
    <script src="js/jquery.bxslider.js"></script>
    <script src="js/jquery.ui.widget.min.js"></script>
    <script src="js/jquery.ui.accordion.min.js"></script>
    <script src="js/jquery.ui.tabs.min.js"></script>
    <script src="js/jQuery.BlackAndWhite.min.js"></script>
    <script src="js/jquery.easing-1.3.min.js"></script>
    <script src="js/jquery.fitvid.js"></script>
    <script src="js/jquery.fancybox.pack.js"></script>
    <script src="js/jquery.flexslider-min.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/jquery.jcarousel.min.js"></script>
    <script src="js/jquery.jtweetsanywhere-1.3.1.min.js"></script>
    <script src="js/jquery.touchSwipe.min.js"></script>
    <script src="js/jquery.zflickrfeed.min.js"></script>
    <script src="js/respond.min.js"></script>
    <script src="js/selectnav.min.js"></script>
    <script src="js/custom.js"></script>
    <script type="text/javascript" src="[JS library]"></script>
    <!--[if (gte IE 6)&(lte IE 8)]>
      <script type="text/javascript" src="js/selectivizr-min.js"></script>
      <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
    <![endif]-->

</head>
<body>

<!-- Main Container -->
<div id="body-wrapper">

    <!-- Header -->
    <div id="header" class="container clearfix">

        <a href="index.html" id="logo"><img src="images/logo.png" alt="" /></a>

        <!-- Navigation -->
        <ul id="navigation">
            <li class="current">
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="about.html">Features</a>
                <ul>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="pricing_tables.html">Pricing Tables</a></li>
                    <li><a href="#">Third Navigation Level<i></i></a>
                        <ul>
                            <li><a href="#">Amazing things</a></li>
                            <li><a href="#">that bring</a></li>
                            <li><a href="#">positive results</a></li> 
                        </ul>
                    </li>
                    <li><a href="shortcodes.html">Shortcodes</a></li>
                </ul>
            </li>
            <li>
                <a href="blog.html">Blog</a>
                <ul>
                    <li><a href="blog_post.html">Single Post</a></li>
                </ul>
            </li>
            <li>
                <a href="portfolio_4_col.html">Portfolio</a>
                <ul>
                    <li><a href="portfolio_2_col.html">2 Columns</a></li>
                    <li><a href="portfolio_3_col.html">3 Columns</a></li>
                    <li><a href="portfolio_4_col.html">4 Columns</a></li>
                    <li><a href="portfolio_details.html">Single Project</a></li>
                </ul>
            </li>
            <li>
                <a href="contact.html">Contact</a>
            </li>
        </ul>
        <!-- /Navigation -->

    </div>
    <!-- /Header -->


    <!-- Content -->
    <div id="content" class="container clearfix">

        <h1 class="page-title">Hello, <span class="accent">We are Alco</span><br />A Creative Digital Ageny.</h1>

            <ul class="slider">
                <li>
                    <img src="images/content/slide_01.jpg" alt="">
                </li>    
                <li>
                    <img src="images/content/slide_01.jpg" alt="">
                </li> 
                <li>
                    <img src="images/content/slide_01.jpg" alt="">
                </li> 
            </ul>
        </div>

您的回答将受到高度赞赏！

Answer 1

您需要加载以下脚本

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.bxslider.js"></script>

在$(document).ready(function()之前。另请记住，应在bxslider.css之前加载脚本。您可以参考How to install

需要帮助才能安装BxSlider

1 个答案: