javascript - Why does bxSlider keep going to last slide, and why does adding provided options break the code?

See:

I just downloaded and installed bxSlider. It seems to be exactly what I want, but I'm having several issues: I'm using Chrome

1) No matter what slide I'm on, the last slide shows after transition (except the first slide).

2) When I try to adjust the modes, the slider bees it's basic UL list.

Process:

Header code:

<head>

    <!-- NAME THE PAGE -->
    <title><?php $title ?></title>

    <!-- GET THE FAIRY DUST AND DUST BUNNIES -->
    <link rel="stylesheet" type="text/css" href="scripts/basic.css" />
    <script type="text/javascript" src="contact-files/contact-form.js"></script>
    <script type="text/javascript" src="scripts/jquery.min.js"></script>

    <!-- bxSlider -->
    <script src="/scripts/jquery.bxslider.min.js"></script>
    <link href="/scripts/jquery.bxslider.css" rel="stylesheet" />

    <script src="/scripts/muscles.js"></script>

    <!-- TELL GOOGLE WHAT IT WANTS TO HEAR -->
    <meta name="description" content="<?php $description ?>">
    <meta name="keywords" content="<?php $keywords ?>">

    <!-- FIX ENCODING ERROR -->
    <meta charset="UTF-8">

</head>

Header file:

<!-- =============== -->
<!--       BODY      -->
<!-- =============== -->
<body>


<div id="header">

    <div class="logo">

    </div>

    <!-- TITLE -->
    <div class="headerwindow">

        <div class="logo-box">
            <a href="index.php"><img src="/images/logo_white.png" alt="STH Liquidations" class="logo_image" /></a>
        </div>

        <div class='title'>

        <?php
            if ($title != "STH Liquidations")
            {
                echo $title;
            }
        ?>
            <p class='contact_info'>Phone: (843) 452-5451</p>
            <p class='contact_info'>Monday - Friday: 8:30 - 5:00 PM</p>
        </div>

    </div>




</div>

<div class="clear"></div>

Index File:

    <?php include "parts/hot_deals.php"; ?>

    <p class="head1">Wele to <strong>STH Liquidations, Inc.</strong></p>

    <p>With <strong><i>over ten years experience</i></strong> in the overstock and liquidation business, we at STH Liquidation, Inc feel confident that we can meet your specific needs. STH buys and sells <strong>NAME BRAND</strong> liquidated merchandise from all major retailers, catalog panies and big box stores.
    </p>

    <p>Whether you are <strong>a retailer, wholesaler, auctioneer, online seller, exporter, flea marketer, mom and pop store,</strong> or whatever you specific venture is, we at STH Liquidations, Inc are confident that we can supply your needs and <strong>help maximize your profits</strong>. We carry truckloads of <a href="general-merchandise.php">general merchandise</a>, <a href="furniture-and-appliances.php">furniture</a>, <a href="housewares.php">housewares</a>, <a href="tools.php">tools</a>, <a href="toys.php">toys</a>, <a href="sporting-goods.php">sporting goods</a>, <a href="jewelry.php">jewelry lots</a>, <a href="apparel-and-shoes.php">apparel</a> and much more.</p>

    <p>We carry product from most all major retailers so our customers know that they are getting the name brands they are looking for.</p>

    <p>We <strong>DO NOT</strong> buy from others warehouses in which merchandise most likely has been “cherry picked”. We buy and ship direct to the customers from all the major retail reclamation and distribution centers. <strong>Shipping direct from these facilities saves you money.</strong> Another money saving advantage is that our low overhead. Our business philosophy is simple; we keep our costs low so we can keep your costs low. Money saved is money made!</p>

    <p>Browse our website at your leisure, but please call us with any questions you may have or to place your order.</p>

    <p>Remember to <a href="contact.php">join our mailing list</a> to receive up to date listings and our <strong>hot deals</strong>.</p>

</div>


<div id="hotdeals">

    <p class="head2">Hot Deals!</p>

    <div class="deals">
        <p class="deal_title">K-Hardgoods</p>
        <p class="deal_desc">Housewares, toys, tools,sporting goods and much more. Several loads available. See attachment</p>
        <p class="deal_price">Price $139 per pallet (single loads)<br />Price $135 per pallet (double load)</p>
        <p class="deal_pdf"><a href="PDFs/sth-hot-deal-kmart.pdf">Download PDF</a></p>
    </div>

    <div class="deals">
        <p class="deal_title">SRS Tool Truckload</p>
        <p class="deal_desc">CR*STSM*N TOOLS AND MUCH MORE <br />Saws, pressors, blowers, edgers. saber saws, table saws and much more</p>
        <p class="deal_price">27 PALLETS--WHLS $66,649.32 <br />SELL PRICE $12,900</p>
        <p class="deal_pdf"><a href="PDFs/srs_tools_012914.pdf">Download PDF</a></p>
    </div>

    <div class="deals">
        <p class="deal_title">W*M Power wheels</p>
        <p class="deal_desc">Ride on toy truckloads
            <br />150-180 units per truckload
            <br />Customer returns</p>
        <p class="deal_price">Price only $5,900</p>
    </div>

