Hello! Found a simple slide gallery. But when I want to add a new image, it is not displayed, and does not react in any way. Help me figure out how to add a new photo here and what needs to be changed where, and then it turns out crookedly. Thank. HTML code, and CSS, and script are attached.

<body> <div id="slider"> <div id="mask"> <ul id="image_container"> <li><img src="images/bird.jpg" alt="foto" /></li> <li><img src="images/red_bird.jpg" alt="foto" /></li> <li><img src="images/spring.jpg" alt="foto" /></li> <li><img src="images/winter.jpg" alt="foto" /></li> </ul> </div> <img src="resources/glass.png" id="glass"> <ul id="dots"> <li class="button1" onClick="changeImage(1)" ></li> <li class="button2" onClick="changeImage(2)" ></li> <li class="button3" onClick="changeImage(3)" ></li> <li class="button4" onClick="changeImage(4)" ></li> </ul> <img src="resources/fleche-gauche.png" id="fleche_gauche" class="fleche" onClick="prevImage()" > <img src="resources/fleche-droite.png" id="fleche_droite" class="fleche" onClick="nextImage()" > </div> <script> var secDuration = 5; var image = 1; var maxImages = 4; var slider = document.getElementById('slider'); var timeout function changeImage(requiredImage) { if (!requiredImage && requiredImage != 0){ if(image < maxImages){ image++; } else{ image = 1; } } else{ if(requiredImage > maxImages){ image = 1; } else if(requiredImage < 1){ image = maxImages; } else{ image = requiredImage; } } slider.className = "image"+image; clearTimeout(timeout) timeout = setTimeout("changeImage()",secDuration*1000); } function nextImage(){ changeImage(image+1); } function prevImage(){ changeImage(image-1); } changeImage(1); </script> 

 *{ padding:0; margin:0; list-style-type:none; } #slider{ background:url('resources/background.png'); width:960px; height:370px; margin:50px auto; position:relative; } #mask{ width:100%; height:100%; position:absolute; overflow:hidden; } .fleche{ position:absolute; top:145px; cursor:pointer; } #fleche_gauche{ left:-17px; } #fleche_droite{ right: -17px; } #image_container{ position:absolute; width:400%; height:100%; /* Chrome */ -webkit-transition-property:all; -webkit-transition-duration:1s; /* Firefox */ -moz-transition-property:all; -moz-transition-duration:1s; /* Opera */ transition-property:all; transition-duration:1s; } .image1 #image_container{ left:0; } .image2 #image_container{ left:-100%; } .image3 #image_container{ left:-200%; } .image4 #image_container{ left:-300%; } #image_container li{ float:left; } #encart{ position:absolute; top:-15px; left:200px; background:url('resources/text.png'); width:328px; height:396px; } #bouton{ position:relative; width:244px; height:55px; margin: 300px 0px 0px 40px; cursor:pointer; } #dots{ position:absolute; width:130px; height:15px; left:425px; bottom:-25px; } #dots li{ float:left; margin: 0px 2px; width:12px; height:12px; background: url('resources/empty-dot.png'); cursor:pointer; } #dots li:hover{ background: url('resources/selected-dot.png'); } .image1 #dots li.button1, .image2 #dots li.button2, .image3 #dots li.button3, .image4 #dots li.button4{ background: url('resources/selected-dot.png'); cursor:normal; } #glass{ position:absolute; top:0px; left:0px; }

    1 answer 1

    Very curve script. Would not recommend using it.

    There are a lot of great jQuery sliders, for example WOWSlider

    You can also find it without jQuery, but these are less.