stevenwanderski / bxslider-3 Goto Github PK

Hello,

I've got a question. Can you let multiple slideshows slide add the same time?

Ruben

Hi,

I have a carousel working fine moving 3 slides at a time with the default mode:horizontal but if i change this to mode:fade then it only shows 1 item.

Any ideas why?

A.

infiniteLoop: false option does not work except in IE. I have tried in IE8 and it works properly.In other browser vendors, it continues to loop infinitely.

in line 1031 the final span isn't closed correctly (<span> instead of </span>).
While Chrome and Firefox don't care the short-pager in IE8 isn't rendered correctly (only the total amount of slides is shown)

If I want to use the loop option, the js will add 2 new

Excellent plugin!

Is it possible to write a link to a specific 'slide'?

Example:

Thanks in advance!

First off... your slider is awesome. Words cannot express how amazing this plugin is for jQuery.

Second... I was trying to get creative with your slider and attempted to create something like SlideViewer Pro -- http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/ where you would have a bxSlider controlled by a row of thumbnails (Thumbnails As Pager), and also show only 3 or 4 of the thumbnails and use the "Display / move multiple slides at once - example two" example.

My jquery skills are limited at best. Any help would be awesome.

JAVASCRIPT
$(function(){

        var slider = $('#slides2').bxSlider({ controls: false, pager: false});

        $('#slide-thumbs a').click(function() {
            var thumbIndex = $('#slide-thumbs a').index(this);
            slider.goToSlide(thumbIndex);
            return false;   
        });


        /*$("#slide-thumbs").bxSlider({
            pager: false,
            displaySlideQty: 3,
            moveSlideQty: 3

        });*/
    });

When i use it I get the error invalid array length?

The slider renders good, but when i click on the arrow this error shows and than it does not work anymore.

I use it with div's and it is in a asp.net user control further i have linked the jquery link just as the tutorial.

Could you please help?

code below
------------------------------------------ start here--------------------------------------------------

I use this, because i have a link to jqeury from google in master page

<div id="slider1">
    
        <div style="width: 50px; height: 50px;">
           <img src="http://farm4.static.flickr.com/3011/3047035327_ca12fb2397_s.jpg" height="75" width="75" alt="Tall Glow" />
        </div>
        <div style="width: 50px; height: 50px;">
          <img src="http://farm4.static.flickr.com/3011/3047035327_ca12fb2397_s.jpg" height="75" width="75" alt="Tall Glow" />
        </div>
        <div style="width: 50px; height: 50px;">
        <img src="http://farm4.static.flickr.com/3011/3047035327_ca12fb2397_s.jpg" height="75" width="75" alt="Tall Glow" />
        </div>
        <div style="width: 50px; height: 50px;">
         <img src="http://farm4.static.flickr.com/3011/3047035327_ca12fb2397_s.jpg" height="75" width="75" alt="Tall Glow" />
        </div>
   
</div>
</div>

Hello, bxslider is fantastic!
I have a small problem, how can I use two sliders on the same page and customize them with two different
css?
The second slider inherits its appearance from the first slider! How can I fix this?

Thank you very much

I currently have my moveSlideQty set to 6 and hideControlOnEnd set to true. I have 30 items in my slider, but when I get to items 25 - 30, the 'Next' control is not hidden. If I change the moveSlideQty to 1 then it works properly.

Please read my question over at stack overflow: http://stackoverflow.com/questions/7645803/bxslider-issue-jumping-first-slide-hidden

I'm using the slider, and it's really cool, only thing is that when trying to play HTML5 video on the ipad the movie doesn't work, it just hangs on the loader. Taking bxlider away resolves it.

Wondering if anyone had a good tip for this?

I'm iterating through a wrapped set and applying the slideshow multiple times in a page, all with one set of navigation controls. How am I expected to page the correct one? If it was just a simple method without requiring a variable, I could sniff the active class and just do that one, but I have no idea how I would page whatever individual slideshow I want using this.

hideControlOnEnd does not work with displaySlideQty:5 and moveSlideQty:5

Example here: http://kummerpartner.xuul.org/projekte/wohnen-arbeiten/

Quick and dirty solution:

On ~ line 1149 under // check next

Replace this:
if(currentSlide == lastSlide)

with something like this:
if($children.length < 6 || currentSlide == 5 && $children.length < 11 || currentSlide == 10 && $children.length < 16 || currentSlide == 15 && $children.length < 21)

Any better ideas are welcome.

