8

My designer put a bxslider to scroll through 3 divs nicely on my page. When the page runs, in the html I see it generates 6 divs on the page. It shows div 3, div2, div1, div3, div2, div1.

Just because the duplicated fields on my page now mess up my programing.

Is that neccesary, and is there any way I can touch the code that it shouldn't duplicate my divs?

The page is full of complex code , with an ajax passing the data-serialize to a post form. Becuase it's all duplicated, now all fields are coming through as 'value,value'. Therefore it's not giving me accurate respones, and well as undefined when it's supposed to be numeric.

My form posts looks like this:

function submitCart () {
$.post(
"scripts/savecart.asp",
$("#form1").serialize()
);}

How could I add that not bx- to it?

user1899829
  • 397
  • 1
  • 3
  • 14
  • Without some kind of code, we can just pass the question and do nothing. – drip Nov 04 '13 at 20:43
  • The page is full of complex code , with an ajax passing the data-serialize to a post form. Becuase it's all duplicated, now all fields are coming through as 'value,value'. Therefore it's not giving me accurate respones, and well as undefined when it's supposed to be numeric. – user1899829 Nov 04 '13 at 21:30
  • And you can't remove the .bx-clone elements from your serialization data? – isherwood Nov 04 '13 at 21:58
  • In my post, I am trying to get Post[field1] and post[field2], in response, it is passing in field1 = 'value,value', and field2='value,value'. is there any way I can make those fields only come through once? – user1899829 Nov 04 '13 at 21:59
  • Something like $('.bxslider li:not(.bx-clone)') should do. – isherwood Nov 04 '13 at 22:05

7 Answers7

14

As commented in the source code of bxSlider:

if infinite loop, prepare additional slides

So I was able to fix this by adding infiniteLoop: false to the config object:

$(".js-slider").bxSlider({
    infiniteLoop: false
});
gorodezkiy
  • 3,299
  • 2
  • 34
  • 42
4

BxSlider duplicates elements to allow infinite scrolling, etc. For example, say you only have two elements in your slider. Element one might be sliding out on the left, but also sliding in on the right. Therefore, duplicates are required.

If this is a problem, you can usually interact with the duplicates using their bx-clone classes. If you could clarify the actual problem, we could probably give more specific advice.

Update: To eliminate cloned elements from your set, try something like:

$('.bxslider li:not(.bx-clone)')....
isherwood
  • 58,414
  • 16
  • 114
  • 157
1

I had such problem with bx-clone I want to use it for an image gallery. So I had a thumbnail image slider and for slider I used bx-slider and on each click on small image , that image in bigger size must show in a div , But on bx-clone clicked nothing happened

I solved that problem with this :

 var slider = $('.bxslider').bxSlider({
        minSlides: 4,
        maxSlides: 4,
        slideWidth: 92,
        moveSlides: 1,
        pager: false,
        slideMargin: 10,

        onSliderLoad: function(){
            $('li.bx-clone').click(function() {

              /** your code for bx clone click event **/

            });  
           }
        });
Amir Amiri
  • 441
  • 1
  • 8
  • 14
1

Adding to @antongorodezkiy's answer, there is a way to have infiniteLoop: false and still get a non-stopping slide changing: using the onSlideAfter event of the last slide you can, after a few seconds, go back to the first slide and re-start the auto mode:

var pauseTime = 4000; //Time each slide is shown in ms. This is the default value.
var timeoutId;
var slider = $('.bxslider').bxSlider({
    auto:         true,
    infiniteLoop: false,
    pause:        pauseTime,

    onSlideAfter: function ($slideElement, oldIndex, newIndex) {
        if (newIndex === slider.getSlideCount() - 1) { //Check if last slide
            setTimeout(
                function () {
                    slider.goToSlide(0);
                    slider.startAuto(); //You need to restart the "auto" mode
                },
                pauseTime //Use the same amount of time the slider is using
            );
        }
        else { //In case the user changes the slide before the timeout fires
            clearTimeout(timeoutId);
            slider.startAuto(); //Doesn't affects the slider if it's already on "auto" mode
        }
    }
});

The difference between this solution and the infiniteLoop: true option is that instead of smoothly transitioning back to the first slide as if it was the next, the slider quickly "rewinds" until reaching the first slide.

Raphael
  • 1,847
  • 1
  • 17
  • 29
1

for above query: Is it possible to keep having the infinite loop, but remove the clones?

try using below code: if more than 1 item infiniteloop: true else :false 

infiniteLoop: ($j("...selector...").length < 2) ? false : true,
Nimit Soni
  • 21
  • 3
0

Just to answer here, so if some one is struggling and cannot fix the duplication issue. I was facing the same problem that all of my HTML from my page was duplicating inside the first slide under the image tag like bellow: 

<img src="public/admin/scr3.png" ><div>..... all of my page HTML...</div></img>

I just found that I was writing the image tag not properly

Meaning my code was something like this for image tag

<img src="public/admin/scr3.png" >

I just replaced my image tag with valid HTML like bellow: 

<img src="public/admin/scr3.png" />

and it fixed the content duplication issue.

Hope it will help someone.

Cheers!

mubashermubi
  • 8,846
  • 4
  • 16
  • 30
0

I´m not sure if it´s the same issue I was facing, but here´s my case: My code was using bx slider together with fancybox. And it was duplicating my slides. The solution was to put the secodary code (fancy box), which was generated in my image loop, inside the

  • tag. That did it for me.
    • Jorge Mauricio
    • 411
    • 6
    • 18