CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapcss
ivansimonov007
ivansimonov007

Reputation: 105

How to remove or hide the pagination for the bootstrap 3 slider?

If the slide is less than or equal to 1 - hide the pagination for bootstrap 3 carousel

Now the pagination of all the sliders is hidden, but only the second slider (1 item)

I try to solve this task so, but this code does not work

My code - Fiddle

function carouselHideIndicators() {

  $('.carousel').each(function() {

    var carouselItems = $('.carousel-inner item');

    if (carouselItems.length <= 1) {
      $('.carousel-indicators').hide();
    } else {
      $('.carousel-indicators').show();
    }
  });

}
$(function() {
  carouselHideIndicators();
});
.carousel {
  border: 1px solid #f00;
  margin-bottom: 25px;
}
img {  
  width: 50%;
  margin: 0 auto;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<!-- slider 1 -->
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://via.placeholder.com/250x250?text=Slider-Main-1" alt="">
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/250x250?text=Slider-Main-1" alt="">
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/250x250?text=Slider-Main-1" alt="">
    </div>
  </div>
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"><img src="http://via.placeholder.com/150x150?text=1" alt=""></li>
    <li data-target="#myCarousel" data-slide-to="1">
      <img src="http://via.placeholder.com/150x150?text=2" alt="">
    </li>
  </ol>
</div>

<!-- slider 2 -->
<div id="myCarousel2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="false">
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://via.placeholder.com/250x250?text=Slider-Main-2" alt="">
    </div>
  </div>
  <ol class="carousel-indicators">
    <li data-target="#myCarousel2" data-slide-to="0" class="active"><img src="http://via.placeholder.com/150x150?text=1" alt=""></li>
  </ol>
</div>

Thank you.

I will be glad to any help

Upvotes: 2

Views: 801

Answers (1)

Sergio Diez
Sergio Diez

Reputation: 409

The problem is that you are recovering the global object via the queries. I mean, you iterate through the .carousel items with the following sentence:

$('.carousel').each(function() {

Then, inside the function you are looking for

var carouselItems = $('.carousel-inner item');

This is looking for all elements that match that pattern in the whole document, not inside the iteration, so you have to look inside the current iteration children to get the items.

To do that use $(this).children() to access the children of the current iterated element. In this case get your .carousel-inner elements inside current .carousel and then the .item elements.

    var carouselItems = $(this).children('.carousel-inner').children('.item');

The same has to be done when showing/hiding the elements as you only want to modify the current iteration so:

if (carouselItems.length <= 1) {
  $(this).children('.carousel-indicators').hide();
} else {      
  $(this).children('.carousel-indicators').show();
}

I updated the fiddle with the changes: https://jsfiddle.net/6oyeaut4/11/

Hope it helps! Probably the .children() chaining could be replaced with a filter

Upvotes: 1

Related Questions