How to put 3 slides together in Bxslider?

Asked

Viewed 199 times

3

I couldn’t do it myself, I wanted your help. I would be very grateful if anyone could solve this problem for me.

This is my slide picture. inserir a descrição da imagem aqui This is my HTML code.

<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;}

jquery html css slider bxslider

  • Hello, you can use GRID CSS, http://960.gs/ or bootstrap http://getbootstrap.com/css/

  • Ctrl+c then Ctrl+v twice...

  • I don’t know how to use these frameworks. And I’ve read an article saying that these frameworks are very limited.

  • 1

    Well, they’re more than good for what you want. Or you can do at hand, what’s the problem? What css have you done?

  • I like to do the css in hand.

1 answer

2

I just made a basic example. These elements starting with .slider must be inside the DIV that mounts the block of his slider. I never used that bxslider, but it must 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>

Browser other questions tagged jquery html css slider bxslider

You are not signed in. Login or sign up in order to post.