CODEWITHSUNDEEP
jquerycssbxslider
Jerielle
Jerielle

Reputation: 7520

How to apply a class in the current slide using bxslider?

I need a little help here. I am trying to use Bootstrap pagination for my bxslider banner and I successfully manage to combine them. Now what I need is to apply a class 'active' in the current page number. I am trying yo use the option 'onSlideAfter' but I don't know how to get the current page.

This is my codes for the pagination:

<div class="pull-right">
    <div id="bx-pager">

        <nav>
          <ul class="pagination">
            <li><a href="#" id="slider-prev"><span class="sr-only">Previous</span></a></li>
            <li><a data-slide-index="0" href="">1</a></li>
            <li><a data-slide-index="1" href="">2</a></li>
            <li><a data-slide-index="2" href="">3</a></li>
            <li><a data-slide-index="3" href="">4</a></li>
            <li><a href="#" id="slider-next"><span class="sr-only">Next</span></a></li>
          </ul>
        </nav>
    </div>
</div>
<div class="clearfix"></div>

Here's my js:

$('.bxslider').bxSlider({
    auto: false,
    autoControls: false,
    captions: false,
    responsive: true,
    useCSS: false,
    speed: 2000,
    controls: true,
    pager: true,
    mode: 'fade',
    slideMargin: 10,
    pause: 10000,
    easing: 'ease-in',
    nextSelector: '#slider-next',
    prevSelector: '#slider-prev',
    pagerCustom: '#bx-pager',
    onSlideAfter: function() {
        alert('yehey new slide');
        //dont know how to apply a class to the current page number
    }
});

And in my css I want to add a class like this

.page_active { color: maroon; }

How can I do that?

Upvotes: 0

Views: 2308

Answers (1)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

the onSlideAfer callback has 3 arguements function($slideElement, oldIndex, newIndex), you can use the newIndex to determine the page number and addClass to the li.

Try, (untested, add a fiddle so we can try it out)

$('ul.pagination li a[data-slide-index='+ newIndex +']').addClass('page_active');

See demo below, It did work well,

$('.bxslider').bxSlider({
  auto: false,
  autoControls: false,
  captions: false,
  responsive: true,
  useCSS: false,
  speed: 2000,
  controls: true,
  pager: true,
  mode: 'fade',
  slideMargin: 10,
  pause: 10000,
  easing: 'ease-in',
  nextSelector: '#slider-next',
  prevSelector: '#slider-prev',
  pagerCustom: '#bx-pager',
  onSlideAfter: function($slideElement, oldIndex, newIndex) {
    $('ul.pagination li a').removeClass('page_active').filter('[data-slide-index='+ newIndex +']').addClass('page_active');
  }
});
.page_active {
  color: maroon;
  border: 1px solid maroon;
  padding: 2px;
}

.pagination li { display: inline-block; margin: 2px; list-style: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<ul class="bxslider">
  <li>
    <img src="http://bxslider.com/images/730_200/hill_trees.jpg" style="width: 40%; height: 40%;" />
  </li>
  <li>
    <img src="http://bxslider.com/images/730_200/me_trees.jpg" style="width: 40%; height: 40%;"  />
  </li>
  <li>
    <img src="http://bxslider.com/images/730_200/houses.jpg" style="width: 40%; height: 40%;"  />
  </li>
</ul>
<div id="bx-pager">

  <nav>
    <ul class="pagination">
      <li><a href="#" id="slider-prev"><span class="sr-only"></span></a>
      </li>
      <li><a data-slide-index="0" href="">1</a>
      </li>
      <li><a data-slide-index="1" href="">2</a>
      </li>
      <li><a data-slide-index="2" href="">3</a>
      </li>
      <li><a href="#" id="slider-next"><span class="sr-only"></span></a>
      </li>
    </ul>
  </nav>
</div>

Upvotes: 1

Related Questions