How to insert a line above the Carousel

Asked

Viewed 175 times

1

I am trying to make a Carousel that when clicking on the items is displayed the image and next to the content I would like to insert a line like the image below and center the items with the title next to how I do it?

inserir a descrição da imagem aqui

<div class="home-destaque">
  <div class="container">

    <div class="row">
      <center><h2>Destaques</h2></center>
    </div>

    <div class="outline-destaque">

    <div class="row">   
          <div class="col-xs-12" id="slider">
              <!-- Top part of the slider -->
              <div class="row">
                  <div class="col-sm-8" id="carousel-bounding-box">
                      <div class="carousel slide" id="destaqueCarousel">
                          <!-- Carousel items -->
                            <div class="carousel-inner">
                              <div class="active item" data-slide-number="0">
                                <img src="http://placehold.it/770x300&text=Brigadeiro">
                              </div>
                              <div class="item" data-slide-number="1">
                                <img src="http://placehold.it/770x300&text=Petit gateau">
                              </div>
                              <div class="item" data-slide-number="2">
                                <img src="http://placehold.it/770x300&text=Boleria">
                              </div>
                            </div>
                            <!-- Carousel nav -->
                            <a class="left carousel-control" href="#destaqueCarousel" role="button" data-slide="prev">
                              <span class="glyphicon glyphicon-chevron-left"></span>                                       
                            </a>
                            <a class="right carousel-control" href="#destaqueCarousel" role="button" data-slide="next">
                              <span class="glyphicon glyphicon-chevron-right"></span>                                       
                            </a>                                
                        </div> <!-- fim carousel -->
                    </div> <!-- fim carousel-bounding-box -->

                    <div class="col-sm-4" id="carousel-text"></div>

                    <div id="slide-content" style="display: none;">
                      <div id="slide-content-0">
                          <h2>Brigadeiro</h2>
                            <p>Lorem Ipsum Dolor</p>
                          <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                        </div>

                        <div id="slide-content-1">
                          <h2>Petit gateau</h2>
                          <p>Lorem Ipsum Dolor</p>
                            <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                        </div>

                        <div id="slide-content-2">
                          <h2>Boleria</h2>
                          <p>Lorem Ipsum Dolor</p>
                          <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                        </div> 
                    </div>
                </div> <!-- fim row -->
            </div> <!-- fim col-xs-12 -->
        </div><!-- fim row-->

        <div class="row hidden-xs" id="slider-thumbs">
          <!-- Bottom switcher of slider -->
            <ul class="hide-bullets">
              <li class="col-sm-2">
                  <a class="thumbnail" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=Brigadeiro"></a>
                </li>

                <li class="col-sm-2">
                  <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=Petit gateau"></a>
                </li>

                <li class="col-sm-2">
                  <a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=Boleria"></a>
                </li>
            </ul>                 
        </div>  

        </div><!-- linha destaque -->

  </div><!-- fim container -->
</div> <!-- fim home-destaque -->


.home-destaque .hide-bullets {
            list-style:none;
            margin-left: 0px;/*margin-left: -40px;*/
            margin-top:20px;
    }

    .outline-destaque {
        padding: 70px 30px;
        outline: #e8e8e8 1px solid;
        outline-offset: -50px;
        z-index: 999;
    }




  <script type="text/javascript">

            /* Inicio carousel Suites */
            jQuery(document).ready(function($) {

                $('#destaqueCarousel').carousel({
                        interval: 5000
                });

                $('#carousel-text').html($('#slide-content-0').html());

                //Handles the carousel thumbnails
               $('[id^=carousel-selector-]').click( function(){
                    var id = this.id.substr(this.id.lastIndexOf("-") + 1);
                    var id = parseInt(id);
                    $('#destaqueCarousel').carousel(id);
                });


                // When the carousel slides, auto update the text
                $('#destaqueCarousel').on('slid.bs.carousel', function (e) {
                         var id = $('.item.active').data('slide-number');
                        $('#carousel-text').html($('#slide-content-'+id).html());
                });
            });
            /* Fim carousel Suites */

        </script>
  • No CSS, just Bootstrap?

  • @hugocsl sorry aabei forgetting, obrogado por lembrar está junto ao código.

1 answer

2


To align the titles in the Thumbnails I had to use flex display, and separates image in a column and title in another column. See in Snippet that you will understand. Other than that I did not touch HTML, only CSS.

And for the line I put in red just to see better I needed to use the z-index to throw some elements in front of others.

