bxslider

Using bxslider, is there some way to remove or hide the bullets at the bottom of the slide?

落花浮王杯 提交于 2019-12-04 22:30:19
I am using bxslider to make a simple carousel, one jpg per slide. Because I have 8 jpg's, there are 8 bullets that are displayed at the bottom of each slide. Is there some way for me to remove or hide them. radu There is an option of bxslider called "pager" that can take boolean true / false. Use the code below: $(document).ready(function(){ $('.bxslider').bxSlider({ pager: false }); }); first load the bxSlider as usual, $(document).ready(function(){ $('.bxslider').bxSlider(); }); then only use the code below, otherwise the jquery will try to call perform the task without even implementing the

Jquery bxslider not working + Angular js ng-repeat issue

会有一股神秘感。 提交于 2019-12-04 16:56:21
I'm working on a Angular js project where I get number of terms and i'm using ng repeat to show each term in the front end . it works fine .I have shown them in a bx slider (jquery responsive bxslider) Following will be the main code. Javascript code <script type="text/javascript"> $(document).ready(function(){ $('.slider4').bxSlider({ slideWidth: 300, minSlides: 2, maxSlides: 3, moveSlides: 1, slideMargin: 10 }); }); </script> HTML code <div class="slider4"> <div ng-repeat="term in terms" > {{term.name}}</div> </div> I can see all the terms are loaded nicely but when I click arrow keys slider

bx slider : how to disable slide show when only one image is present

眉间皱痕 提交于 2019-12-04 13:04:11
问题 I am using bxslider to create a slideshow of my images. The images are updating dynamically. My problem is the sideshow fade-in and fade-out work even only one image is present. How can I stop this ? bxslider options are var coverSlider = $('.bxslider').bxSlider({ auto: true, minSlides: 1, maxSlides: 1, pager: false, speed: 500, pause: 3000, autoHover: true, mode: 'fade', controls: false }) I am using reload method to update the slider when a new image is appends or removes coverSlider

How to fix problem with clicking event on bxSlider item in Chrome 73?

雨燕双飞 提交于 2019-12-04 03:05:37
A bxSlider's inner item click event doesn't fire after Chrome has updated to version 73. How can I fire .on('click') event for elements in new Chrome? It fires in Chrome when slides are moving. Everyting is fine in FireFox <div class="slider-pager"> <div class="slider-pager__item"><img src="1.jpg" alt=""></div> <div class="slider-pager__item"><img src="2.jpg" alt=""></div> </div> <script> carouselProduct = $('.slider-pager').bxSlider({ maxSlides: 3, minSlides: 3, slideWidth: 90, infiniteLoop: false, moveSlides: 1, slideMargin: 8, pager: false, nextSelector: '.slider__nav--next', prevSelector:

Nested bxSlider

匿名 (未验证) 提交于 2019-12-03 10:24:21
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: I would like to have a vertical carousel slider and inside each vertical slide I will have a horizontal slider, I am using bxSlider and it works well for vertical slider part but when I nest the horizontal part the horizontal slider doesn't work as expected. Any idea on that? 回答1: Making a slider from multiple sliders is difficult even with a well documented one like bxSlider. Fortunately, I already made something that's pretty close to what your'e looking for. I couldn't get the horizontal child sliders to move as well, I think it might

bxslider directive throwing error `Uncaught TypeError: Cannot read property &#039;indexOf&#039; of undefined`

匿名 (未验证) 提交于 2019-12-03 08:51:18
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: I am using angularjs in my application where I have created a directive for bxslider. Below is code of directive: angular.module('sbAdminApp') .directive('bxSlider', function(){ return{ restrict: "A", require: "ngModel", link: function(scope, element, attrs, ctrl){ element.ready(function(){ $($(element[0])).bxSlider({ maxSlides:1, auto:true, controls:false, pager:true }); }) } } }) Above I am using like this $($(element[0])).bxSlider({ after ready function as I search for a problem where bxslider should work with ng-repeat and found this

bx slider : how to disable slide show when only one image is present

孤人 提交于 2019-12-03 08:06:42
I am using bxslider to create a slideshow of my images. The images are updating dynamically. My problem is the sideshow fade-in and fade-out work even only one image is present. How can I stop this ? bxslider options are var coverSlider = $('.bxslider').bxSlider({ auto: true, minSlides: 1, maxSlides: 1, pager: false, speed: 500, pause: 3000, autoHover: true, mode: 'fade', controls: false }) I am using reload method to update the slider when a new image is appends or removes coverSlider.reloadSlider(); You should check the number of images before reloading, and use destroySlider() method if

Jquery bxslider exception

匿名 (未验证) 提交于 2019-12-03 07:50:05
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: Alright so the problem is basically unknown for me, never had it before. I tried adding bxslider today but it seems it doesnt work properly. I tried using the other version of the JS that he provided but same thing happends, the images keep on "loading" and they never load. I did inspect element and this is what I got jQuery.Deferred exception: Cannot read property 'indexOf' of undefined TypeError: Cannot read property 'indexOf' of undefined at jQuery.fn.load (file:///C:/Users/Oploditelj/Desktop/domaci_last/js/jquery-3.0.0.js:9612:12) at

bxslider calculating wrong viewport size on load

て烟熏妆下的殇ゞ 提交于 2019-12-03 05:05:52
Anyway I recently started using bxslider and I'm having an issue with it. It seems to calculate its viewport size wrongly on page load, which means it doesn't work well on mobile devices, tablets etc. The weird thing is, when I resize the window of the browser(even just for a pixel) the viewport height gets calculated correctly and everything looks fine. But if I refreshed the page with same height and width bx-viewport wouldn't be correctly calculated. Any idea why this is happening? HTML looks something like this(and yeah I'm aware that it probably hasn't got anything to do with it, but

change number of slides on bxslider depending on screensize

匿名 (未验证) 提交于 2019-12-03 02:54:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: I want to change the max number of slides on the bxslider for when my screen is below 430px. I could use the below but this seems like overkill having to declare everything twice. Is there any other way that someone could think of? if ( $(window).width() < 430) { var myslider = $('#my-slider').bxSlider({ ... maxSlides : 1, }); } else { var myslider = $('#my-slider').bxSlider({ ... maxSlides : 4, }); } 回答1: You can make things less repetitive by setting a maxSlides variable, rather than repeating your slider code. var maxSlides, width = $