Develop Reference

my right image changes slides but the left one is stuck on the first slide

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>

Problem with my slider, it does not appear

I'm trying to make a slider for my website, but the slider I created is not rendering.
I attempted to write only the slider's markup, which worked, however, it is not working on my webpage.
Here is the code:
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("custom-slider");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
.custom-slider {
display: none;
}
.slide-container {
max-width: 800px;
position: relative;
margin: 50px auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: white;
font-size: 30px;
background-color: rgba(0,0,0,0);
transition: background-color 0.6s ease;
}
.prev{
left: 15px;
}
.next {
right: 15px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.5);
}
.slide-text {
position: absolute;
color: #ffffff;
font-size: 15px;
padding: 15px;
bottom: 15px;
width: 100%;
text-align: center;
}
.slide-img{
width: 100%;
height: 500px;
object-fit: cover;
object-position: center;
}
<div class="section3">
<h1 class="titre" id="realisations">REALISATIONS</h1>
<div class="slide-container">
<div class="custom-slider fade">
<img class="slide-img" src="imgr/Batiment.jpg">
<div class="slide-text">text1</div>
</div>
<div class="custom-slider fade">
<img class="slide-img" src="imgr/emmanchement2.jpg">
<div class="slide-text">text2</div>
</div>
<div class="custom-slider fade">
<img class="slide-img" src="imgr/Emmanchement_goupilles.jpg">
<div class="slide-text">text3</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
If I change the display on the custom-slider, the slider appears, but with an image above, and an image below. When I click the button for swap pic, the display works as expected.

Here are some notes that may help:
CSS can be added to the <head> section by wrapping the css in <style> tags
The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load
In your case... Your Javascript file needs to get some informations from your html document. Like this : var slides = document.getElementsByClassName("custom-slider"); so your html should be ready before your js codes. When you include your js in <head> , your html document wont load compeletly . So your js file have nothing to get the information that it needs.
You can also read this :
script doesnt load when on head

What is wrong with my image slideshow? - Vanilla Javascript

