Insert item titles on the side carousel bootstrap

1

I'm trying to make a carousel using the bootstrap framework , but I'm having trouble inserting the carousel items on the side and inserting a border over it as in the image below.

Could anyone help me?

                                                    CarouselBootstrap                                                

<styletype="text/css" media="screen">
            .hide-bullets {
            list-style:none;
            margin-left: -40px;
            margin-top:20px;
            }
        </style>
    </head>
    <body>


        <div class="container">
            <div id="main_area">
                    <!-- Slider -->
                    <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="myCarousel">
                                        <!-- Carousel items -->
                                        <div class="carousel-inner">
                                            <div class="active item" data-slide-number="0">
                                            <img src="http://placehold.it/770x300&text=one"></div><divclass="item" data-slide-number="1">
                                            <img src="http://placehold.it/770x300&text=two"></div><divclass="item" data-slide-number="2">
                                            <img src="http://placehold.it/770x300&text=three"></div><divclass="item" data-slide-number="3">
                                            <img src="http://placehold.it/770x300&text=four"></div><divclass="item" data-slide-number="4">
                                            <img src="http://placehold.it/770x300&text=five"></div><divclass="item" data-slide-number="5">
                                            <img src="http://placehold.it/770x300&text=six"></div></div><!--Carouselnav--><aclass="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left"></span>                                       
                                        </a>
                                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right"></span>                                       
                                        </a>                                
                                        </div>
                                </div>

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

                                <div id="slide-content" style="display: none;">
                                    <div id="slide-content-0">
                                        <h2>Titulo 1</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>Titulo 2</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>Titulo 3</h2>
                                        <p>Lorem Ipsum Dolor</p>
                                        <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                                    </div>

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

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

                                    <div id="slide-content-5">
                                        <h2>Titulo 6</h2>
                                        <p>Lorem Ipsum Dolor</p>
                                        <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!--/Slider-->

                    <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=one"></a></li><liclass="col-sm-2">
                                    <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a></li><liclass="col-sm-2">
                                    <a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a></li><liclass="col-sm-2">
                                    <a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a></li><liclass="col-sm-2">
                                    <a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a></li><liclass="col-sm-2">
                                    <a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/170x100&text=six"></a></li></ul></div></div></div><scripttype="text/javascript">

      jQuery(document).ready(function($) {

            $('#myCarousel').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);
                $('#myCarousel').carousel(id);
            });


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

    </script>

    </body>
    </html>
    
asked by anonymous 02.01.2018 / 14:23

1 answer

0

Follow the Snippet with only the text next to each image thumbnail.

  

NOTE: You need to format @media to align the text on each screen size. You'll have to customize some CSS to stay cool on every screen size.

     

OBS2: Run Snippet on "All page" to see the result

        jQuery(document).ready(function($) {
  
              $('#myCarousel').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);
                  $('#myCarousel').carousel(id);
              });
  
  
              // When the carousel slides, auto update the text
              $('#myCarousel').on('slid.bs.carousel', function (e) {
                       var id = $('.item.active').data('slide-number');
                      $('#carousel-text').html($('#slide-content-'+id).html());
              });
      });
  
<!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 type="text/css" media="screen">
            .hide-bullets {
            list-style:none;
            margin-left: -40px;
            margin-top:20px;
            }
            .pic-name {
                line-height: 4.5rem;
            }
            #main_area {
                margin-top: 100px;
            }

        </style>

    </head>
    <body>


        <div class="container">
            <div id="main_area">
                    <!-- Slider -->
                    <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="myCarousel">
                                        <!-- Carousel items -->
                                        <div class="carousel-inner">
                                            <div class="active item" data-slide-number="0">
                                            <img src="http://placehold.it/770x300&text=one"></div><divclass="item" data-slide-number="1">
                                            <img src="http://placehold.it/770x300&text=two"></div><divclass="item" data-slide-number="2">
                                            <img src="http://placehold.it/770x300&text=three"></div><divclass="item" data-slide-number="3">
                                            <img src="http://placehold.it/770x300&text=four"></div><divclass="item" data-slide-number="4">
                                            <img src="http://placehold.it/770x300&text=five"></div><divclass="item" data-slide-number="5">
                                            <img src="http://placehold.it/770x300&text=six"></div></div><!--Carouselnav--><aclass="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                            <span class="glyphicon glyphicon-chevron-left"></span>                                       
                                        </a>
                                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                            <span class="glyphicon glyphicon-chevron-right"></span>                                       
                                        </a>                                
                                        </div>
                                </div>

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

                                <div id="slide-content" style="display: none;">
                                    <div id="slide-content-0">
                                        <h2>Titulo 1</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>Titulo 2</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>Titulo 3</h2>
                                        <p>Lorem Ipsum Dolor</p>
                                        <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                                    </div>

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

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

                                    <div id="slide-content-5">
                                        <h2>Titulo 6</h2>
                                        <p>Lorem Ipsum Dolor</p>
                                        <p class="sub-text">October 24 2014 - <a href="#">Leia Mais</a></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!--/Slider-->

                    <div class="row hidden-xs" id="slider-thumbs">
                            <!-- Bottom switcher of slider -->
                            <ul class="hide-bullets">
                                <li class="col-sm-1">
                                    <a class="thumbnail" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a></li><liclass="col-sm-1">
                                    <a><span class="pic-name">text 1</span></a>
                                </li>
                                <li class="col-sm-1">
                                    <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a></li><liclass="col-sm-1">
                                    <a><span class="pic-name">text 2</span></a>
                                </li>
                                <li class="col-sm-1">
                                    <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=three"></a></li><liclass="col-sm-1">
                                    <a><span class="pic-name">text 3</span></a>
                                </li>
                                <li class="col-sm-1">
                                    <a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a></li><liclass="col-sm-1">
                                    <a><span class="pic-name">text 4</span></a>
                                </li>
                                <li class="col-sm-1">
                                    <a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a></li><liclass="col-sm-1">
                                    <a><span class="pic-name">text 5</span></a>
                                </li>
                                <li class="col-sm-1">
                                    <a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/170x100&text=six"></a></li><liclass="col-sm-1">
                                    <a><span class="pic-name">text 6</span></a>
                                </li>
                            </ul>                 
                    </div>
            </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</html>

On the line above the Slider will get complicated , because it is an element that overrides the others, thus making it impossible to click on the elements that are underneath. I tried with div , ::after and svg and none worked with just CSS.

    
02.01.2018 / 19:00