How to check if auto-play is enabled in bxslider

Question

Once a button (#my-button) is clicked, I want to check if the auto-play feature is enabled for the slider. I tried below, but it returned undefined object

var slider = $('.bxslider').bxSlider({
  auto: true,
  autoControls: true
});

$('#my-button').click(function(){
    console.log(slider.auto);
});

Answer 1

Besides the obvious way of determining if auto is enabled (ie. See if slider is moving by itself,) we can see which of the autoControl buttons, .bx-start and/or .bx-stop has the class .active.

SNIPPET

var slider = $('.bx').bxSlider({
  auto: true,
  autoControls: true
});

$('.status').click(function() {
  if ($('.bx-stop').hasClass('active')) {
    console.log('Auto is inactive');
    $('.display').val('Inactive');
  } else {
    console.log('Auto is active');
    $('.display').val('Active');
  }
});

img {
  display: block;
  margin: 0 auto;
}

button {
  font: inherit;
}

<link href='https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css' rel='stylesheet'>


<ul class='bx'>
  <li class='slide'><img src='http://placehold.it/250x150/000/fff?text=1'></li>
  <li class='slide'><img src='http://placehold.it/250x150/00f/eee?text=2'></li>
  <li class='slide'><img src='http://placehold.it/250x150/0e0/111?text=3'></li>
  <li class='slide'><img src='http://placehold.it/250x150/f00/fff?text=4'></li>
  <li class='slide'><img src='http://placehold.it/250x150/fc0/000?text=5'></li>
  <li class='slide'><img src='http://placehold.it/250x150/fff/000?text=6'></li>
</ul>


<button class='status'>Status</button>
<output class='display'></output>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js'></script>