Bootstrap 4 - change carousel indicators for text

Navigation
1

I'm using Bootstrap 4 and I can not change the pointer to appear text in relation to the item. I've tried some options from other StackOverflow responses but none worked, if anyone can give a working code example, thank you. Note: I'm using Sass with webpack. 

<div class="container">
    <div id="carouselContent" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->
      <ul class="carousel-indicators">
        <li data-target="#carouselContent" data-slide-to="0" class="active">text1</li>
        <li data-target="#carouselContent" data-slide-to="1">text 1</li>
        <li data-target="#carouselContent" data-slide-to="2">text 2</li>
      </ul>

      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active text-center p-4">
          <h5>Text 1</h5>
          <p>
            text ...
          </p>
          <p>
            text ...
          </p>
        </div>
        <div class="carousel-item text-center p-4">
         <h5>Text 2</h5>
          <p>
            text ...
          </p>
          <p>
            text ...
          </p>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev" data-interval="4000">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next" data-interval="4000">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
    
asked by anonymous 30.10.2018 / 17:45

1 answer

1

I do not know if I understood correctly, but in case you want to "hide" the Setinha, and only show the text you need to change the element that will receive the class .sr-only once this class is to "hide" elements on the screen , but you leave the elements visible to Screen Readers (SR) screen readers.

View properties of class sr-only 

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

Note that this class was meant for the average user not to be able to see it on the screen, but leaves the element accessible to Screen Readers . Here you check the official documentation about this: link

So, to solve the problem, just remove the .sr-only class from the span that has the text and put the hidden attribute in span of the arrows. 

    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


    <div class="container">
        <div id="carouselContent" class="carousel slide bg-primary" data-ride="carousel">

            <!-- Indicators -->
            <ul class="carousel-indicators">
                <li data-target="#carouselContent" data-slide-to="0" class="active">text1</li>
                <li data-target="#carouselContent" data-slide-to="1">text 1</li>
                <li data-target="#carouselContent" data-slide-to="2">text 2</li>
            </ul>

            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active text-center p-4">
                    <h5>Text 1</h5>
                    <p>
                        text ...
                    </p>
                    <p>
                        text ...
                    </p>
                </div>
                <div class="carousel-item text-center p-4">
                    <h5>Text 2</h5>
                    <p>
                        text ...
                    </p>
                    <p>
                        text ...
                    </p>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselContent" role="button" data-slide="prev" data-interval="4000">
                <span class="carousel-control-prev-icon" aria-hidden="true" hidden></span>
                <span class="">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselContent" role="button" data-slide="next" data-interval="4000">
                <span class="carousel-control-next-icon" aria-hidden="true" hidden></span>
                <span class="">Next</span>
            </a>
        </div>
    </div>

Tip1: In this response you have a few more details about the Hidden attribute

Tip2: Mozilla documentation on the Hidden attribute link

    
31.10.2018 / 14:49
Equal elements between vectors - C Struct Vector: Pass by reference in C