I've coded a simple image slideshow using Vanilla JS which unfortunately isn't working. It's structured in a 'section', within a 'container'. The overflow of the container is hidden, and there are relative 'span' circles below it which I want to use to control the slideshow.
Here is my code so far:
// Variables
let i;
let image = document.getElementsByClassName("image");
let slideIndex = 1;
let dots = document.getElementsByClassName("dots");
// Functions
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showImage(n) {
if (n > image.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = image.length;
}
for (i = 0; i < image.length; i++) {
image[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("active", "");
}
image[slideIndex-1].style.display = "block";
dots[slideIndex-1].classList.add("active");
}
showImage(slideIndex);
body {
margin: 0;
padding: 0;
font-family: Helvetica;
}
.image-section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: #303960;
}
.image-container {
height: 600px;
width: 900px;
overflow: hidden;
background-color: #f9f9f9;
}
.image {
height: 600px;
width: 900px;
}
.image-controller {
height: 10vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.dots {
height: 30px;
width: 30px;
border-radius: 100%;
background-color: #fff;
margin: 0 10px;
cursor: pointer;
}
.active {
background-color: #f96d80;
}
<section class="image-section">
<div class="image-container">
<div class="image" style="background-color: black">
</div>
<div class="image" style="background-color: red">
</div>
<div class="image" style="background-color: blue">
</div>
<div class="image" style="background-color: orange">
</div>
<div class="image" style="background-color: purple">
</div>
<div class="image" style="background-color: brown">
</div>
</div>
<div class="image-controller">
<span class="dots active" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
<span class="dots" onclick="currentSlide(5)"></span>
<span class="dots" onclick="currentSlide(6)"></span>
</div>
</section>
I'm assuming it's a problem with my for loop, but I could be wrong. Any advice would be great!

Was this something you had in mind? You made the code a bit too complex.
I changed everything in your javascript code, because nothing really worked with all your different method names and how they were called. Thought it was easier for me to just type a few lines of code to show a different way of thinking.
Your images (it should be called "images", not "image" because there are several of them) and dots arrays start at position 0, so use that. Start by adding 0 as a parameter in your onclick method on your first dot element.
Then just keep track of the previous index (prevSelection) and remove the .active class from the previously selected image and dot, while adding .active to the newly selected image and dot. I added CSS style for .active for .image.
If you want to add a sliding animation, this is not the way to go, however.
// Variables
let images = document.getElementsByClassName("image");
let dots = document.getElementsByClassName("dots");
var prevSelection = 0;
function showSlides(slidePosition) {
removeClass('active', prevSelection);
addClass('active', slidePosition);
prevSelection = slidePosition;
}
function removeClass(className, slidePosition) {
dots [slidePosition].classList.remove(className);
images[slidePosition].classList.remove(className);
}
function addClass(className, slidePosition) {
dots [slidePosition].classList.add(className);
images[slidePosition].classList.add(className);
}
body {
margin: 0;
padding: 0;
font-family: Helvetica;
}
.image-section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: #303960;
}
.image-container {
height: 600px;
width: 900px;
overflow: hidden;
background-color: #f9f9f9;
}
.image {
display: none;
height: 600px;
width: 900px;
}
.image.active { /* added this */
display: block;
}
.image-controller {
height: 10vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.dots {
height: 30px;
width: 30px;
border-radius: 100%;
background-color: #fff;
margin: 0 10px;
cursor: pointer;
}
.dots.active { /* added .dots for better clarity */
background-color: #f96d80;
}
<section class="image-section">
<div class="image-container">
<div class="active image" style="background-color: black">
</div>
<div class="image" style="background-color: red">
</div>
<div class="image" style="background-color: blue">
</div>
<div class="image" style="background-color: orange">
</div>
<div class="image" style="background-color: purple">
</div>
<div class="image" style="background-color: brown">
</div>
</div>
<div class="image-controller">
<span class="active dots" onclick="showSlides(0)"></span>
<span class="dots" onclick="showSlides(1)"></span>
<span class="dots" onclick="showSlides(2)"></span>
<span class="dots" onclick="showSlides(3)"></span>
<span class="dots" onclick="showSlides(4)"></span>
<span class="dots" onclick="showSlides(5)"></span>
</div>
</section>

How to display Image in slider

I am trying to display images in slider. But my images are displaying one below the other.
View:
#if (Model.Photos.Count > 0)
{
<div style="padding:10px">
<div class="slide-content" style="max-width:800px">
#foreach (var photos in Model.Photos)
{
<img class="mySlides" src="#Url.Content(#photos.photo_url)" style="width:100%">
}
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
</div>
</div>
</div>
</div>
}
</div>
CSS :
javascript:

I recreated the carousel using the code you provided. The only issue I found was that there are no dots being provided in the HTML. Once I removed all references to the dots in the JavaScript everything worked as expected.
If you are still experiencing the issue, I would recommend posting the rendered HTML as I didn't encounter any issues related to image positioning.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
//var dots = document.getElementsByClassName("Slides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
/*
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-red", "");
}
*/
x[slideIndex - 1].style.display = "block";
//dots[slideIndex - 1].className += " w3-red";
}
.slide-content {
max-width: 300px;
margin: auto;
position: relative;
}
.mySlides {
display: block;
}
.slide-content {
margin: auto;
}
.w3-center {
text-align: center !important;
}
.w3-section,
.w3-code {
margin-top: 16px !important;
margin-bottom: 16px !important;
}
.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
/* color: #000 !important; */
background-color: #f1f1f1 !important;
}
.w3-btn,
.w3-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.w3-btn,
.w3-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}
button,
html [type=button],
[type=reset],
[type=submit] {
-webkit-appearence: button;
}
/* Custom styles for testing */
img {
max-height: 300px;
margin-left: auto;
margin-right: auto;
}
<div style="padding:10px">
<div class="slide-content" style="max-width:800px">
<img class="mySlides" src="https://i.ytimg.com/vi/5Nj2BngIko0/maxresdefault.jpg">
<img class="mySlides" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg">
<img class="mySlides" src="http://i0.kym-cdn.com/entries/icons/original/000/016/546/hidethepainharold.jpg">
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
</div>
</div>
</div>
</div>

Try using "Owl Carousel 2" plugin, it's great and very simple.

Iterative function to hide/show multiple images with for and if statements

