Search code examples
jquerybxslider

Disable click on bxslider pager


I want to disable click event on bxslider pagers without touching core bxlslider files.

enter image description here


Is it possible.. ? Please guide me in right direction.
Thanks in advance.


Solution

  • As per my understanding, you only want to use the bullets to denote the current slide. That is not the purpose of bxslider's pager bullets. I would suggest taking this approach:

    1. Disable bxslider's pager bullet
    2. Add a custom ul element with n number of li elements, where n is the number of slides. You can use javascript to generate the li elements dynamically.
    3. Use css to make all li elements hollow circles as per your design requirements.
    4. Now, using bxslider's onSlideAfter callback, add a class e.g. 'active' class to corresponding li element, while removing it from all sibling li elements. Use css to highlight this 'active' li item.

    I can post the code, if you find this approach useful.