Hi! I'd first like to thank you for all of your hard work with bxSlider, and for continuing to support it.

I'm trying to have an embedded video pause or unload when the user slides away from it.

Vimeo has an API, but I'm not sure how to make it work with bx. Is it even possible?

Could I use a callback function like onBeforeSlide and have that trigger a Vimeo API call?

Thanks for your time,
Danny

resolved.

Hi I am getting the following error in Chrome:

jquery.bxSlider.js:602Uncaught TypeError: Object has no method 'unwrap'.

I am using Chrome 13.0.782.112 on Mac OSX.

Any ideas?
GazJoy.

Hi

This is not a issue, but i think it´s something good to have in your plugin!!
Can we have something similar of this function hideControlOnEnd , but instead of hide the previous/next buttons, just disable them, i mean they still visible, but disabled?

Many thanks in advance!!!!

I have the following code:

$(".view-id-slideshow.view-display-id-block_4 ul:first").bxSlider({
controls: false,
mode: "fade",
auto: true,
displaySlideQty: 3,
moveSlideQty: 3
});

And it works but I can see only 1 image in the slide (instead of 3).
How can I fix it?

I am trying to change the style of the slider but the changes are not taking place like I want to make the pager square without the numbers but nothing is happening.

This plugin works great, but when slides have different amounts of content there can be a large amount of whitespace underneath if the currently visible slide has less content than others.

Currently I'm showing two slides, and the slider scrolls one slide per click.

Is there a way to identify both of the slides that are currently visible, for example by adding a class such as 'current'? That way I could then resize the height of the bxSilder based upon the height of the currently visible slide with the most content.

Does that make sense? Is there a way to achieve this?

Thanks.

Hey,

i just started using bxSlider for one of my projects and it's really superb.
But i ran into a little problem when i tried to create a slideshow in a fancybox (http://fancybox.net/) modal window.
I tried using the most basic options for bxSlider; just auto:true and pager: true.
The pager gets displayed so the script is obviously called. But no slides are shown.
Looking at the source of the page i noticed:

<div class="bx-wrapper" style="width: 0px; position: relative;"><div class="bx-window" style="position: relative; overflow: hidden; width: 0px;">

So the slider seems to calculate the wrong width for the wrapping container.

Is this something that can be fixed on bxSlider's side? Or is this more likely an issue on fancybox's side?

Hi i am using the bxslider on this site http://www.patersonsimons.com/sales/jcb-teletruk
at bottom there are thumbnails slider. in code actually there are 22 slides but when it renders with bxslider it generates 23 slides if i us

moveSlideQty: 1,

this scenrio gets more worse by creating 8 extra

Hello Steven,

bxslider is the best plugin I found so far for sliding thumbnails, seriously, awesome work and very nicely presented!

I have a question and hopefully you can help me out. I will like to use the "goToSlide" function to call a specific thumbnail

no by a "#number" as its by default but like an anchor to a specific thumbnail either by using a class or ID, or maybe other method?

the reason why is because I will be populating the thumbnails through expression engine. And I will like to add something like a section filte, that when clicked, it scrolls up to a custom starting point. But as the number of thumbnails may vary for each section, I am better of setting a starting point with a custom anchor as explained above.

Hope this is something not hard to achieve I will greatly appreciate your feedback on this. Thanks in advanced!!

-Manuel

Hi!

Thanks for this awesome script, really useful!

I've implemented the script with the thumbnails (method 1), and the auto play option, however the class "pager-active" is not added when the slide change.

Is there any way to correct this?

In addition, is there any way to make the slider to continue playing after an action has been made?

Thank you so much!

Hi,

I'm using both galleria.js and bxslider.js on my site. I had an issue with IE8 reporting an "invalid property" error when clicking through thumbnails in the galleria classic theme which seemed to be caused by using bxSliders version of "jQuery.fx.prototype.cur" method instead of the jquery version in the "animate" method. Specifically the following part of jquery's "animate" method: start = e.cur() sets start to NaN.

jQuery.each( prop, function( name, val ) {
    var e = new jQuery.fx( self, opt, name );

    if ( rfxtypes.test(val) ) {
        e[ val === "toggle" ? hidden ? "show" : "hide" : val ]( prop );

    } else {
        var parts = rfxnum.exec(val),
            start = e.cur();

        if ( parts ) {
            var end = parseFloat( parts[2] ),
                unit = parts[3] || ( jQuery.cssNumber[ name ] ? "" : "px" );

            // We need to compute starting value
            if ( unit !== "px" ) {
                jQuery.style( self, name, (end || 1) + unit);
                start = ((end || 1) / e.cur()) * start;
                jQuery.style( self, name, start + unit);
            }

            // If a +=/-= token was provided, we're doing a relative animation
            if ( parts[1] ) {
                end = ((parts[1] === "-=" ? -1 : 1) * end) + start;
            }

            e.custom( start, end, unit );

        } else {
            e.custom( start, val, "" );
        }
    }
});

This is while galleria is trying to animate the "left" property (of some thumbnails I think).

If I comment out the bxSlider version of the "jQuery.fx.prototype.cur" method everything works (bxSlider and galleria). Commenting out bits of code that I don't understand doesn't sound like a good solution to me :~)

