Display images side by side using JavaScript / BootStrap

Navigation
0

I would like some side-by-side images to be displayed, as the template below, could you tell me the best way to do it?

I have tried to do with BootStrap, but I can only make one image appear at a time.

    
asked by anonymous 15.02.2017 / 02:54

3 answers

0

You have two options here: 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><scriptsrc="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>
    
15.02.2017 / 16:37
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: ( link ) also has this channel on youtube, it will help you: ( link )

    
15.02.2017 / 03:32
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><scriptsrc="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>
    
15.02.2017 / 03:32
Links are not working Operator overload ==