Javascript 产品滑块在产品视图页面magento中不工作

我正在使用magento ver。1.9.0.1我正在使用滑块在media.phtml页面中滑动主产品图像，但它不起作用，甚至没有显示任何错误

请参阅以下代码： media.phtml

    <?php if ('true' == (string) Mage::getConfig()->getNode('modules/Amasty_Label/active')): ?>
                <div class="amlabel-div">               

                <?php echo Mage::helper('amlabel')->getLabels($_product, 'product') ?>
 <?php endif; ?>

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>

<div class="product-image">
     <div style="position: relative;">

        <ul class="bxslider">
             <?php foreach ($this->getGalleryImages() as $_image): ?>
               <li>
                    <img id="amasty_zoom" data-zoom-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($imageWidth, $imageHeight); ?>" width="<?php echo $imageWidth;?>" height="<?php echo $imageHeight;?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"  title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
               </li>
             <?php endforeach; ?>
             </ul>

        <?php if (count($this->getGalleryImages()) > $itemCount && Mage::getStoreConfig('amconf/carousel/enable')): ?>
            <div id="prevGallery" style="top:<?php echo $smallImageSize/2 - 17;?>px" class="MagicScrollArrows MagicScrollArrowPrev"></div>
            <div id="nextGallery" style="top:<?php echo $smallImageSize/2 - 17;?>px" class="MagicScrollArrows MagicScrollArrowNext"></div>
             <?php if (Mage::getStoreConfig('amconf/carousel/pagination')): ?>
                <div id="ampagination" style="margin-top: 10px;"></div>
             <?php endif; ?>
        <?php endif; ?>
     </div>
</div>

<?php else: ?>

<div class="product-image">

       <div style="position: relative;">

       <ul class="bxslider">
             <?php foreach ($this->getGalleryImages() as $_image): ?>
               <li>
                    <img id="amasty_zoom" data-zoom-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>"src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($imageWidth, $imageHeight); ?>" width="<?php echo $imageWidth;?>" height="<?php echo $imageHeight;?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"  title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
               </li>
             <?php endforeach; ?>
            </ul> 

        <?php if (count($this->getGalleryImages()) > $itemCount && Mage::getStoreConfig('amconf/carousel/enable')): ?>
            <div id="prevGallery" style="top:<?php echo $smallImageSize/2 - 17;?>px" class="MagicScrollArrows MagicScrollArrowPrev"></div>
            <div id="nextGallery" style="top:<?php echo $smallImageSize/2 - 17;?>px" class="MagicScrollArrows MagicScrollArrowNext"></div>
             <?php if (Mage::getStoreConfig('amconf/carousel/pagination')): ?>
                <div id="ampagination" style="margin-top: 10px;"></div>
             <?php endif; ?>
        <?php endif; ?>
     </div>
</div>

<?php endif; ?>
<?php if ('true' == (string)Mage::getConfig()->getNode('modules/Amasty_Label/active')): ?>
                </div>
            <?php endif; ?>

<?php if (count($this->getGalleryImages()) > 0): ?>

<div class="more-views">

</div>
<?php endif;?>



<script src="http://urbanior.grapesdigital.com/skin/frontend/rwd/default/js/owl.carousel.js"></script>
<script src="http://urbanior.grapesdigital.com/skin/frontend/rwd/default/js/jquery.bxslider.js"></script>

<script>
jQuery(document).ready(function($){ 
$('.bxslider').bxSlider1({

        mode: 'fade'

     });
      $(".testi").owlCarousel({
        items : 5,
        itemsCustom : false,
        itemsDesktop : [2000, 1],
        itemsDesktopSmall : [979, 1],
        itemsTablet : [768, 1],
        itemsTabletSmall : false,
        itemsMobile : [479, 1],

       });
     }); 
</script>

helper（'catalog/image'）->init（$this->getProduct（），'image'，$\u image->getFile（））->resize（$imageWidth，$imageHeight）；？>“width=”“height=”“alt=”“title=”“/>


修改html并使用类
产品图像库放置
bxslider

