bxslider 相关问题

bxSlider是一个完全响应的jQuery内容滑块，具有许多灵活的自定义功能。幻灯片可以包含图像，视频或HTML

我最近安装了很酷的 bxslider 插件。但由于某种原因，图片没有在中间对齐，当我将其放入 iframe 中时，它会泄漏出来。这里看一下：我的网站怎么可以...

css bxslider

回答 1 投票 0

我正在这个网站上工作（我不是制作该网站的人，但不幸的是我必须修复它）。我在 firebug 上遇到此错误： TypeError: j(...).bxSlider is not a function 这是我的我正在开发this网站（我不是制作该网站的人，但不幸的是我必须修复它）。我在 firebug 上遇到此错误：TypeError: j(...).bxSlider is not a function 这是我的<head>： <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript" src="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.min.js"></script> <link type="text/css" href="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.css" rel="stylesheet" media="all"> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" media="all"> <script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script src="/wp-content/themes/aykamakina/tabs/js/easyResponsiveTabs.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="/wp-content/themes/aykamakina/tabs/css/easy-responsive-tabs.css"> <link rel="stylesheet" href="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.css" type="text/css" media="screen"> <script type="text/javascript" src="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.js"></script> 这是我的标记： <div class="the-main-slider-container"> <ul class="bxslider"> <li> <img alt="slider" src="/wp-content/uploads/2014/03/slider-1.jpg"> </li> <li> <img alt="slider" src="/wp-content/uploads/2014/03/slider-2.jpg"> </li> <li> <img alt="slider" src="/wp-content/uploads/2014/03/slider-3.jpg"> </li> <li> <img alt="slider" src="/wp-content/uploads/2014/03/slider-4.jpg"> </li> <li> <img alt="slider" src="/wp-content/uploads/2014/03/slider-5.jpg"> </li> </ul> <div id="bx-pager"> <div class="pager-wrapper"> <div class="pager-container"> <a data-slide-index="0" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-features.png"></a> <a data-slide-index="1" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-confezioni.png"></a> <a data-slide-index="2" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-vantaggi.png"></a> <a data-slide-index="3" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-specifiche.png"></a> <a data-slide-index="4" href=""><img alt="icone" src="/wp-content/uploads/2014/03/d320-icone-compact2.png"></a> </div> </div> </div> </div> 这是脚本： <script type="text/javascript"> var j = jQuery.noConflict(); j(document).ready(function() { j('.bxslider').bxSlider({ pagerCustom: '#bx-pager', mode: 'fade' }); }); j(function ($) { j(document).ready(function(){ j('.slider8').bxSlider({ mode: 'vertical', slideWidth: 300, minSlides: 2, slideMargin: 10 }); }); }); j(document).ready(function() { j(".various").fancybox({ maxWidth : 450, maxHeight : 400, fitToView : false, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'none', closeEffect : 'none' }); }); </script> 正如你所看到的，我尝试使用 noConflict;，因为我在互联网上看到很多帖子都有同样的错误，而且看起来大多数人都用 noConflict; 解决了问题；但这对我不起作用。顺便说一句，所有的滑块都是用一个名为 Cyclone Slider 的插件制作的，我真的不明白以前的开发者做了什么... 而且标记看起来不错。我看不出哪里出了问题。任何帮助将非常感激。非常感谢您的宝贵时间！编辑#1：我在源代码中找到的其他 jQuery 实例； <script type='text/javascript' src='http://reformpackagingmachine.com/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script> <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.50.0-2014.02.05'></script> <script type='text/javascript' src='http://reformpackagingmachine.com/wp-includes/js/jquery/jquery.masonry.min.js?ver=2.1.05'></script> <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.min.js?ver=2.8.2'></script> <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.carousel.min.js?ver=2.8.2'></script> <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.swipe.min.js?ver=2.8.2'></script> <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.tile.min.js?ver=2.8.2'></script> <script type='text/javascript' src='http://reformpackagingmachine.com/wp-content/plugins/cyclone-slider-2/libs/cycle2/jquery.cycle2.video.min.js?ver=2.8.2'></script> 在尝试了很多不同的事情之后，我成功解决了自己的问题。我已将 bxSlider、easyResponsiveTabs 的 JavaScript 文件以及调用它们的脚本放置到 footer.php。但我将 jQuery 和 jQuery UI 文件以及滑块的 css 文件留在了 header.php 中。现在一切正常，标记通过了验证测试！如果您遇到同样的错误；检查您的 jQuery 和其他 JavaScript 文件路径。检查您是否使用旧版本的 jQuery 或不兼容版本的 jQuery 和 jQuery UI。不要与愚蠢的开发人员合作，他们可能会将所有链接标签放入 footer.php 并从 header.php 调用脚本... 检查您是否有不同的 jquery.min.js 实例和/或版本（在我的情况下）将 bxSlider js 文件放入 footer.php，但将 css 文件保留在 header.php 中（用于验证，这样效果很好）你也可以写信给我，我可以尽力帮忙。最有可能的原因是 jQuery 的多个实例。再往下看，你会发现 WP 插入了更多标签，其中之一看起来是 jQuery。 jQuery 的第二个实例可能是由插件插入的。尝试识别哪个并禁用以查看是否可以解决问题。有人回答说检查jQuery脚本，确保只有一个。但没有回答“为什么？”问题。我有同样的（这个问题）问题，但解决了。 bxSlider 的（链接的）JS 文件为 jQuery 创建了一个函数，后来的文件覆盖了这个函数（删除它，因为 jQuery 最初不包含 bxSlider 的东西）。所以答案是：将 JS 链接放在最后一个 jQuery JS 文件链接之后，然后就可以了。这对我有帮助，谢谢！特别阅读反馈和评论

javascript jquery html wordpress bxslider

回答 4 投票 0

在 Foundation Reveal 中打开时，BX 滑块不显示？

基本上，我有一个 BX 滑块，它将通过 Zurb 基金会的揭示显示在弹出窗口中。但是，当我单击按钮来显示模式（其中包含 bx 滑块）时，它不会显示。该...

jquery slider zurb-foundation bxslider

回答 2 投票 0

BX 滑块 - 响应式 - 最小/最大幻灯片

我正在尝试更改在不同窗口宽度下显示的幻灯片数量，在初始加载时，它会拉动适量的幻灯片。但在调整滑块选项中的最小/最大幻灯片大小时...

jquery bxslider responsive

回答 2 投票 0

bx 滑块在少于 4 个幻灯片时会损坏

我在一个项目中使用 BX 滑块，并且在 destroy.slider() 方法中遇到了一些问题 - 我的客户通过 CMS 添加图像，因此滑块的每个实例都有一个可变的幻灯片数量。 ..