Tag: bxslider

在bxslider中resize时更新内容滑块的大小: 我正在制作一个全屏内容的bx滑块，它是幻灯片内部文本和图像的混合，高度为100％但不知怎的，我不知道它在resize时面临的问题是什么。我正在使用此代码： – $(function() { var eleSlider = $(‘.main-slider’); var callSlider = eleSlider.bxSlider({ //pagerCustom: ‘.bx-pager’, adaptiveHeight: true, adaptiveHeightSpeed: 1000, //mode: ‘slide’, //useCSS: false, infiniteLoop: false, hideControlOnEnd:true, easing: ‘easeInOutExpo’, //video: true, speed: 1000, autoHover:true, responsive:true, //preloadImages:all, pager:false, //controls:false, //auto:true, pause:3000, }); $(window).resize(function(){ callSlider.reloadSlider(); }).resize(); }); 当我在没有reloadSlider()情况下调整屏幕大小时，它的宽度和高度采用了奇怪的形状，在应用reloadSlider() ，它会转到第一张幻灯片。我希望宽度，高度和所有有用的组件在resize时更新，但保持当前幻灯片。我设计了一个小提琴，但由于iframe没有显示问题，而在纯HTML中，它显示了高度不适应屏幕的问题。 http://jsfiddle.net/n0669x28/1/show/ Bx-slider有像adaptiveHeight: true, responsive:true参数adaptiveHeight: true, responsive:true ，在这种情况下有帮助吗？ […]

bxSlider中未遵守宽度: 我正在尝试使用jQuery插件bxSlider制作幻灯片。最终我想要实现的是： http ： //i.imgur.com/yae1Gvy.jpg 虽然我刚刚在网上找到了这个图片。我不太担心滚动条。我只想让3张图片中的2张离开页面。 bxSlider有一个选项来设置幻灯片的宽度（slideWidth），我希望该宽度为图像的宽度：680px。然而，3个幻灯片的容器不能以正常宽度适合所有3个幻灯片，因此它将每个幻灯片最大化为$（window）.width（）/ 3，然后将其应用为内联样式，因此我无法覆盖它。如果我将值更改为较小的值然后它工作正常并适合容器，但我需要它离开视口。从本质上讲，这就是我想要实现的目标，除了尺寸问题之外我还有90％： http ： //www.aucklanddj.co.nz/weddings 上面链接的网站使用相同的jQuery插件。 inheritance我的代码： HTML：使用Javascript： $(document).ready(function(){ $(‘.slide-container’).bxSlider({ auto: true, useCSS: false, pager: false, controls: false, autoHover: true, minSlides: 3, maxSlides: 3, slideWidth: 680, slideMargin: 0, preloadImages:”visible”, moveSlides: 1, captions: true, responsive: false }); }); 我错过了有最大宽度选项的东西吗？我必须看了几个小时的选项页面而没有找到任何东西……也搜索了很多但不太确定我是否在问正确的问题。任何帮助将不胜感激。

查询字符串以控制BXSlider startSlide: 我试图让bxslider的开始幻灯片由查询字符串控制。例如，urlhttp：//page.html？id = 3将启动幻灯片3，然后用户可以在无限循环中推进幻灯片。我目前的代码是： $(document).ready(function(){ $(‘.bxslider’).bxSlider({ startSlide: 0, infiniteLoop: true, }); }); 我不知道如何提取查询字符串值，然后将其值插入startSlide。任何帮助，将不胜感激。

响应式JavaScript – 加载/隐藏与浏览器宽度相关的特定function？: 首先：我不是JavaScript / JQuery！ ……但我会试着指出我想做什么。我正在我的页面上使用梦幻般的bx滑块，我通过媒体查询使我的网站响应，这两个目前都很好。 …但是bx-slider-script中有一些function我不想在特定的浏览器宽度上激活。这就是我想要的： browser-width LOWER比500px =加载此函数： $(‘#slider4’).bxSlider({ minSlides: 2, maxSlides: 2, slideWidth: 230, slideMargin: 10, nextSelector: ‘#next’, prevSelector: ‘#prev’, infiniteLoop: false, hideControlOnEnd: true, pager: false, useCSS: false, easing: ‘easeInOutExpo’, speed: 1000 }); 浏览器宽度高于500px =隐藏上面的函数并加载这个： $(‘#slider4’).bxSlider({ minSlides: 4, maxSlides: 4, slideWidth: 230, slideMargin: 20, nextSelector: ‘#next’, prevSelector: ‘#prev’, infiniteLoop: false, hideControlOnEnd: true, […]

Bxslider不使用Bootstrap Modal框: 我正在使用带有bxslider的 bootstrap模态框。但是它没有用。我正在用ajax更改bxslider的内容。有时它在我重新加载页面时起作用但是它不起作用。这是我的HTML代码。和jquery代码一样 $(document).ready(function(){ var slider = $(‘.contact_bxslider’).bxSlider({ auto:true }); $(‘.store_pictures_click’).click(function(e){ e.preventDefault(); var store_name = $(this).attr(‘id’); $.post(”,{store_name:store_name}, function(data){ $(‘.contact_bxslider’).html(data); slider.reloadSlider(); $(‘#storeModal’).modal(‘show’); } ); }); }); Ajax代码…… function change_store_pictures(){ $store_name = $this->input->post(‘store_name’); $this->load->model(‘Store_Pictures_model’); $data[‘store_pictures’] = $this->Store_Pictures_model->get_store_pictures($store_name); foreach($data[‘store_pictures’] as $store_picture){ ?> <img src="https://stackoverflow.com/questions/19194394/bxslider-not-working-with-bootstrap-modal-box/store_picture); ?>” alt=”store_name; ?>” /> <?php } } 请帮助我，我没有得到它的解决方案。我搜索谷歌，得到一个结果，说使用宽度：960px; 我做了同样但没有奏效。你能帮助我吗。

一个页面上有多个bxSlider实例: 我在一个页面上有四个幻灯片，我想使用bxSlider在循环中运行我很擅长标记和CSS，但还不是很精通javascript。我想我必须错过一个关键元素，因为目前没有任何幻灯片正在运行。我希望得到一些帮助让所有四个人都能工作。谢谢！ JS： $(‘#slider1’).bxSlider({ auto: true, autoControls: true, pause: 3000, slideMargin: 20 }); $(‘#slider2’).bxSlider({ auto: true, autoControls: true, pause: 3000, slideMargin: 20 }); $(‘#slider3’).bxSlider({ auto: true, autoControls: true, pause: 3000, slideMargin: 20 }); $(‘#slider4’).bxSlider({ auto: true, autoControls: true, pause: 3000, slideMargin: 20 }); CSS： .slider { position: relative; float: right; padding-right: 400px; […]

bxSlider停止工作2天前没有代码更改: 我一直在用我的头发拉出来。我们在SharePoint 2013主页中实现了bxslider。这项工作是由我现在已离职的同事完成的，所以不是我的工作，而是….它已经完成并正在工作。现在虽然在调用onSliderLoad回调函数时遇到运行时错误，该函数调用了slider.goToNextSlide（）; 从Debug Output窗口中提取VS：0x800a138f – JavaScript运行时错误：无法获取未定义或空引用的属性’goToNextSlide’ 我几乎排除了代码更改，因为我已经将源代码还原了几个月，并且还将一个非常旧的快照还原到了虚拟SharePoint服务器中。这些都仍然遇到同样的新问题。我也在我们的暂存服务器上尝试了这个技巧，该服务器暂时没有任何新发布的代码。该主机现在遇到同样的问题。我唯一能想到的是外部变化导致了这个问题，但我不知道。我从Firebug和IE10中获得了不同的错误（你必须在IE中测试和调试它;-)）从FeedsRotator.ascx中提取（Homepart.aspx上的Webpart） var slider= $(‘#slider2’).bxSlider({ auto: true, controls: false, pager:false, pause: 10000, slideWidth: (sir ? sirina:300), slideHeight: 450, randomStart: true, autoHover: true, onSliderLoad: function (currentIndex) { slider.goToNextSlide(); //This is line 1024 }, 从BxSlider.css中提取 #slider1 { margin:0; padding:0; } .bx-wrapper { position: […]

bxslider轮播代码: 我正在尝试从此站点实现滑块 http://bxslider.com/ 我使用了他们所说的确切程序，但仍然我的代码不起作用你们可以告诉我如何解决它我正在提供我的小提琴代码 http://jsfiddle.net/v3efb/3/ http://jsfiddle.net/v3efb/3/embedded/result/ 在下面提供我的代码 $(document).ready(function(){ $(‘.bxslider’).bxSlider(); });

bxslider停止video元素自动播放: 我正在使用Bx滑块作为标准轮播。其中一个幻灯片有一个带有自动播放的元素，并循环播放以用作背景。问题是出于某种原因bx滑块阻止video播放。是否有一种已知的方法来覆盖此行为。页面加载时video播放正常，直到bxslider的js触发并停止。我正在使用bxslider的开箱即用配置，而li里面是这样的： <source src="/library/images/tbf/flag.mp4″ type=”video/mp4″> <source src="/library/images/tbf/flag.ogv” type=”video/ogg”> 提前致谢！

多个幻灯片上的公共方法bxslider: 我有多个幻灯片，即时通讯使用此代码： var demo = $(‘.demo’).bxSlider({ mode: ‘horizontal’, captions: false, touchEnabled: true, controls: false, pager:false }); $(‘.slider-next’).click(function(){ demo.goToNextSlide(); return false; }); $(‘.slider-prev’).click(function(){ demo.goToPrevSlide(); return false; }); 但它不起作用……任何人都知道为什么会这样？谢谢！