<div class="product-image product-image-zoom">
    <div class="product-image-gallery  bxslider">
        <img id="image-main"
             class="gallery-image visible"
             src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
             alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
             title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />

        <?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
            <?php if ($this->isGalleryImageVisible($_image)): ?>
            <img id="image-<?php echo $i; ?>"
                 class="gallery-image"
                 src="<?php echo $this->getGalleryImageUrl($_image); ?>"
                 data-zoom-image="<?php echo  $this->getGalleryImageUrl($_image); ?>" />
            <?php endif; ?>
        <?php $i++; endforeach; ?>
    </div>
</div>


helper（'catalog/image'）->init（$\产品，'image'）？>”
alt=“”
title=”“/>
getGalleryImageUrl（$_图像）；？>"
数据缩放图像=”“/>

并将Js放在文件的末尾

<script src="http://urbanior.grapesdigital.com/skin/frontend/rwd/default/js/owl.carousel.js"></script>
<script src="http://urbanior.grapesdigital.com/skin/frontend/rwd/default/js/jquery.bxslider.js"></script>

<script>
jQuery(document).ready(function($){ 
$('.bxslider').bxSlider1({

        mode: 'fade'

     });
      $(".testi").owlCarousel({
        items : 5,
        itemsCustom : false,
        itemsDesktop : [2000, 1],
        itemsDesktopSmall : [979, 1],
        itemsTablet : [768, 1],
        itemsTabletSmall : false,
        itemsMobile : [479, 1],

       });
     }); 
</script>


jQuery（文档）.ready（函数（$）{
$（'.bxslider'）.bxSlider1({
模式：“淡入淡出”
});
$（“.testi”）.owlCarousel({
项目：5，
斯库斯托姆：错，
itemsDesktop:[2000,1]，
itemsDesktopSmall:[979,1]，
itemsTablet:[768,1]，
itemsTabletSmall:false，
itemsMobile:[479,1]，
});
}); 

我希望它能工作。
请再次检查是否已加载bxslider的css文件

并认为它应该是$（'.bxslider'）.bxslider（）而不是$（'.bxslider'）.bxSlider1（）
修改app/design/frontend/YOUR_THEME/default/template/catalog/product/view/media.phtml文件
将类“bxslider”与类“product image gallery”一起添加
把这个代码放在文件的末尾-
jQuery（文档）.ready（函数（$）{
$（'.bxslider'）.bxslider({
模式：“淡入淡出”
});
$（“.testi”）.owlCarousel({
项目：5，
斯库斯托姆：错，
itemsDesktop:[2000,4]，
itemsDesktopSmall:[979,1]，
itemsTablet:[768,1]，
itemsTabletSmall:false，
itemsMobile:[479,1]，
});
}); 
在您的
index.php
文件中写入
ini\u集（'display\u errors'，1）
并检查错误是什么，它没有显示任何错误检查您的浏览器控制台是否存在js错误浏览器控制台也没有显示任何错误您的代码在我的系统上运行正常。检查您是否有多个缩略图。
我就是这样显示空白页的。我刚刚更新了我上面的媒体代码。phtml页面……。请查看，以便您能理解您使用的是任何自定义主题吗？是的，实际上我使用的是用于缩放目的的amasty扩展和色样，这就是它调用其媒体的原因。phtml页面为我提供该扩展的链接Orry bro。这是有偿的延期。我不能用它。为我提供一个下载链接，以便我可以在mu local上使用它，并进一步帮助您。请解释您的代码如何解决OP的问题。
Modify app/design/frontend/YOUR_THEME/default/template/catalog/product/view/media.phtml file

Add a class 'bxslider' with the class 'product-image-gallery' 

and put this code the end of file -

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
    <script>
     jQuery(document).ready(function($){ 
     $('.bxslider').bxSlider({

            mode: 'fade'

         });
          $(".testi").owlCarousel({
            items : 5,
            itemsCustom : false,
            itemsDesktop : [2000, 4],
            itemsDesktopSmall : [979, 1],
            itemsTablet : [768, 1],
            itemsTabletSmall : false,
            itemsMobile : [479, 1],

           });
         }); 
    </script>