mercredi 22 juin 2016
How can I make all the pictures in my slideshow the same size?
Link
First of all, I'm still a beginner at coding. So I was trying for like 2 hours to make a slideshow, went to multiple websites, but still couldn't find any good tutorials, so I just copied and pasted this from w3schools.com. It worked, but the buttons disappeared (Just a minor error, I would like for it to be fixed but it's ok if it isn't), and the pictures are all completely different sizes. Even if I do width:__ and stuff, it doesn't get fixed... Can somebody help me with this?
(edit: applied code from the source)
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("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
html {
background-color: white;
}
table {
layout: fixed;
width: 100%;
align-content: center;
background-color: #00FFFA;
}
td {
width: 10%;
text-align: center;
color: black;
text-decoration: none;
-webkit-transition-duration: 0.2s;
}
a {
text-decoration: none;
}
td:hover {
background-color: white;
-webkit-transition-duration: 0.2s;
}
td:active {
background-color: #00F6FF;
color: white;
}
h1 {
color: black;
text-align: center;
}
.red {
width: 100%;
height: 12.5%;
background-color: red;
}
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: black;
}
a:active {
color: black;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 0;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* 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);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
iframe {
float: left;
margin: 10px;
}
.mySlides img {
width: 100%;
height: 500px;
}
<!DOCTYPE html>
<html>
<head>
<title>
Japon
</title>
</head>
<body>
<table>
<tr>
<td><a href="#Japon">Accueil</a>
</td>
<td><a href="#Population">Population</a>
</td>
<td><a href="#Climat">Climat</a>
</td>
<td><a href="#Tourisme">Tourism<a></td>
<td><a href="#Histoire">Histoire</a>
</td>
<td><a href="#Gouvernement">Gouvernement</a>
</td>
<td><a href="#Technologie">Technologie</a>
</td>
<td><a href="#Culture">Culture</td>
<td><a href="#Opinion">Opinion</td>
<td><a href="#Durabilite">Durabilite</td>
</tr>
</table>
<h1 id="Japon">Japon</h1>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 10</div>
<img src="http://us.jnto.go.jp/heritage/images/main_heritage.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 10</div>
<img src="http://www.officeholidays.com/images/slider/japan_03.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 10</div>
<img src="http://www.binglebogfacts.com/wp-content/uploads/2016/03/The-Worlds-Oldest-Company-operated-in-Japan-from-578-AD-to-2006..jpg" style="width:100%">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<hr>
<h1 id="Population">Population</h1>
<iframe width="600" height="371" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/1WPkIPZqfM55PKyvaKmK9_PD-agxjKyMRQY8BtFFXeEk/pubchart?oid=1784900695&format=interactive"></iframe>
<p>La Japon a un de les plus grande populations dans le monde, avec 121,000,000 personnes. Ca c'est dixieme, mais seulement 38eme dans densite de population. L'image au gauche est un charte de population par les ages. Les personnes plus jeunne son't
dans la bas de la charte et les plus vieux son't dans la haut. La population de Japon decline un peut, et experts pense que la population vas etre reduire a un demi par 2082.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<h1 id="Climat">Climat</h1>
<hr>
<h1 id="Tourisme">Tourisme</h1>
<hr>
<h1 id="Histoire">Histoire</h1>
<hr>
<h1 id="Gouvernement">Gouvernement</h1>
<hr>
<h1 id="Technologie">Technologie</h1>
<hr>
<h1 id="Culture">Culture</h1>
<hr>
<h1 id="Opinion">Opinion</h1>
<hr>
<h1 id="Durabilite">Durabilite</h1>
Inscription à :
Publier les commentaires (Atom)
Aucun commentaire:
Enregistrer un commentaire