See how it looked in Snippet, have run in "Whole page" to see better.

OBS: I didn’t use the <script> of his question pq was giving error in the Stackoverflow Snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
  .home-destaque .hide-bullets {
  list-style:none;
  margin-left: 0px;/*margin-left: -40px;*/
  margin-top:20px;
}
  /* .home-destaque .row {
    position: relative;
    z-index: -1;
} */

.outline-destaque {
    padding: 128px 80px;
    /* outline: #e8e8e8 1px solid ; */
    outline: 1px solid red;
    outline-offset: -100px;
    position: relative;
    z-index: 99;
    margin-top: -70px;
}
    .hide-bullets {
        list-style: none;
        display: flex;
        align-items: center;
        margin-top: 24px;
    }
    .thumbnail {
      margin-bottom: 0;
    }
</style>
</head>
<body>
    
        <div class="home-destaque">
                <div class="container">
              
                  <div class="row">
                    <center><h2>Destaques</h2></center>
                  </div>
              
                  <div class="outline-destaque">
              
                  <div class="row" style="position: relative !important; z-index: -1 !important;">   
                        <div class="col-xs-12" id="slider">
                            <!-- Top part of the slider -->
                            <div class="row">
                                <div class="col-sm-8" id="carousel-bounding-box">
                                    <div class="carousel slide" id="destaqueCarousel">
                                        <!-- Carousel items -->
                                          <div class="carousel-inner">
                                            <div class="active item" data-slide-number="0">
                                              <img src="http://placehold.it/770x300&text=Brigadeiro">
                                            </div>
                                            <div class="item" data-slide-number="1">
                                              <img src="http://placehold.it/770x300&text=Petit gateau">
                                            </div>
                                            <div class="item" data-slide-number="2">
                                              <img src="http://placehold.it/770x300&text=Boleria">
                                            </div>
                                          </div>
                                          <!-- Carousel nav -->
                                          <a class="left carousel-control" href="#destaqueCarousel" role="button" data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left"></span>                                       
                                          </a>
                                          <a class="right carousel-control" href="#destaqueCarousel" role="button" data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right"></span>                                       
                                          </a>                                
                                      </div> <!-- fim carousel -->
                                  </div> <!-- fim carousel-bounding-box -->
                                  <div class="col-sm-4" id="">
                                      <h3>Descrição</h3>
                                      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae cupiditate eveniet exercitationem illum a quos voluptatem magni possimus nostrum similique!
                                  </div>
              
                                  <div class="col-sm-4" id="carousel-text"></div>
              
                                  <div id="slide-content" style="display: none;">
                                    <div id="slide-content-0">
                                        <h2>Brigadeiro</h2>
                                          <p>Lorem Ipsum Dolor</p>
                                        <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                                      </div>
              
                                      <div id="slide-content-1">
                                        <h2>Petit gateau</h2>
                                        <p>Lorem Ipsum Dolor</p>
                                          <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                                      </div>
              
                                      <div id="slide-content-2">
                                        <h2>Boleria</h2>
                                        <p>Lorem Ipsum Dolor</p>
                                        <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                                      </div> 
                                  </div>
                              </div> <!-- fim row -->
                          </div> <!-- fim col-xs-12 -->
                      </div><!-- fim row-->
              
                      <div class="row hidden-xs" id="slider-thumbs">
                        <!-- Bottom switcher of slider -->
                          <ul class="hide-bullets">
                            <li class="col-sm-2">
                                <a class="thumbnail" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=Brigadeiro"></a>
                              </li>
                              <li class="col-sm-2">
                                    titulo 1
                                  </li>
              
                              <li class="col-sm-2">
                                <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=Petit gateau"></a>
                              </li>
                              <li class="col-sm-2">
                                titulo 2
                              </li>
              
                              <li class="col-sm-2">
                                <a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=Boleria"></a>
                              </li>
                              <li class="col-sm-2">
                                    titulo 3
                                  </li>
                          </ul>                 
                      </div>  
              
                      </div><!-- linha destaque -->
              
                </div><!-- fim container -->
              </div> <!-- fim home-destaque -->
    

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

  • that’s right I even managed to do a similar but it was not cool because the line was behind, I used z-index but I don’t know what the reason why it didn’t work and the Thumbnails were not aligned, very worked by force.

  • z-index only works if the element it is applied to has some position defined, relative type or Absolute. If I did not have a declared position in the element z-index has no effect.

  • Got it, thanks for the force!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.