</div>

<div class="clear"></div>

<div id="image_holder">

    <ul class="bxslider">
        <li><img src="/slider/pic1.jpg" /></li>
        <li><img src="/slider/pic2.jpg" /></li>
        <li><img src="/slider/pic3.jpg" /></li>
        <li><img src="/slider/pic4.jpg" /></li>
        <li><img src="/slider/pic5.jpg" /></li>
        <li><img src="/slider/pic6.jpg" /></li>
    </ul>

</div>

(leaving the footer out, it's not important)

My JS File (renders UL list of images):

$(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: fade
    });

});

My JS File (renders slideshow that "almost" works):

$(document).ready(function(){
    $('.bxslider').bxSlider();
});

Errors Chrome Inspect Element is throwing this errors:

Uncaught ReferenceError: fade is not defined muscles.js:3
(anonymous function) muscles.js:3
j jquery.min.js:2
k.fireWith jquery.min.js:2
n.extend.ready jquery.min.js:2
K

I have made sure that all the files that came with the download have been included. I have followed the only instructions I could find on the website. Can anyone see what might be going wrong?

See: http://sthliquidations.

I just downloaded and installed bxSlider. It seems to be exactly what I want, but I'm having several issues: I'm using Chrome

1) No matter what slide I'm on, the last slide shows after transition (except the first slide).

2) When I try to adjust the modes, the slider bees it's basic UL list.

Process:

Header code:

<head>

    <!-- NAME THE PAGE -->
    <title><?php $title ?></title>

    <!-- GET THE FAIRY DUST AND DUST BUNNIES -->
    <link rel="stylesheet" type="text/css" href="scripts/basic.css" />
    <script type="text/javascript" src="contact-files/contact-form.js"></script>
    <script type="text/javascript" src="scripts/jquery.min.js"></script>

    <!-- bxSlider -->
    <script src="/scripts/jquery.bxslider.min.js"></script>
    <link href="/scripts/jquery.bxslider.css" rel="stylesheet" />

    <script src="/scripts/muscles.js"></script>

    <!-- TELL GOOGLE WHAT IT WANTS TO HEAR -->
    <meta name="description" content="<?php $description ?>">
    <meta name="keywords" content="<?php $keywords ?>">

    <!-- FIX ENCODING ERROR -->
    <meta charset="UTF-8">

</head>

Header file:

<!-- =============== -->
<!--       BODY      -->
<!-- =============== -->
<body>


<div id="header">

    <div class="logo">

    </div>

    <!-- TITLE -->
    <div class="headerwindow">

        <div class="logo-box">
            <a href="index.php"><img src="/images/logo_white.png" alt="STH Liquidations" class="logo_image" /></a>
        </div>

        <div class='title'>

        <?php
            if ($title != "STH Liquidations")
            {
                echo $title;
            }
        ?>
            <p class='contact_info'>Phone: (843) 452-5451</p>
            <p class='contact_info'>Monday - Friday: 8:30 - 5:00 PM</p>
        </div>

    </div>




</div>

<div class="clear"></div>

Index File:

    <?php include "parts/hot_deals.php"; ?>

    <p class="head1">Wele to <strong>STH Liquidations, Inc.</strong></p>

    <p>With <strong><i>over ten years experience</i></strong> in the overstock and liquidation business, we at STH Liquidation, Inc feel confident that we can meet your specific needs. STH buys and sells <strong>NAME BRAND</strong> liquidated merchandise from all major retailers, catalog panies and big box stores.
    </p>

    <p>Whether you are <strong>a retailer, wholesaler, auctioneer, online seller, exporter, flea marketer, mom and pop store,</strong> or whatever you specific venture is, we at STH Liquidations, Inc are confident that we can supply your needs and <strong>help maximize your profits</strong>. We carry truckloads of <a href="general-merchandise.php">general merchandise</a>, <a href="furniture-and-appliances.php">furniture</a>, <a href="housewares.php">housewares</a>, <a href="tools.php">tools</a>, <a href="toys.php">toys</a>, <a href="sporting-goods.php">sporting goods</a>, <a href="jewelry.php">jewelry lots</a>, <a href="apparel-and-shoes.php">apparel</a> and much more.</p>

    <p>We carry product from most all major retailers so our customers know that they are getting the name brands they are looking for.</p>

    <p>We <strong>DO NOT</strong> buy from others warehouses in which merchandise most likely has been “cherry picked”. We buy and ship direct to the customers from all the major retail reclamation and distribution centers. <strong>Shipping direct from these facilities saves you money.</strong> Another money saving advantage is that our low overhead. Our business philosophy is simple; we keep our costs low so we can keep your costs low. Money saved is money made!</p>

    <p>Browse our website at your leisure, but please call us with any questions you may have or to place your order.</p>

    <p>Remember to <a href="contact.php">join our mailing list</a> to receive up to date listings and our <strong>hot deals</strong>.</p>

