How to put 3 slides together in Bxslider?

Navigation
3

I could not do it alone, I wanted your help. I would be grateful if anyone could solve this problem for me.

This is the photo on my slide. ThisismyHTMLcode.

<div class="main">
 <div class="slideshow">
 
    <div class="sld-left">
      <a href="#"><img src="img/img-01.jpg"/></a>
      <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria</h2></a>
    </div>
    
    <div class="sld-right-top">
      <a href="#"><img src="img/img-02.jpg"/></a>
      <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação</h2></a>
    </div>
    
    <div class="sld-right-bottom">
      <a href="#"><img src="img/img-03.jpg"/></a>
      <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação</h2></a>
    </div>
    
(-------------------------------2 slide-----------------------------------)

    <div class="sld-left">
      <a href="#"><img src="img/img-01.jpg"/></a>
      <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria</h2></a>
    </div>
    
    <div class="sld-right-top">
      <a href="#"><img src="img/img-02.jpg"/></a>
      <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação</h2></a>
    </div>
    
    <div class="sld-right-bottom">
      <a href="#"><img src="img/img-03.jpg"/></a>
      <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação</h2></a>
    </div>
    
 </div>
</div>  

.main{max-width:1150px; padding:20px; margin:0 auto; height:500px; overflow:hidden;}
.slideshow{width:100%; display:block; height:auto;}
.sld-left{width:65%; height:auto; float:left;}
.sld-right-top{width:35%; height:auto; float:left;}
.sld-right-bottom{width:35%; height:auto; float:right; margin-top:-4px;}
    
asked by anonymous 14.12.2015 / 03:58

1 answer

2

I just did a basic example. These elements beginning with .slider must be within the DIV that mounts the block of its slider . I have never used this bxslider , but it should be the same as the others. 

.slider {
  width: 800px;
  display: table;
}
.box-1 {
  float: left;
  width: 580px;
  height: 300px;
  background-color: #000;
}
.box-2 {
  float: left;
  width: 200px;
  height: 145px;
  background-color: #F00;
  margin-left: 20px;
}
.box-3 {
  float: left;
  width: 200px;
  height: 145px;
  background-color: #0F0;
  margin-top: 10px;
  margin-left: 20px;
}
<div class="slider">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</div>
    
14.12.2015 / 14:34
Database First - MVC Aggregation and composition in various relationships