What does your version "jQuery.fx.prototype.cur" method do and what might I be breaking with this "solution"?

I'm using bxSlider 3.0, jquery 1.5.2, galleria 1.2.3.

When you first load bx-slider you would expect that onFirstSlide would be called (as you are on the first slide unless set differently). This is not the case. I have had to set slider.goToFirstSlide(); after the initialisation in order to trigger the desired behaviour.

I've used a very simple execution of the slider with a set of thumbnails contained in

I've got a slider that I need to be able to click a LI element to select it. Right now I'm just .addClass('selected') to the LI in question, and it works so long as the LI started visible, or close to visible.

When the LI starts not visible (and it seems start at the 5th non-visible entry, while I have 8 visible by default), the results of the addClass() don't actually take effect until you scroll around a bit. When browsing through the DOM with Chrome's dev tools, I find that the class 'selected' wasn't actually added to the LI element.

Any ides what's going on here? I can't see any difference between the LI elements.

Hello,

Our client, who resizes every website encountered for easier reading, noticed that the slider on his site didn't display as expected after the sizing up. I posted a quick (< 60 seconds) screencast to show what is happening. Safari and Chrome have this problem. Firefox does not.

http://screencast.com/t/Vre8HYrV3qv

May not be an issue with bxslider, but just wanted to bring it to your attention. If there is a fix or workaround, would love to hear it.

The site: http://wineexcursion.com/

Thanks!

Just wondering if there's a way to speed the ticker up on hover?

Or perhaps have the controls show in ticker mode, which control the speed on press.

/**
* Handles hover events for ticker mode
*/
function setTickerHover(){
// on hover stop the animation
$parent.hover(function() {
if(autoPlaying){
options.tickerSpeed = options.tickerSpeed * 2 ;
//base.stopTicker(false);
}
}, function() {
if(autoPlaying){
options.tickerSpeed = options.originalTickerSpeed ;
base.startTicker(false);
}
});
}

Maybe even in 7, but I don't have an IE7 test install at the moment.

Using the fade transition will cause an error of (paraphrased) "this object does not support this method" which points down in to an area of jQuery that handles animation. No amount of DOM or CSS changes would work.

I made the fade calls a bit more explicit (ie: to use fadeIn & fadeOut instead of fadeTo). This change is working for me in all browsers.

--- jquery.bxSlider.js
+++ (clipboard)
@@ -670,10 +670,10 @@
                    top: 0,
                    left: 0,
                    zIndex: 98
-               });                 
+               });
                $outerWrapper = $parent.parent().parent();