</div>


<div id="hotdeals">

    <p class="head2">Hot Deals!</p>

    <div class="deals">
        <p class="deal_title">K-Hardgoods</p>
        <p class="deal_desc">Housewares, toys, tools,sporting goods and much more. Several loads available. See attachment</p>
        <p class="deal_price">Price $139 per pallet (single loads)<br />Price $135 per pallet (double load)</p>
        <p class="deal_pdf"><a href="PDFs/sth-hot-deal-kmart.pdf">Download PDF</a></p>
    </div>

    <div class="deals">
        <p class="deal_title">SRS Tool Truckload</p>
        <p class="deal_desc">CR*STSM*N TOOLS AND MUCH MORE <br />Saws, pressors, blowers, edgers. saber saws, table saws and much more</p>
        <p class="deal_price">27 PALLETS--WHLS $66,649.32 <br />SELL PRICE $12,900</p>
        <p class="deal_pdf"><a href="PDFs/srs_tools_012914.pdf">Download PDF</a></p>
    </div>

    <div class="deals">
        <p class="deal_title">W*M Power wheels</p>
        <p class="deal_desc">Ride on toy truckloads
            <br />150-180 units per truckload
            <br />Customer returns</p>
        <p class="deal_price">Price only $5,900</p>
    </div>

</div>

<div class="clear"></div>

<div id="image_holder">

    <ul class="bxslider">
        <li><img src="/slider/pic1.jpg" /></li>
        <li><img src="/slider/pic2.jpg" /></li>
        <li><img src="/slider/pic3.jpg" /></li>
        <li><img src="/slider/pic4.jpg" /></li>
        <li><img src="/slider/pic5.jpg" /></li>
        <li><img src="/slider/pic6.jpg" /></li>
    </ul>

</div>

(leaving the footer out, it's not important)

My JS File (renders UL list of images):

$(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: fade
    });

});

My JS File (renders slideshow that "almost" works):

$(document).ready(function(){
    $('.bxslider').bxSlider();
});

Errors Chrome Inspect Element is throwing this errors:

Uncaught ReferenceError: fade is not defined muscles.js:3
(anonymous function) muscles.js:3
j jquery.min.js:2
k.fireWith jquery.min.js:2
n.extend.ready jquery.min.js:2
K

I have made sure that all the files that came with the download have been included. I have followed the only instructions I could find on the website. Can anyone see what might be going wrong?

Share Improve this question edited Feb 23, 2014 at 23:12 asked Feb 23, 2014 at 21:27 Christina Kline 251 silver badge7 bronze badges

I've never had trouble with bxSlider. It would be more useful to provide a live link. – ralph.m Commented Feb 23, 2014 at 22:22
A link would be easier, but the scanning your code quickly the most obvious thing is that it should be ... mode: 'fade' ... see the quotes. – thesublimeobject Commented Feb 23, 2014 at 23:16
@ralph.m link added :) – Christina Kline Commented Feb 23, 2014 at 23:16
@HunterRose Putting in the quotes fixed the modes issue pletely. Setting it to Fade has fixed the "showing last slide" issue as well. But that doesn't explain why the default didn't work... – Christina Kline Commented Feb 23, 2014 at 23:32
Might be an issue with the version of jquery your using. I've seen this on a couple other posts. Try using an older version to see what happens (I know, not ideal). – Papa Commented Feb 23, 2014 at 23:33

| Show 3 more ments

1 Answer 1

Sorted by: Reset to default 6

I had the same issue. I fixed it by setting useCSS: false in the js file. When useCSS is set to false bxslider uses jQuery animate() instead of CSS transitions for horizontal scrolling.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why does bxSlider keep going to last slide, and why does adding provided options break the code? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)