How display two div horizontally in my carousel?

Question

/*slides show*/

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "flex";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 5000); // Change image every 2 seconds
}


/*End slides show*/

img {vertical-align: middle;}

/* Slideshow container */

    .mySlides{
        display: flex;
        flex-direction: row;
        width: 75vw;
        border: 1px solid red;
    }
    .mySlides > div {
        flex: 0 0 50%;
        border: 1px solid green;
    }


.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  margin-top: 50px;

}


/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
      box-sizing: border-box;


}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;

}

/* The dots/bullets/indicators */
.dot {
  height: 5px;
  width: 5px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}


    	
  
    
  
  
     Blog
     Contact
     L'électrophotonique
     Qui sommes nous?
  



		

		
		 	
		  	 test1 
		 


		
		  
		  test 2
		

		
		  
		  test 3

I'm trying to display 2 divs in 1 row in my slide show ? One part is an image and the second is the legend and text.

I'm trying to use flexbox to do it but it doesn't work and I don't understand why.

I introduce a div with an ID (slideshow) for test but the div with the image and the the div class = "text" are still align vertically

Can you help me?

/*slides show*/

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 5000); // Change image every 2 seconds
}


/*End slides show*/

@charset "UTF-8";
/* CSS Document */
body {
  margin: 0;
  font-size: 28px;
  background-color: #00011f;
  display: flex;
  flex-direction: column;
  margin : auto;
}


img {vertical-align: middle;}

/* Slideshow container */

#slideshow{
float: flex;}


.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  margin-top: 50px;

}


/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 5px;
  width: 5px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}




	
	

    
        
        Electrophotonique Ingenierie
        


    


    
    	
		

		
		  
		   testtesttesttesttesttesttesttesttesttesttesttest

sassquad · Accepted Answer

I've added a Codepen which solves your problem, where you can inspect the changes I've made to your markup.

Flexbox is a display layout method, so I've replaced float:flex with display:flex. I've then added some further style rules, which result in a 2 column layout, each column being 50% of the flexbox container's width (as a width must be defined for this to work, I've set the width to 75vw, which equates to 75% of the browser screen width).

The markup for each 'slide' needs to be the same in order for the layout to work, so I've changed the style rule #slideshow to .mySlides and ensured that the image sits within a div tag, which I saw you had added to the first slide.

Here is the styling required (with some border colours set so you can see what is going on):

.mySlides{
    display: flex;
    flex-direction: row;
    width: 75vw;
    border: 1px solid red;
}
.mySlides > div {
    flex: 0 0 50%;
    border: 1px solid green;
}

flex: 0 0 50% is a shorthand, but in this case instructs each column to occupy a minimum of 50% width.

I've made some other minor amends, but these are mostly cosmetic.

I hope this is useful. Questions are welcome :-)

View Codepen

How display two div horizontally in my carousel?

Answers (2)

Related Questions