I want to hide and show mulitple images, depending on the input code "places" inside the 'ShowPicture'-function. Please see my full example code below:
<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<style>
body {font-size: 30px; text-align: center; vertical-align: middle}
#containertop {background-color: #808080; width: 100%; position:right}
#parent {display:flex;}
#containercircle {width: 30%;}
#containerimg {background-color: rgba(50,0,50,1);flex:1;}
header, footer {padding: 1em; color: rgba(50,0,50,1);background-color: #808080;clear: left;text-align: center}
#circle {width:100px;float:left;margin:5px; overflow:hidden; height:100px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; background-color:rgba(50,0,50,1); font-size:15px; line-height:100px} #circle:hover{font-size:16.5px;margin:5px;transition: All 0.2s ease-in-out}
.crop {width:40px;height:40px;}
</style>
<script>function ShowPicture(tekst, places){
for (var i = 0, i < places.length; i++) {
var idCust ="pic" + places[i];
var imag = document.getElementById(idCust);
if(imag.style.display === 'block'){
imag.style.display = 'none'; tekst.style.color = '';}
else {
imag.style.display = 'block'; tekst.style.color = 'red';}}}
</script>
</head>
<body>
<header><h1><div id="containertop">header</div></h1></header>
<div id="parent">
<div id ="containercircle" float = "right">
<div id="circle" onclick="ShowPicture(this,1)">Test</div>
</div>
<div id ="containerimg" >
<img id="pic0" class ="crop" src="boor.jpg" style="display:none;"/>
<img id="pic1" class ="crop" src="boor.jpg" style="display:none;"/>
<img id="pic2" class ="crop" src="boor.jpg" style="display:none;"/>
<img id="pic3" class ="crop" src="boor.jpg" style="display:none;"/>
</div>
</div>
<footer><div id="containertop">footer</div></footer>
</body>
</html>
two examples of a "places" code is
"123" and "24"
The function should read off the three numbers separately and hide or show the corresponding "idCust" from the css part. I have made id's in the css that is named "pic1", "pic2", etc.
For some reason, this is not working when I call the "ShowPicture" function after clicking on a div with the "onclick" statement. I got the feeling it has something to do with my for loop.. maybe there is a way to hide/show all together at once, but it should only show the images that correspond to the div I clicked on.

Your problem is that you have an error in your loop the comma in for (var i = 0, i < places.length; i++), should be replaced with a semicolon.
Another thing you were looping on a string and you passed 1 which is a Number so there won't be any loop, you need to pass it as a string in:
onclick="ShowPicture(this,'1')"
Demo:
function ShowPicture(tekst, places) {
for (var i = 0; i < places.length; i++) {
var idCust = "pic" + places[i];
var imag = document.getElementById(idCust);
if (imag) {
if (imag.style.display === 'block') {
imag.style.display = 'none';
tekst.style.color = '';
} else {
imag.style.display = 'block';
tekst.style.color = 'red';
}
}
}
}
body {
font-size: 30px;
text-align: center;
vertical-align: middle
}
#containertop {
background-color: #808080;
width: 100%;
position: right
}
#parent {
display: flex;
}
#containercircle {
width: 30%;
}
#containerimg {
background-color: rgba(50, 0, 50, 1);
flex: 1;
}
header,
footer {
padding: 1em;
color: rgba(50, 0, 50, 1);
background-color: #808080;
clear: left;
text-align: center
}
#circle {
width: 100px;
float: left;
margin: 5px;
overflow: hidden;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: rgba(50, 0, 50, 1);
font-size: 15px;
line-height: 100px
}
#circle:hover {
font-size: 16.5px;
margin: 5px;
transition: All 0.2s ease-in-out
}
.crop {
width: 40px;
height: 40px;
}
<header>
<h1>
<div id="containertop">header</div>
</h1>
</header>
<div id="parent">
<div id="containercircle" float="right">
<div id="circle" onclick="ShowPicture(this,'1')">Test</div>
</div>
<div id="containerimg">
<img id="pic0" class="crop" src="boor.jpg" style="display:none;" />
<img id="pic1" class="crop" src="boor.jpg" style="display:none;" />
<img id="pic2" class="crop" src="boor.jpg" style="display:none;" />
<img id="pic3" class="crop" src="boor.jpg" style="display:none;" />
</div>
</div>