Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

How To Center A Photoslideshow

Post a Comment
I have trouble with centering my photoslideshow.... I hope you guys could help me. Photoslideshow in Html :
&

Solution 1:

Here a flexbox suggestion (I used different size images just as proof they are indeed sliding):

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 2500);
}
.w3-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
<div class="w3-content w3-section">
  <img class="mySlides" src="https://placehold.it/100x100">
  <img class="mySlides" src="https://placehold.it/150x150">
  <img class="mySlides" src="https://placehold.it/200x200">
</div>

Solution 2:

Try this

<style>
.w3-content {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: 0 auto;
}
</style>

Solution 3:

Try styling with 'center-class'.

<div class="w3-content w3-section center-class" style="max-width:500px">
  <img class="mySlides" src="4.jpg" >
  <img class="mySlides" src="3.jpg" >
  <img class="mySlides" src="2.jpg" >
</div>

<style>
  .center-class{
      display:block;
      margin-left:auto;
      margin-right:auto;
  }
</style>

Solution 4:

Use margin: auto; and display: block; style For center image. see here for display center image. http://www.w3schools.com/css/css_align.asp.

Try below css style:

 .w3-content img{
      display: block;
      margin:0 auto;
 }

Demo

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 2500);
}
.w3-content img{
  display: block;
  margin:0 auto;
}
<div class="w3-content w3-section">
  <img class="mySlides" src="https://placehold.it/100x100">
  <img class="mySlides" src="https://placehold.it/150x150">
  <img class="mySlides" src="https://placehold.it/200x200">
</div>

You may like these posts

Post a Comment for "How To Center A Photoslideshow"