2
I’m trying to make a Carousel using the framework bootstrap, but I’m having a hard time inserting the titles of the Carousel items on the side and inserting a border on top as in the image below.
Could someone help me?
Carousel Bootstrap
<style type="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>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five"></div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six"></div>
</div><!-- Carousel nav -->
<a class="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>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/170x100&text=six"></a>
</li>
</ul>
</div>
</div>
</div>
<script type="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>
Post what you already have of HTML / CSS / JS code. So it looks better to give you an accurate answer!
– hugocsl
@hugocsl includes the code in the post
– Bruno Richart
Guy to put the name next to the pictures is quiet, just split into 12 col-Sm-1 if you want put an example Snippet. Even so you need to do treatment to get formatted right in different screen sizes. Already this square on top complicates. Because it sits on top of the other elements, then you couldn’t click on the one below! I tried with Div, with ::after, and with SVG and none worked.
– hugocsl
@hugocsl Thank you if you want to pass a snippet of example I will be grateful!
– Bruno Richart