Wie man einen festen js Schieberegler erstellt

Ich habe einen Java Slider im Gebäude für neue Website funktioniert und habe Probleme, es zu einer festen Größe zu bekommen, es passt sich selbst an die Größe des Bildes. Wie kann ich das relativieren?Wie man einen festen js Schieberegler erstellt

<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>

<!DOCTYPE html> 
 
<html> 
 
<title>Slider</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
 
<body> 
 

 
<h2 class="w3-center">Greenscape slider</h2> 
 

 
<div class="w3-content" style="max-width:400px;position:relative"> 
 
    <img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/cropped-Profile-Pic-1-1.jpg" style="width:100%"> 
 
    <img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/Roiente-Connect-1.png" style="width:100%"> 
 
    <img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/How-solar-works-1.png" style="width:100%"> 
 
    <img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/Greenscape-Logo-1.png" style="width:100%"> 
 
    <img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/Trevor-Sheldrick1-1.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>

Quelle

2016-10-03 James Clapson

Wahrscheinlich müssen Sie den Code wie unten ...

<div class="w3-content" style="width:50%;height:50%;position:absolute;float:left;left:0;"> 
     <img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/cropped-Profile-Pic-1-1.jpg" style="width:100%;height:100%;"> 
     <img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/Roiente-Connect-1.png" style="width:100%;height:100%;"> 
     <img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/How-solar-works-1.png" style="width:100%;height:100%;"> 
     <img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/Greenscape-Logo-1.png" style="width:100%;height:100%;"> 
     <img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/Trevor-Sheldrick1-1.jpg" style="width:100%;height: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>

Quelle

2016-10-03 11:20:43

Dank Kumpel arbeitet jetzt prost einen Reiz gegeben aktualisieren! –

Wie man einen festen js Schieberegler erstellt

Antwort

Verwandte Themen