stevenwanderski / bxslider-4 Goto Github PK
View Code? Open in Web Editor NEWResponsive jQuery content slider
License: Other
Responsive jQuery content slider
License: Other
Updates of bxSlider are very nice :)
No backward is a choice, but I'm embarrassed about the documentation update. Indeed, many functions' name have changed and there is no trace of previous documentation :s
We run all of our JS through the YUI compressor. On line 180, you are declaring the float of the element which breaks on the YUI compressor. I wrapped it in quotes to make it a string temporarily. Thought you might want to know, but not sure how many others will have an issue with this.
I can't seem to get the slide width to make any difference to the width of the slider, I am using the condition
slideWidth:630 to match the width of the image, is this the correct way to set the width?
Thanks
Here's my HTML:
<ul class="bxslider">
<li><img src="myimage.png"></li>
<li><img src="myimage.png"></li>
<li><img src="myimage.png"></li>
</ul>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="myimage_thumb.png"></a>
<a data-slide-index="1" href=""><img src="myimage_thumb.png"></a>
<a data-slide-index="2" href=""><img src="myimage_thumb.png"></a>
</div>
I am calling bxslider via: element.bxSlider({ pagerCustom: '#bx-pager' })
Part of the thumbnail pagers is working... as you switch slides (via the normal method) the 'active' class will switch elements. But clicking on the thumbnails doesn't do anything.
Thoughts?
Is there an equivalent public method in v4 for v3's reloadShow()? If not, how would one achieve creating new slideshows using AJAX?
Currently the slider is not considering situations, when there's not enough items to fill the viewport. Or, better said - the whole slider seems to break in such situations, positioning items in ridiculous offsets and showing the move controls although they shouldn't be visible at all.
You can test this on a horizontal slider, with, ie. max and min set to 4, item width set to viewport/4, and the slider having only 1 or 2 items.
Hi,
former there was a config param called pagerActiveStyle (or something like that) where I could say bxSlider how to format the active pager thumbnail. How can I do that now? There is no such parameter in your options anymore.
Thanx in advance
Regards
wulle
I have a strange issue:
I create a script.js like this:
$(document).ready(function(){
$('.bxslider').bxSlider({
pager: false,
mode: 'fade',
auto: true,
autoHover: true
});
$('.depliant').bxSlider({
pager: false
});
$('.bxcarousel').bxSlider({
pager: false,
minSlides: 2,
maxSlides: 3,
slideWidth: 155,
slideMargin: 20
});
$('.bx_preview_slider').bxSlider({
pagerCustom: '#bx-pager',
});
});
I use two slideshow, one carousel and one thumb. If I insert only thumbnail pager into my page there is an error on jquery.bxslider.js, line 380: TypeError: position is undefined. In this page I have only the thumbnail pager. If I delete slideWidth and slideMargin from .bxcarousel into script.js it is work.
Can you help me? Thank you in advance.
How to get slideIndex from slideElement in onSlideAfter callback?
Thank you
Im trying to get a continuous vertical slider to go and i've tried all sorts of stuff, but it doesnt seem to work.
I've got my options like this:
$(".scrollable").bxSlider({ticker: true, mode:'vertical', autoHover: true, auto: true });
The container div (scrollable) seems to always just have a height of a single image, so im not able to get the ticker type feel of it auto scrolling and repeating. Any help would be great!
Its like the bx-viewport is always fixed to a single image. I've tried adding minSlides (or maxSlides) and when that property is set, the slideshow doenst do anything.
Thanks,
Jake
Hello
I need make scroll from left to right
any Idea ?
senk.
Is there an option to re-start the slider after one uses the various nav buttons?
I've got a slider that runs automatically, but once someone clicks next/prev or a pager button, it stops transitioning on its own. I'd like to be able to set a counter so it'll start up again after a set amount of time.
Hello,
Is there any chance that Carousel will no swing to beginning on clicking prev and next buttons?
When You use only one img everything is OK - clicking next button will lead You through all images without backwards animation but when You have few images shown at once the backwards animation occurs. In preview version there was no such problems. Images animated in same direction infinitely.
I'm using such options:
$('#home-slider').bxSlider({
auto: true,
pause: 3000,
slideMargin: 20,
easing: 'swing',
minSlides: 3,
maxSlides: 3,
pager: false,
moveSlides: 1,
slideWidth: 187,
infiniteLoop: true
});
Hi,
I have noticed, that it is impossible to disable initial viewport animation.
.bx-viewport starts with 50px height and then expands. It should be optional, imo.
Thanks!
At http://bxslider.com/options, you state that the default value for swipeThreshold is 500, yet in the JS, it's 50.
I'm using the latest Firefox 17.0.1. If I have a slider that contains embedded youtube videos, I'm not able to play the video and everytime I click to play, it goes to the next slide. When this happens the thumbnail pagers and functions under onSlideBefore also are not functioning properly.
See the example http://bxslider.com/examples/video in Firefox 17.0.1. Tested in 2 computers and behavior is the same. Thank you.
Hi,
just tried autoStart but it doesn't seem to change anything in the slider behavior.
$('.bxslider').bxSlider({
mode: 'horizontal',
autoStart: true,
startSelector: 'start',
autoControls: true,
hideControlOnEnd: true
});
If I try it with the code above the slider doesn't start to transist. It only starts with "auto:true" while autoStart seems to do nothing. Looks like it takes no effect.
What am I doing wrong?
Thanx alot in advance.
Kind regards
Wulle
Hi ,
I have a slider that when the add the option to create custom prev and next selectors it doubles the nextText: ' ',prevText: ' so I have 2 of the same span ?
Here is where you can find the error - http://theconfluencegroup.com/new_site3/#a
Let me know if I can clarify in anyway
thanks
I have built a slider that will sometimes have the last slide as the starting slide. When this happens, that slide renders at the far right, instead of the far left. Also, when you progress the carousel it skips more than the indicated amount of slides.
Here is a jsFiddle..
http://jsfiddle.net/aapljack/hUYr5/2/
You can see the top slider exhibits the incorrect behavior with the last slide as starting slide and the bottom slider shows the correct behavior with the second to last slide as starting slide.
Is this a bug? Is there a workaround? Am I doing something wrong?
Thanks in advance.
Brian
Hi,
I use bxslider in a phonegap application for swiping slides with html content.
It worked fine until I downloaded your last version. It seems that since you changed the way you capture swipe events (your change on Nov. 21), there is some problem on Android phones.
In one of my slides I have an input field and a button. The click event on both the input field and the button works fine on Chrome, on iOS. But it does not work on Android. Looks like the click event is not passed to my elements... Rather strange since the only difference is the new way you handle swipe events now. I tried to figure it out but couldn't find were the error was. Any ideas ?
I may have found a bug:
I have a slider running in an infinite loop. You can see the previous and next slides peeking out on either side of the main slide being viewed. They're supposed to fade in as they become active, and fade out as they leave the viewport.
It works flawlessly, except for one thing: the animation halts on the transition from the first slide to the last, and from the last slide to the first.
You can see what I'm talking about at jsfiddle. That's just the exact code I'm using, though with different images, and with missing page assets, of course.
Also: this could just be Firebug freaking out, but when I resize the browser window, the slider responds exactly as it's supposed to, but seemingly at random, the previous and next events fail with this error in the console:
Error in protected function: !99
It doesn't really give more detail than that.
Hi,
Have you any plans to add this feature to Ver 4 as it was in Ver 3? Really want to upgrade to Ver 4 but can't as we rely on the random start slide.
Many Thanks
It's the same reason. Please add this: when mouse is out of picture, hide navigator, When mouse is on picture, show navigator.
All I want is Let user can focus on picture if he just want to view pictures.
Another thing, I just implemented this pretty neat piece of code that stops the slideshow when the slider is not visible / scrolled away. It comes handy when using adaptable height feature. Implement it if you find it helpful.
function isFullyVisible(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
&& (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
}
var slider = $('.bxslider').bxSlider();
$(window).scroll(function(){
if(isFullyVisible('.bxslider')){
slider.startAuto();
}else{
slider.stopAuto();
}
});
Also the common way of getting the properties out of the object would be awesome - like getting the property as var isAuto = $('bxslider').bxSlider('auto');
and setting it like $('bxslider').bxSlider('auto',false);
thanks for your work, I appreciate it.
Hi,
I have put together the slider and it stops and locks at slide 27 for some reason
here it is - http://theconfluencegroup.com/beats_shots/
let me know if i can provide any other info
thanks
Nick
Getting this error in Chromium when randomly the images in the slideshow do not load whent he page content loads:
Uncaught TypeError: Cannot read property 'left' of undefined:
jquery.bxslider.js:1056
el.goToSlide:
jquery.bxslider.js:1056
el.goToNextSlide:
jquery.bxslider.js:1068
(anonymous function):
jquery.bxslider.js:1092
Code here:
http://paste.laravel.com/eTh
Hi,
when I try to get the bxSlider object by $('bxslider').bxSlider();
and i have already assigned the slider to the element, the slider instantiates again on that element which I consider being a bug. It should only return the instance.
Hi,
I have updated to the latest version of 4 and am having problems with a large slideshow (82 slides).
Using 'startSlide' navigating to the later slides (20+) the browser crashes when using Chrome, IE 7&8 and Safari. No problem when using Firefox.
I rolled back to Commit 23b767d and there is no problem.
Small slideshows (10 slides) don't seem to cause a crash.
Can't work out what is causing it or why firefox is fine...
Thanks
Hi,
Firefox 17 - when click on next, prev button there is outline from left page to a button.
This fix it:
.bx-wrapper .bx-next:focus { border: 0 none; outline: 0 none; }
Jquery UI 1.8.6 and up makes bx-slider bx-viewport on a fixed 50px height...
in my case : I installed it incl. autocomplete.
downgrading jquery UI fixed my problem but I thought you need to know this
thanks
Most of times, User only want to show picture no need to show caption. If user consider one of pictures, he will move mouse onto slide, then show him the caption to give him more detail.
If user is not consider about the picture. The caption is not the thing what he is considered. So I think you give add this option.
So, I'm using a bxSlider setup which shows multiple images at once (between 2 and 4) and is not using a infinite loop. However, the hideControlsOnEnd is not honored and shows on both the first page and last one. Any idea why? Using the latest bxSlider (4.0) and the latest jQuery (1.8.3). I'm also using isotope.js if that would matter.
Here's my js
$('#single ul').bxSlider({
minSlides: 2,
maxSlides: 4,
slideWidth: 380,
adaptiveHeight: true,
slideMargin: 10,
pager: false,
infiniteLoop: false,
hideControlsOnEnd: true,
});
and here's my html, if that helps (obviously wrapped in a div with the ID set as single)
<ul>
<li><img src="img/test_big.png"/></li>
<li><img src="img/test_big.png"/></li>
<li><img src="img/test_big.png"/></li>
<li><img src="img/test_big.png"/></li>
<li><img src="img/test_big.png"/></li>
<li><img src="img/test_big.png"/></li>
<li><img src="img/test_big.png"/></li>
<li><img src="img/test_big.png"/></li>
<li><img src="img/test_big.png"/></li>
</ul>
Thank you.
/Niclas
Hi, I really love bxSlider and have been using it for over a year on multiple projects. I would like to know if you could create a public method to launch the resizing operation ourselves. For example, i want to click a zoom button which resizes the slider to nearly twice the size.
Just write me back and i'll send you the fix i created, ready for you to integrate if it works everywhere.
Thanks.
See > http://108.174.153.215/~theseanm/index.php?/about (still in development)
It appears that the viewport is not snapping up to the content .... and/or the content is hidden from view, but is still physically taking up space.
Not sure how to fix this?
Hi there,
in one of the last updates the selectors for start and stop buttons are gone aswell as I am not able to use individual images for the start and stop buttons since then.
Why is that?
How can I tell the bxSlider to use certain images for start and stop, prev and next?
Please tell me I did some complex implementation into my CMS and now all these settings are useless.
Thanks you very much in advance
Regards
Wulle
This is useful. because it's useless to show next/prev when mouse is out of slide.
Please add this option.
Hi,
currently, if I using jquery ajax method to update the slide items. firstly, I have to destroy the show instance. and then need re-initiate slider again.
I think this is somehow effect the performance.
so is there any public method that can allow us to have update method.
eg.
var
after ajax update the slider...
$.ajax(...).done(
$slider.updateChild();
//or
$slider.reset()
)
Thanks
Mike
slideWidth is stated to be required for horizontal sliders but is overruled with bxslider's own calculations even if provided.
I would generalise and say bx-slider tends to be a little greedy in expanding it's viewport width and since version 4 a little prone to error in calculating it's height, at least in my experiences with it. Might be nice to have a toggle to prevent it from applying styles except those necessary to transition the slides so that you can easily override with your own stylesheets, but the need for the overriding styles is heavily driven by the issue above.
Hi,
first of all great work, I love this slider script, and I bought you a beer!
any idea why therer's a slight pause every now and then on a horizontal ticker:
http://www.erikbijma.nl/
I thought it might be the black and white script, but I disabled it locally and it still happens
appreciate the help thanks
Hi. I'm not very tech guy and I'm totally lost here. I'd appreciate any help/suggestion.
I've got bxslider working on my Twitter Bootstrap based html. It works beautifully on IE, Chrome, FF, Safari.
But somehow once I uploaded it up on my web server, it stopped working with an error like this:
TypeError: $(...).bxSlider is not a function .
Whatever JS I put gets shown as the error. Currently it is like this:
slideargin: 5
Oh, my site is here;
http://tokyo-flaneur.com/dl/donner/index.html
Any ideas?
Thanks.
The following fixes the issue
/**
* Updates the direction controls (checks if either should be hidden)
*/
// RK: fixed bug with showing nav arrows when only one item in list
var updateDirectionControls = function(){
// if infiniteLoop is false and hideControlOnEnd is true
if(!slider.settings.infiniteLoop && slider.settings.hideControlOnEnd){
slider.controls.prev.removeClass('disabled');
slider.controls.next.removeClass('disabled');
// if first slide
if (slider.active.index == 0){
slider.controls.prev.addClass('disabled');
}
if (slider.active.index == getPagerQty() - 1) {
slider.controls.next.addClass('disabled');
}
}
}
If you have a slider like:
$('#home-slider').bxSlider({
pager: false,
auto: true,
autoHover: true,
pause: 5000
});
When you interact with the slider via next/prev then move away the slider does not resume the auto process.
Hi,
there are often the need of placing the captions outside the slider. The parameter captionsSelector seems to be gone. How can I individually place the captions now pls?
Thx
Regards
Wulle
I see most sites are using hover event instead of click event. It can let user no need to click to view picture.
Also, you can enable both two event: click hover
It's so easy to add this function.
I have yet to look into this issue myself, it may be to do with my configuration. but when choosing a custom selector for my controls to be placed into, the controls appear twice and break their function (That is; their are 2 "bx-next" elements).
// CONTROLS
controls: true,
nextText: ' ',
prevText: ' ',
nextSelector: '.slidecontrols .icon-chevron-right',
prevSelector: '.slidecontrols .icon-chevron-left',
autoControls: false,
startText: 'Start',
stopText: 'Stop',
autoControlsCombine: false,
autoControlsSelector: null,
When you insert select box inside slider, it cannot be selected. This only happen in Firefox 15.0.1.
On chrome it's just fine. Please help.
I would like to have tooltips appear on hover over the pager thumbnails. Is the wrapper possibly capturing the hover events and disabling this functionality? I would really like to use my favorite jquery tooltips with your great slider.
Please see the link. My
Cheers,
Eric
On my page I give custom css to the bx-viewport element:
width: 460px;
margin: 0 auto;
I HAVE to set my slideWidth to 400px (or smaller), or my browser crashes... :/
It's probably an edge case, but it's weird that certain css is able to crash the plugin.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.