I've make a slide presentation in CSS3/javascript but this don't work properly..
When you click on the arrow the "diapos" div are moving on a direction but in my case the text inside the boxes are not totally moving and a small portion of text stay in the the next slide
function clic_left() {
var objet = document.getElementById("diapo1");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2+2000;
diapo1.style.left=left2+"px";
var objet = document.getElementById("diapo2");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2+2000;
diapo2.style.left=left2+"px";
var objet = document.getElementById("diapo3");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2+2000;
diapo3.style.left=left2+"px";
}
function clic_right() {
var objet = document.getElementById("diapo1");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2-2000;
diapo1.style.left=left2+"px";
var objet = document.getElementById("diapo2");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2-2000;
diapo2.style.left=left2+"px";
var objet = document.getElementById("diapo3");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2=left2-2000;
diapo3.style.left=left2+"px";
}#arrow_left {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
opacity: 0.3;
}
#arrow_right {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
right: 5%;
opacity: 0.3;
}
#arrow_right:hover {
displa y: block;
opacity: 1;
transform: translate(5px);
cursor: pointer;
}
#arrow_left:hover {
display: block;
opacity: 1;
transform: translate(-5px);
cursor: pointer;
}
.bordure_left {
position: absolute;
width: 10%;
height: 1024;
top: 3em;
left: 0px;
bottom: 0px;
z-index: 9;
}
.bordure_right {
position: absolute;
width: 10%;
height: 1024;
top: 3em;
right: 0px;
bottom: 0px;
z-index: 9;
}
.centre {
position: absolute;
height: 100em;
width: 1020px;
margin: 118px;
margin-top: 3em;
border: 5px solid;
z-index: 1;
}
#diapo1 {
position: absolute;
left: 0px;
z-index: 1;
transition: 1s;
}
#diapo2 {
position: absolute;
left: 2000px;
z-index: 1;
transition: 1s;
}
#diapo3 {
position: absolute;
left: 4000px;
z-index: 1;
transition: 1s;
}
.robot {
text-align: center;
white-space: normal;
text-shadow: 1px 2px grey;
color: black;
font-size: 1.5em;
font-family: SaborDigital;
word-spacing: 5px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet SIN</title>
<link href="css/style.css" rel=stylesheet type="text/css" />
<script src="js/slide.js"></script>
</head>
<body scroll="no" style="overflow: hidden"> <!-- no scroll -->
<div class="bordure_left">
<p id="arrow_left" onclick="clic_left()">ARROW<p>
</div>
<div class="bordure_right">
<p id="arrow_right" onclick="clic_right()">ARROW<p>
</div>
<div class="centre">
<div id="diapo1">
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
<div id="diapo2">
<p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
<div id="diapo3">
<p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
</div>
</body>click on the "arrow" button to make the translation
You are doing fine, just remember that position and display are tricky CSS options that you need to master by trying out and understanding what they do.
Your example was missing some width and height on the #diapo* elements. The p started to fill in the blanks of the missing space.
I added some background-color, so you can debug it more easily.
References: https://zellwk.com/blog/css-positions/ and https://developer.mozilla.org/en-US/docs/Web/CSS/display
function clic_left() {
var objet = document.getElementById("diapo1");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 + 2000;
diapo1.style.left = left2 + "px";
var objet = document.getElementById("diapo2");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 + 2000;
diapo2.style.left = left2 + "px";
var objet = document.getElementById("diapo3");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 + 2000;
diapo3.style.left = left2 + "px";
}
function clic_right() {
var objet = document.getElementById("diapo1");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 - 2000;
diapo1.style.left = left2 + "px";
var objet = document.getElementById("diapo2");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 - 2000;
diapo2.style.left = left2 + "px";
var objet = document.getElementById("diapo3");
left = getComputedStyle(objet, null).left;
var left2 = parseInt(left);
left2 = left2 - 2000;
diapo3.style.left = left2 + "px";
}#arrow_left {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
left: 5%;
opacity: 0.3;
}
#arrow_right {
color: red;
display: block;
position: absolute;
top: 50%;
bottom: 50%;
right: 5%;
opacity: 0.3;
}
#arrow_right:hover {
display: block;
opacity: 1;
transform: translate(5px);
cursor: pointer;
}
#arrow_left:hover {
display: block;
opacity: 1;
transform: translate(-5px);
cursor: pointer;
}
.bordure_left {
position: absolute;
width: 10%;
height: 1024;
top: 3em;
left: 0px;
bottom: 0px;
z-index: 9;
}
.bordure_right {
position: absolute;
width: 10%;
height: 1024;
top: 3em;
right: 0px;
bottom: 0px;
z-index: 9;
}
.centre {
position: relative; /* changed */
height: 100em;
width: 1020px;
margin: 118px;
margin-top: 3em;
border: 5px solid;
z-index: 1;
}
#diapo1 {
position: absolute;
left: 0px;
z-index: 1;
transition: 1s;
background: red;
height: 100%; /* changed */
width: 100%; /* changed */
}
#diapo2 {
position: absolute;
left: 2000px;
z-index: 1;
transition: 1s;
background: blue;
height: 100%; /* changed */
width: 100%; /* changed */
}
#diapo3 {
position: absolute;
left: 4000px;
z-index: 1;
transition: 1s;
background: green;
height: 100%; /* changed */
width: 100%; /* changed */
}
.robot {
display: block;
height: 100%;
width: 100%;
text-align: center;
white-space: normal;
text-shadow: 1px 2px grey;
color: black;
font-size: 1.5em;
font-family: SaborDigital;
word-spacing: 5px;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet SIN</title>
<link href="css/style.css" rel=stylesheet type="text/css" />
<script src="js/slide.js"></script>
</head>
<body scroll="no" style="overflow: hidden">
<!-- no scroll -->
<div class="bordure_left">
<p id="arrow_left" onclick="clic_left()">ARROW
<p>
</div>
<div class="bordure_right">
<p id="arrow_right" onclick="clic_right()">ARROW
<p>
</div>
<div class="centre">
<div id="diapo1">
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
<div id="diapo2">
<p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
<div id="diapo3">
<p class="robot">AAA ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
<p class="robot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum sagittis sagittis. Duis dui magna, pellentesque sed efficitur nec, maximus vitae ligula. Nunc sed diam interdum, dapibus erat et, sollicitudin leo. Sed egestas dui eget placerat
vestibulum. Quisque ac egestas est. Praesent vel augue vitae sapien consectetur maximus eu eget massa. Quisque dictum libero vel nulla venenatis, eget varius nisl pulvinar. Fusce cursus dapibus sem a efficitur. Quisque vel mauris at nunc malesuada
tincidunt. Nam maximus augue augue, eu hendrerit libero vulputate eu. Nulla convallis nibh leo, ut pretium ipsum condimentum sit amet. Proin porttitor orci est, in posuere augue euismod vitae.
</p>
</div>
</div>
</body>