I want to put more images to that code in order to make it a slideshow, but keeping the h1 and h2 tags there, even when the images are sliding
Here is the code I have which properly shows the image with the titles on top of it:
HTML:
<header class="header-image">
<div class="headline">
<div class="title">
<h1>SanDesigns</h1>
<h2>The RENDERS you are looking for</h2>
</div>
</div>
</header>
CSS:
.header-image {
display:block;
width:100%;
background:url(Matthias_Leuzinger_test_Test_exterior_BB_View01_.jpg) no-repeat;
min-height:605px;
margin-top:-1px;
}
.title {
padding-left: 15%;
padding-top:5%;
font-family:GeosansLight;
}
.title h1 {
width: 18.75%;
border:3px solid #FFFFFF;
background-color:#7A7A7A;
text-align:center;
color:#FFF7F7;
}
.title h2 {
border:3px solid #FFFFFF;
background-color:#7A7A7A;
text-align:center;
width:30%;
color:#FFF7F7;
}
Ok, there is this other code that in which I was able to do the slideshow, but in this one I can put the divs with the h1 and h2 tags:
<nav class="navbar">
<ul>
<li>Inicio</li>
<li>Diseños</li>
<li>Articulos</li>
<li>Equipo</li>
<li>Contacto</li>
</ul>
</nav>
<header class="slideshow">
<img class="header-image" src="Architectural-Photorealistic-3D-Renders.jpg">
<img class="header-image" src="Channel-Place-Residence_LA.jpg">
<img class="header-image" src="Matthias_Leuzinger_test_Test_exterior_BB_View01_.jpg">
<img class="header-image" src="p2010018-20110510-view1-modepark.jpg">
</header>
And the script:
<script>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("header-image");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 6000); // Change image every 6 seconds
}
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3-content" style="max-width:800px;position:relative">
<img class="mySlides" src="img_fjords.jpg" style="width:100%">
<img class="mySlides" src="img_lights.jpg" style="width:100%">
<img class="mySlides" src="img_mountains.jpg" style="width:100%">
<img class="mySlides" src="img_forest.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">❯</a>
</div>
Please check this link:-http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_self
Simply use a javascript that change your background, but you need to add an id to your header div:
HTML
<header class="header-image" id="changingHeader">
<div class="headline">
<div class="title">
<h1>SanDesigns</h1>
<h2>The RENDERS you are looking for</h2>
</div>
</div>
</header>
JAVASCRIPT
<script language="javascript">
var currentImg = 1;
function changeBg(imgNumber){
var images = ['img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg']
document.getElementById('changingHeader').style.backgroundImage = "url("+images[imgNumber]+")";
if (currentImg <= 3){
currentImg ++;
}else{
currentImg = 0;
}
}
setInterval(function(){
changeBg(currentImg);
}, 5000); // this will run every 5 seconds
</script>
CSS
.header-image {
display:block;
width:100%;
background:url(img1.jpg) no-repeat;
min-height:605px;
margin-top:-1px;
}
.title {
padding-left: 15%;
padding-top:5%;
font-family:GeosansLight;
}
.title h1 {
width: 18.75%;
border:3px solid #FFFFFF;
background-color:#7A7A7A;
text-align:center;
color:#FFF7F7;
}
.title h2 {
border:3px solid #FFFFFF;
background-color:#7A7A7A;
text-align:center;
width:30%;
color:#FFF7F7;
}
Related
I have created two changing image galleries side by side but my right image changes slides but the left one is stuck on the first slide. does anyone know why? I have found the code on W3.CSS but I changed the class "changing-photo-right" and "changing-photo-left" to one of my own class (which can be found in my css stylesheet) and did not link the style sheet of W3.css.
.section2 {
background: #F5DAD3;
display: flex;
height: 750px;
position: relative;
}
.changing-photo-left {
float: left;
margin-left: 125px;
margin-top: -390px;
position: relative;
display: block;
}
.changing-photo-right {
float: right;
margin-right: 125px;
margin-top: -390px;
position: relative;
display: block;
}
.section3 {
height: 440px;
width: 2px;
top: 160px;
left: 50%;
position: absolute;
border: 0px solid black;
background-color: black;
border-radius: 20px;
}
<div class="hmm">
<div class="section2"></div>
<div class="section3" ></div>
<div>
<p class="text-12">The interieur</p>
<p class="text-11">Discover the lovely interieur that was built since 1948.</p>
<a class="button-intro-below-left" href="">Click here for more</a>
<div class="changing-photo-left" style="max-width:500px">
<img class="mySlides" src="009.jpg" style="width:100%">
<img class="mySlides" src="062.jpg" style="width:100%">
<img class="mySlides" src="027.jpg" style="width:100%">
</div>
<script>
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); // Change image every 3 seconds
}
</script>
</div>
<div>
<p class="text-13">The exterior</p>
<p class="text-14">Discover the lovely exterior that was built since 1948.</p>
<a class="button-intro-below-right" href="">Click here for more</a>
<div class="changing-photo-right" style="max-width:500px">
<img class="mySlides1" src="009.jpg" style="width:100%">
<img class="mySlides1" src="012.jpg" style="width:100%">
<img class="mySlides1" src="013.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides1");
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); // Change image every 3 seconds
}
</script>
</div>
You're using the same names for the variables and functions in both of the loops. If you change the names of the variables and functions in the second loop, everything should work just fine.
.section2 {
background: #F5DAD3;
display: flex;
height: 750px;
position: relative;
}
.changing-photo-left {
float: left;
margin-left: 125px;
margin-top: -390px;
position: relative;
display: block;
}
.changing-photo-right {
float: right;
margin-right: 125px;
margin-top: -390px;
position: relative;
display: block;
}
.section3 {
height: 440px;
width: 2px;
top: 160px;
left: 50%;
position: absolute;
border: 0px solid black;
background-color: black;
border-radius: 20px;
}
<div class="hmm">
<div class="section2"></div>
<div class="section3" ></div>
<div>
<p class="text-12">The interieur</p>
<p class="text-11">Discover the lovely interieur that was built since 1948.</p>
<a class="button-intro-below-left" href="">Click here for more</a>
<div class="changing-photo-left" style="max-width:500px">
<img class="mySlides" src="https://images.unsplash.com/photo-1672426142068-c2103a852426?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&w=1000&q=80" style="width:100%">
<img class="mySlides" src="https://media.istockphoto.com/id/1409254639/photo/autumn-drive.jpg?b=1&s=170667a&w=0&k=20&c=phQOICvfLifPWESZu3AioY7sKM9s_HQnCozMKF6g120=" style="width:100%">
<img class="mySlides" src="https://media.istockphoto.com/id/1427249962/photo/tropical-leaves-abstract-green-leaf-texture-in-garden-nature-background.jpg?b=1&s=170667a&w=0&k=20&c=40KcV7mbAQWihuO0At8GSOTIKp-TvIoHGIhurHBeUq0=" style="width:100%">
</div>
<script>
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); // Change image every 3 seconds
}
</script>
</div>
<div>
<p class="text-13">The exterior</p>
<p class="text-14">Discover the lovely exterior that was built since 1948.</p>
<a class="button-intro-below-right" href="">Click here for more</a>
<div class="changing-photo-right" style="max-width:500px">
<img class="mySlides1" src="https://images.unsplash.com/photo-1672426142068-c2103a852426?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&w=1000&q=80" style="width:100%">
<img class="mySlides1" src="https://media.istockphoto.com/id/1409254639/photo/autumn-drive.jpg?b=1&s=170667a&w=0&k=20&c=phQOICvfLifPWESZu3AioY7sKM9s_HQnCozMKF6g120=" style="width:100%">
<img class="mySlides1" src="https://media.istockphoto.com/id/1427249962/photo/tropical-leaves-abstract-green-leaf-texture-in-garden-nature-background.jpg?b=1&s=170667a&w=0&k=20&c=40KcV7mbAQWihuO0At8GSOTIKp-TvIoHGIhurHBeUq0=" style="width:100%">
</div>
<script>
var myIndex1 = 0;
carousel1();
function carousel1() {
var j;
var y = document.getElementsByClassName("mySlides1");
for (j = 0; j < y.length; j++) {
y[j].style.display = "none";
}
myIndex1++;
if (myIndex1 > y.length) {myIndex1 = 1}
y[myIndex1-1].style.display = "block";
setTimeout(carousel1, 2500); // Change image every 3 seconds
}
</script>
</div>
I am trying to make multiple slideshows on my website, making use of some old w3schools code. The issue with their code is that it only allows a single slideshow per page which is not quite what i'm going for. To make it clear, I want to be able to have an infinite amount of slideshows per page but I don't want to copy and paste my code multiple times if possible
CSS:
* {
box-sizing: border-box;
}
/* Position the image container (needed to position the left and right arrows) */
.container2 {
position: relative;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container for image text */
.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
JS:
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
captionText.innerHTML = dots[slideIndex-1].alt;
}
HTML:
<h3>Minigame Mania:</h3>
<div class = "container2" >
<div class ="mySlides">
<div class ="numberText">1/3</div>
<img src="assets/img/SameLevelPrototypeGameplay1.png" style="width: 100%">
</div>
<div class ="mySlides">
<div class ="numberText">2/3</div>
<img src="assets/img/SameLevelPrototypeGameplay2.png" style="width: 100%">
</div>
<div class ="mySlides">
<div class ="numberText">3/3</div>
<img src="assets/img/SameLevelPrototypeGameplay3.png" style="width: 100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class ="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay1.png" style="width:100%" onclick="currentSlide(1)" alt="Gameplay">
</div>
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay2.png" style="width:100%" onclick="currentSlide(2)" alt="Gameplay">
</div>
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay3.png" style="width:100%" onclick="currentSlide(3)" alt="Gameplay">
</div>
</div>
</div>
<!-- Same Level Prototype info, description etc -->
<h3>Same Level Prototype:</h3>
<div class = "container2">
<div class ="mySlides">
<div class ="numberText">1/3</div>
<img src="assets/img/SameLevelPrototypeGameplay1.png" style="width: 100%">
</div>
<div class ="mySlides">
<div class ="numberText">2/3</div>
<img src="assets/img/SameLevelPrototypeGameplay2.png" style="width: 100%">
</div>
<div class ="mySlides">
<div class ="numberText">3/3</div>
<img src="assets/img/SameLevelPrototypeGameplay3.png" style="width: 100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class ="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay1.png" style="width:100%" onclick="currentSlide(1)" alt="Gameplay">
</div>
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay2.png" style="width:100%" onclick="currentSlide(2)" alt="Gameplay">
</div>
<div class ="column">
<img class ="demo cursor" src="assets/img/SameLevelPrototypeGameplay3.png" style="width:100%" onclick="currentSlide(3)" alt="Gameplay">
</div>
</div>
I have tried a few methods such as adding gallery ID's but they weren't successful. I'm rather new to html, css and js so that's why i'm stumped on a problem that probably seems simple to some of you. Any help is greatly appreciated, thanks in advance!
I want more than one image slider on same page with same class name using JavaScript. I have done for one image slider.
The issues are when I'm using more than one image slider it is not working properly.I tried with childNodes also it doesn't work. How can I solve this problem?
And I'm trying to make sliding animation also(left and right) for that image slider.
If you need some more explanation, let me know.
I have given the code below;
HTML
<div class="container slider">
<div class="slides">
<img src="images-/b3.jpg">
</div>
<div class="slides">
<img src="images-/b2.jpg">
</div>
<div class="slides">
<img src="images-/b1.jpg">
</div>
<a class="prev" onclick="controlSlide(-1)">❮</a>
<a class="next" onclick="controlSlide(1)">❯</a>
</div>
<div class="container slider">
<div class="slides">
<img src="images-/b3.jpg">
</div>
<div class="slides">
<img src="images-/b2.jpg">
</div>
<div class="slides">
<img src="images-/b1.jpg">
</div>
<a class="prev" onclick="controlSlide(-1)">❮</a>
<a class="next" onclick="controlSlide(1)">❯</a>
</div>
CSS
.slides{
position: relative;
display:none;
}
img{
width: 100%;
vertical-align:middle;
}
.container
{
max-width: 100%;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
color: black;
font-size: 20px;
}
.prev{
left: 2%;
}
.next{
right: 2%;
}
.prev:hover, .next:hover {
background-color: #f1f1f1;
text-decoration: none;
color: black;
}
JAVASCRIPT
var slides = document.getElementsByClassName("slides");
var position=[1,-1];
var slideIndex=0;
showSlides();
function showSlides() {
controlSlide(position[0]);
setTimeout(showSlides,3000);
}
function controlSlide(position) {
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex +=position;
if (slideIndex>slides.length) {
slideIndex = 1;
}
else if(slideIndex<=0){
slideIndex=slides.length;
}
slides[slideIndex-1].style.display= "block";
}
The problem is that you select all the slides at once, with document.getElementsByClassName("slides").
You want to alter you JS methods to work with the sorrounding element
<div class="container slider">
and then select and pass theese to controlSlide form showSlides.
Not tested:
var sliders = document.getElementsByClassName("slider");
var position=[1,-1];
var slideIndex=0;
sliders.forEach(function(slider){
showSlides(slider);
})
function showSlides(slider) {
let slides = slider.childNodes;
controlSlide(slides, position[0]);
setTimeout(showSlides,3000);
}
function controlSlide(slides, position) {
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex +=position;
if (slideIndex>slides.length) {
slideIndex = 1;
}
else if(slideIndex<=0){
slideIndex=slides.length;
}
slides[slideIndex-1].style.display= "block";
}
I have a few problems with the sliding gallery I added:
the buttons stuck below the gallery instead of its sides. (I tried to give them 'display: inline-block' (?)).
I want to divide the #gallrey div into 2. Which contain the #slideGallery & #galleryDescription. The div #galleryDescription contains <p> that is stuck at the bottom instead of top or center.
This is the format I want #gallery to have:
[button left][#slideGallery DIV][button right][#galleryDescription DIV]
Hope you understand me. :)
Here is my code:
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}
.mySlides {
height: 300px;
width: 300px;
}
#gallery {
width: 620px;
border: 1px solid black;
margin: 0 auto;
}
#gallerySlide {
display: inline-block;
width: 49%;
top: 0;
left: 0;
}
#galleryDescription {
display: inline-block;
width: 49%;
top: 0;
right: 0;
}
#glryDesc {
/* (glryDesc = gallery description) */
padding-left: 5px;
width: 90%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="gallery">
<div id="gallerySlide">
<img class="mySlides" src="images/slide1.png" />
<img class="mySlides" src="images/slide2.png" />
<img class="mySlides" src="images/slide3.jpg" />
<img class="mySlides" src="images/slide4.jpg" />
<button class="btn" onclick="plusDivs(-1)">❮</button>
<button class="btn" onclick="plusDivs(1)">❯</button>
</div>
<div id="galleryDescription">
<p id="glryDesc">This is gonna be the description of the slide gallery. The gallery is very nice. Also the description !</p>
</div>
</div>
Is this what you wanted?
You had way too many widths that were contradicting with each other. I had to compromise a little on the different sizes. Try adjusting them yourself.
left, top and right are properties do not work on elements that do not have a specific position set (relative, absolute or fixed). Default position is static.
I used flex containers and justify-content, align-items to align the items accordingly. Read up on them.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
.mySlides {
height: 280px;
width: 280px;
display: none;
}
#gallery{
display: flex;
justify-content: center;
align-items: center;
width: 660px;
border: 1px solid black;
margin:0 auto;
}
#gallerySlide {
display: flex;
width: 49%;
}
#glryDesc { /* (glryDesc = gallery description) */
padding-left: 5px;
}
<div id="gallery">
<div id="gallerySlide">
<button class="btn" onclick="plusDivs(-1)">❮</button>
<img class="mySlides" src="images/slide1.png" />
<img class="mySlides" src="images/slide2.png" />
<img class="mySlides" src="images/slide3.jpg" />
<img class="mySlides" src="images/slide4.jpg" />
<button class="btn" onclick="plusDivs(1)">❯</button>
</div>
<div id="galleryDescription">
<p id="glryDesc">This is gonna be the description of the slide gallery. The gallery is very nice. Also the description !</p>
</div>
</div>
I have trouble with centering my photoslideshow....
I hope you guys could help me.
Photoslideshow in Html :
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides" src="4.jpg">
<img class="mySlides" src="3.jpg">
<img class="mySlides" src="2.jpg">
</div>
<script>
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);
}
</script>
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>
Try this
<style>
.w3-content {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 0 auto;
}
</style>
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>
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>