Bootstrap Snippet Slider: less than 2 pictures, hide the navigation using HTML jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="page-section">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="carousel-item active">
                <img class="d-block img-fluid" src="http://lorempixel.com/output/food-q-c-1920-560-5.jpg"
                     alt="First slide">
                <a href="#" class="carousel-caption d-none d-md-block">
                    <span>Dachzeile</span>
                    <h3>First slide label</h3>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </a>
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="http://lorempixel.com/output/nature-q-c-1920-560-8.jpg"
                     alt="Second slide">
                <a href="#" class="carousel-caption d-none d-md-block">
                    <span>Dachzeile</span>
                    <h3>Second slide label</h3>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </a>
            </div>
            <div class="carousel-item">
                <img class="d-block img-fluid" src="http://lorempixel.com/output/nature-q-c-1920-560-3.jpg"
                     alt="Third slide">
                <a href="#" class="carousel-caption d-none d-md-block">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  $(document).ready(function slider__pictureNumber() {
    var $elem = $('.carousel-inner');
    var $slider = $elem.closest(".carousel");
    var counter = $("div", $elem).length;
    var carouselIndicators = $slider.find('.carousel-indicators');
    var carouselControlPrev = $slider.find('.carousel-control-prev');
    var carouselControlNext = $slider.find('.carousel-control-next');
    if (counter < 2) {
      carouselIndicators.hide();
      carouselControlPrev.hide();
      carouselControlNext.hide();
    }
  });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Slider: less than 2 pictures, hide the navigation"
Bootstrap 4.0.0 Snippet by blackxie

Related: See More

Questions / Comments:

"Slider: less than 2 pictures, hide the navigation" Bootstrap 4.0.0 Snippet by blackxie

Related: See More

Questions / Comments:

"Slider: less than 2 pictures, hide the navigation"
Bootstrap 4.0.0 Snippet by blackxie