Почему bxSlider продолжает переход к последнему слайду и почему добавление предоставленных опций нарушает код?

См.: http://sthliquidations.com.

Я только что скачал и установил bxSlider. Кажется, это именно то, что я хочу, но у меня есть несколько проблем: я использую Chrome

1) Независимо от того, на каком слайде я нахожусь, после перехода показывается последний слайд (кроме первого слайда).

2) Когда я пытаюсь настроить режимы, ползунок становится основным списком UL.

Процесс:

Код заголовка:

<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>

Заголовочный файл:

<!-- =============== -->
<!--       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>

Индексный файл:

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

    <p class="head1">Welcome 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 companies 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, compressors, 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>

(без нижнего колонтитула, это не важно)

Мой файл JS (отображает список изображений UL):

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

});

Мой файл JS (отображает слайд-шоу, которое «почти» работает):

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

Ошибки Chrome Inspect Element выдает следующие ошибки:

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

Я убедился, что все файлы, которые пришли с загрузкой, были включены. Я следовал единственным инструкциям, которые смог найти на сайте. Кто-нибудь может увидеть, что может пойти не так?


person Christina Kline    schedule 23.02.2014    source источник
comment
У меня никогда не было проблем с bxSlider. Было бы полезнее предоставить живую ссылку.   -  person ralph.m    schedule 24.02.2014
comment
Ссылку было бы проще, но при быстром сканировании вашего кода наиболее очевидным является то, что он должен быть... режим: "затухание"... см. кавычки.   -  person thesublimeobject    schedule 24.02.2014
comment
Добавлена ​​ссылка @ralph.m :)   -  person Christina Kline    schedule 24.02.2014
comment
@HunterRose Добавление кавычек полностью устранило проблему с режимами. Установка его на Fade также устранила проблему с отображением последнего слайда. Но это не объясняет, почему не сработало значение по умолчанию...   -  person Christina Kline    schedule 24.02.2014
comment
Возможно, проблема связана с версией jquery, которую вы используете. Я видел это в паре других постов. Попробуйте использовать более старую версию, чтобы посмотреть, что произойдет (я знаю, что это не идеально).   -  person Papa    schedule 24.02.2014
comment
Ага. Это было действительно странно. Я использую исключительно bxslider и никогда не видел, чтобы он делал это. Я смотрел на ваш сайт около 10 минут и не мог понять, почему он это делает. Я рад, что исправил это, хотя!   -  person thesublimeobject    schedule 24.02.2014
comment
@папа. Я подумал об этом. У меня всегда работало на 1.10.x.   -  person thesublimeobject    schedule 24.02.2014
comment
@Папа, я так и думал. я использую версию до 10 (поддерживающую все браузеры). Возможно, это было так. :) Спасибо вам, ребята!   -  person Christina Kline    schedule 24.02.2014


Ответы (1)


Я была такая же проблема. Я исправил это, установив useCSS: false в файле js. Когда useCSS установлено в false, bxslider использует jQuery animate() вместо переходов CSS для горизонтальной прокрутки.

person Caesar Blue    schedule 15.05.2014
comment
Та же проблема, это не решило - извините! - person darylknight; 09.10.2014
comment
У меня были серьезные проблемы с моим сайтом в Chrome. Потребовалось некоторое время, чтобы определить bxSlider как проблему, и это отлично ее устранило. Я не уверен, почему проблема так долго поднимала голову. Возможно, это связано с большим количеством элементов в слайдере? - person ntrrobng; 09.12.2014
comment
Спасибо из 2017, добрый сэр! - person Valdrinium; 04.09.2017