0
I would like some images to be displayed side by side, as follows the model below, could indicate me the best way to do?
I’ve tried it with Bootstrap, but I can only pop one image at a time.
3 answers
1
hi CA_93 tries to create this bootstrap 3 structure in your code:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">img-1</div>
<div class="col-md-4">img-2</div>
<div class="col-md-4">img-3</div>
</div>
</div>
</body>
you can also take a look at the documentation: (http://getbootstrap.com/css/) have also this channel on youtube, will help you: (https://www.youtube.com/watch?v=8sU-IVaQYgk&list=PLd4yfya-3PIomj2O-W0s9A-0i1ThWJncj)
1
Below is an example with Bootstrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- - - - - - - - - - - - - - - -->
<div class="container">
<div class="row">
<div class="col-sm-4"><img src="http://placehold.it/400x400" style="max-height:220px" /></div>
<div class="col-sm-4"><img src="http://placehold.it/400x400" style="max-height:220px" /></div>
<div class="col-sm-4"><img src="http://placehold.it/400x400" style="max-height:220px" /></div>
</div>
</div>0
You have here two options, modify the Bootstrap Carousel to support multiple frames.
You can use the implementation of the following Codeio for this.
The second option is to use Slickjs or another lib that supports this type of implementation.:
$('.responsive').slick({
dots: true,
infinite: true,
arrows: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});.responsive {
box-sizing: box-border;
}
.responsive div {
height: 300px;
background-image: url('http://placehold.it/300x300');
background-size: calc(100% - 10px);
background-position: center;
background-repeat: no-repeat;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<div class="responsive">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>Browser other questions tagged javascript jquery css3 bootstrap
You are not signed in. Login or sign up in order to post.