-               $children.not(':eq('+currentSlide+')').fadeTo(0, 0);
-               $children.eq(currentSlide).css('zIndex', 99);
+               $children.eq(currentSlide).css('zIndex', 99)
+                   .siblings().fadeOut(0);
            }
            // if captions = true setup a div placeholder
            if(options.captions && options.captionsSelector == null){
@@ -919,9 +919,9 @@
         */     
        function setChildrenFade(){
            // fade out any other child besides the current
-           $children.not(':eq('+currentSlide+')').fadeTo(options.speed, 0).css('zIndex', 98);
+           $children.not(':eq('+currentSlide+')').fadeOut(options.speed, 0).css('zIndex', 98);
            // fade in the current slide
-           $children.eq(currentSlide).css('zIndex', 99).fadeTo(options.speed, 1, function(){
+           $children.eq(currentSlide).css('zIndex', 99).fadeIn(options.speed, function(){
                isWorking = false;
                // ie fade fix
                if(jQuery.browser.msie){

Hi,

Many thanks for this awesome plugging, I really think is amazing.

I was wonder if would be possible to go through different pages(

When a form input is within the slider it gets duplicated and inserted in a new slide at the start (presumably for the infinite loop). However even with the infinite loop set to false, this still happens.

The result is 2 ID's on the page that are needed to identify the input which makes it very difficult to target specific inputs.

This is compounded by having a <label for="id-of-input">Label</label> attached to the element as when this is clicked it highlights the duplicated input, which is hidden from view and empty.

To resolve this, you could simply prepend a string such as bx- to the ID when duplicating it.

If you have any solutions for me in the interim, please let me know.

Hello there,

I'm using your bxSlider, which is awesome btw, thanks, and I'm attempting to have pager controls for the slider, which are outside of the slider. I've listed the code (minus some formatting, since I wasn't sure how to post code here) below, which shows what I'm attempting to do. I'd really appreciate if you wouldn't mind giving me an idea what I'm doing wrong here.

Thanks!

(slider html)
div id="slider1"
div slide one content /div
div slide two content /div
div slide three content /div
div slide four content /div
div slide five content /div
/div

(outside pager html)
div class="slider1nav"
a href="" id="slideone">Link 1
a href="" id="slidetwo">Link 2
a href="" id="slidethree">Link 3
a href="" id="slidefour">Link 4
a href="" id="slidefive">Link 5
/div

(jquery)
$(function(){
$('#slider1').bxSlider({
mode: 'fade',
controls: false
});
});
$('#slideone, #slidetwo, #slidethree, #slidefour, #slidefive').click(function(){
slider.goToSlide('.slider1nav a');
return false;
});

I've been trying to figure out how to make the pager links captions instead of numbers, I think it would allow for more creative uses of the BXSlider.

It would also be good to have this outside the slider.

There must be a nice clean way to do this, any ideas?

I'm playing around with the BX Slider and was wondering if there was a way to make the slider to continue playing even after an action has been made? I've seen this before in other sliders but wasn't sure if this was doable on this plugin. Many thanks!

I have a slideshow with 18 slides, and underneath are thumbnails that you can click to jump to a certain section of images within the slideshow. The goToSlide function assigned to each thumbnail works just fine, however if I click a thumbnail to jump to a section, the auto show will stop and I have to manually click Previous / Next. This would be no problem, however when I click Next it jumps to a random slide rather than going to the Next slide.

This isn't the first slideshow it's happened on, and I've tried everything I can think of to fix it. Any help you can offer would be appreciated.

Hi,

When I use bxslider in an https page, IE 8 pops up a warning with title "Security Warning" telling that the page tries to call a non-secure content in this (secure) page. You may find the related sample screenshot on this page: http://www.labnol.org/software/ie-security-warning-for-https-websites/13388/

Note that, when I remove the code for script call to jquery.bxSlider.min.js, then it does not give the same warning anymore.

How can I fix this issue by modifying bxslider javascript file or can you suggest any other solution?

Thanks & Regards,
Gorkem

Tried in Safari, Chrome, Firefox. The spinner will spin and then ask me to kill the page.

If I remove the script, everything works perfectly (except the slider of course).

<script src="{$workspace}/js/jquery.bxSlider.min.js" type="text/javascript"></script>

I'm using bxSlider (freshly downloaded) with jQuery 1.6.2 (latest). Everything works on my local machine, but after uploading it, I get this problem. If it matters, the host is in China. Totally stumped.

All the scripts that I'm using on the page:

<script src="{$workspace}/js/modernizr.js" type="text/javascript"></script>

<script src="{$workspace}/js/jquery.js" type="text/javascript"></script>

<script src="{$workspace}/js/jquery.bxSlider.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function(){

        var slider = $('#slider').bxSlider({
            pager: true,
            pagerSelector: '#my-pager',
            controls: false,
            mode: 'vertical',
            speed: 700,
            auto: true,
            pause: 5000
        });

        $('#go-prev').click(function() {
            slider.goToPreviousSlide();
            return false;
        });

        $('#go-next').click(function() {
            slider.goToNextSlide();
            return false;
        });
    });
</script>

Any helps appreciated! If you want to see the live problem: jinhuaguang.com.cn

In my script, I am dynamically loading the content for the inner slide divs from a mySql database using PHP.

I initialize the slider in the head of the HTML document:

     $('#slider1').bxSlider();
</script>

In the BODY of the document:

<?
$q = "SELECT * FROM featureContent ORDER BY show_order";
$r = mysql_query($q);
$countrows = mysql_num_rows($r);
if ($countrows != 0) {
    while ( $a = mysql_fetch_assoc($r) ) {
        $title = $a['title'];
        $bodytext = $a['bodytext'];
        echo "<div><h2>" .$title . "</h2>" . $bodytext . "</div>";
    }
}
?>
</div>

This works perfectly in every browser I have tested except IE 8 and earlier. (Can someone confirm if it works in IE 9+?) In IE 8, the content does not float left, and instead is stacked vertically, and the paging doesn't work.

I have determined the issue lies in the slider being intialized, and some reason it doesn't see the dynamically loaded divs. (I tested manually putting in the content and it works.) The strange thing is if I have 4 or more slides it works fine...?

Any ideas??

Hello,

i'm discovering your jquery plugin about bxslider, a great work and very clean api. Congratulations.

I've seen a strange thing on start of slide with IE, Firefox and Chrome, when i run the bxSlider the width taken is the width of "ul" i gave but the bxSlider take this value and the div content included in the "li" has a 40 pxs of the last item and the content on the "div" is on the right. When bxSlider has completed its first round the position of the "div" is normal and run well whithout problem of position. I added 40 pxs in the code when the css is initialized and run well at the start, but i don't like that. I've tried a modification about the diferents variables "origLeft" at the begining of the script but nothing occured.

....
// wrap the "ul" in div that acts as a window and make the "ul" uber wide
$parent
.wrap(....)
.wrap(...)
.css({
width: '999999px',
position: 'relative',
left: '-'+(origLeft)-40+'px'
});

Here is my params :

auto: true,
pager: true,
controls: false,
pause:5000

The html code is the same of the bxSlider page with the "ul" exemple, with a width of 170px

Have you any idea about this problem ?

regards

My page works well in IE8 but only one content is shown in IE9.

It seems that every content's width is set wrongly in IE9.
Every content's width becomes the width of the screen (1263px).

Here is the page elements rendered in IE8 and IE9.

IE8 (Good)
< UL style="POSITION: relative; WIDTH: 999999px; LEFT: -280px" id=springboardContainer_students>
< LI style="LIST-STYLE-TYPE: none; WIDTH: 140px; FLOAT: left; LIST-STYLE-IMAGE: none" class=pager>

IE9 (Bad)
< ul style="left: -2526px; width: 999999px; position: relative;" id="springboardContainer_students">
< li style="list-style: none; width: 1263px; float: left;" class="pager">

Who can help me? Or is there anyone else meeting the same problem?
Thanks very much.

Hey !!

I'd first like to thank you for all of your hard work with bxSlider, and for continuing to support it.

I have trouble with multi image sizes. Hoping I will get reply soon.

Thanks !!

I have added mode: 'fade' and nothing happens. The pictures don't even show up. When looking at the code everything is there and the transition is occurring, but the area is blank.

Any ideas?

$(function(){
$('#HomeSlider').bxSlider({
mode: 'fade',
auto: true,
controls: false,
speed: 1000,
pause: 5000
});
});

Hi,

I love BXSlider it's great, thank you for the work! This is my first time using Github so i apologise if this is the wrong place to be asking such questions like this...

Is it possible to slide a grid of thumbnails/text? For example, this: http://bxslider.com/examples/display-move-multiple-slides-once-example-two but a 3x3 grid instead of on just a single row?

Any help is much appreciated,

Thanks!

Hi,

I posted a full explanation here since I'm not 100% sure what is happening. http://stackoverflow.com/questions/8090563/colorbox-breaks-on-rel-attribute-when-bxslider-is-loaded

That said I think the problem is that both colorbox and bxslider are using the same $.data and bxslider is deleting something colorbox expects to be there.

I was trying to setup six sliders on a page for a special use - to show a user six different sets of photos for them to choose from... sort of like a lightroom... and it appears the code is only supporting two on a page...

If I remove the jquery code for the first 2 sliders, then the next two start working...

Any quick fix for this?

Thanks!

The height of div.bx-window is set inline, which means I can't adjust it outside of DOM/JavaScript. Currently it's being hard coded to 69px, I can't find where it's getting this value from but it's not nearly tall enough to handle the divs that are inside of it. Any suggestions?

hi there!

thanks for sharing your work!

unfortunately i cant predefine (check) radiobuttons inside bxslider.

anyone knows how to fix this issue?

thanks for helping.

till.

edit & solved:

radiobuttons have to be in a form. (took me the whole night.....)

till.