Problem with slideshow css

Question

Problem with slideshow css

Navigation

#1 by (0 votes)

1

I want to leave the slide with the format of the image below. I add display:block to the images in my slideshow, but, it does not work!

HTML:<divclass="slideshow">
  <div class="slide">

    <div class="slide-1">
     <img src="img/01.jpg">
    </div>
    <div class="slide-2">
     <img src="img/img02.jpg">
    </div>
    <div class="slide-3">
     <img src="img/img02.jpg">
    </div>

  </div>
 </div>

CSS:

.slideshow{
    width:100%;
    max-width:980px;
    height:auto;
    margin:0 auto;
}

.slide{
    width:100%;
    height:auto;
    display:block;
}

.slide-1{
    width:75%;
    height:505px;
    float:left;
}

.slide-2{
    width:50%;
    height:250px;
    float:right;
}

.slide-3{
    width:50%;
    height:250px;
    float:right;
}

html css

asked by anonymous 09.09.2015 / 19:32

1 answer

Return php data to angularJS Aggregation of data in PHP and MVC development

score 0 · Accepted Answer

Correct the percentage of slides. 75% + 50% gives 125%. Use float: left on all elements.

.slide-1{
    width:75%;
    height:505px;
    float:left;
}

.slide-2{
    width:25%;
    height:250px;
    float:left;
}

.slide-3{
    width:25%;
    height:250px;
    float:left;
}

» JSFiddle