stevenwanderski / bxslider-4 Goto Github PK

Hello
I need make scroll from left to right
any Idea ?
senk.

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

How to get slideIndex from slideElement in onSlideAfter callback?

Thank you

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();
    }
});

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 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

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.

http://jsfiddle.net/4L9X9/

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,

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

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

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

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

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.

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?

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,
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 ?

Is there an equivalent public method in v4 for v3's reloadShow()? If not, how would one achieve creating new slideshows using AJAX?

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; }

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!

This is useful. because it's useless to show next/prev when mouse is out of slide.
Please add this option.

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

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

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.

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,
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 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

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');
            }
        }
    }

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,
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 $slider = $('.theSlider').bxSlider({...})

after ajax update the slider...
$.ajax(...).done(

$slider.updateChild();
//or
$slider.reset()
)

Thanks

Mike

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

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.

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
});

At http://bxslider.com/options, you state that the default value for swipeThreshold is 500, yet in the JS, it's 50.

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

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.

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.

If you have a slider like:

When you interact with the slider via next/prev then move away the slider does not resume the auto process.

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.

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,

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.

Please see the link. My

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.

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.

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.

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

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

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?

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.

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.

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.