CODEWITHSUNDEEP
javascriptjqueryhtml
Steve W.
Steve W.

Reputation: 55

bxslider - slides not being refreshed properly with JQuery

I have a carousel that has different HTML messages and we want the users to "slide" through the messages so they view each set of slides. We are using bxSlider and everything is working fine until I change the content of the slide using JQuery. When the user clicks on the X the content of the slide will change, but when the user reaches the end of the slides and slide number 2 is being shown again, slide 2 displays the original HTML content until slide 1 becomes the focus then the content switches back to the JQuery refresh like I want.

My explanation may be confusing but you can see my fiddle here:
http://jsfiddle.net/t6dKJ/
Steps to recreate:

  1. Click X on approvals box
  2. Click the left arrow to go backward through the slides
  3. Watch the approvals box change

HTML for a slide:

<div class="slide" id="approvals">
  <div class="panel tip-panel" id="num-message">
    <div class="panel-head"><h2>APPROVALS</h2><div class="close">X</div></div>
    <div class="panel-body">
    <p><span id="number">2</span> Approvals pending</p>
    <a href="#" class="link">Link to Approvals</a>
    </div><!-- End Panel Body -->
</div><!-- End Panel -->
<br>
<br>
</div>

JS options for the bxSlider and the click event for a refresh:

$('.boxslider').bxSlider({
    slideWidth: 320,
    minSlides: 2,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 10,
    infiniteLoop: true,
  });
$('#approvals').on('click', 'div.close', function(){
    var message = $(this).closest('.tip-panel').find('.panel-body');
    $(message).html('4');
});

Solution I cant use:
Switch infiniteLoop to false. It is a requirement that the slider keeps scrolling through the slides indefinitely.

Reason for the refresh:
Eventually when they click the refresh an AJAX call will be made to update the content of the slide. Since replacing the content with 4 isnt working we havent tried to implement the AJAX call yet.

Things I have tried:
Reloading the slider doesnt seem to work when I tired this:
http://bxslider.com/examples/reload-slider-settings
which was suggested on this thread:
bxslider not working properly for dynamically loaded content

Upvotes: 1

Views: 1074

Answers (1)

Trevor
Trevor

Reputation: 16116

You need to access and change the html located in the cloned version (the element that shows up later after moving forward/backward) of the slide you are changing.

Example: 

$('.boxslider').bxSlider({
        slideWidth: 320,
        minSlides: 2,
        maxSlides: 3,
        moveSlides: 1,
        slideMargin: 10,
        infiniteLoop: true,
      });
    $('#approvals').on('click', 'div.close', function(){
        var message = $(this).closest('.tip-panel').find('.panel-body');
        $(message).html('4');
        $('.bx-clone#'+$(this).closest('.slide').attr('id')).find('.tip-panel .panel-body').html('4');
    });

Fiddle

Upvotes: 1

Related Questions