I have to make a slider page in full screen but only with this image, with buttons on the side so that it moves to the next frame. I need ideas please. I can only use js and css nothing of jquery / bootstrap
I have to make a slider page in full screen but only with this image, with buttons on the side so that it moves to the next frame. I need ideas please. I can only use js and css nothing of jquery / bootstrap
Something like this should work for you
<!DOCTYPE HTML>
<html>
<head>
<title>slider</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
overflow:hidden;
}
#wrapper {
min-height: 100%;
background-image:url('https://i.stack.imgur.com/gRUVn.jpg');
background-repeat:repeat-x;
background-size:auto 100%;
}
a{
position:fixed;
height:30px;
width:30px;
text-shadow:1px 1px 1px #000;
-moz-border-radius:15px 15px 15px 15px;
border-radius:15px 15px 15px 15px;
background:#0000ff;
opacity:0.5;
}
a:hover{
background:#ff0000;
}
</style>
<script>
var position = 0;
function move(direction) {
position = position + direction * 500; //ancho del desplazamiento deseado
document.getElementById('wrapper').style.backgroundPosition = position + 'px 0px';
}
</script>
</head>
<body>
<div id="wrapper"></div>
<a href="#" id="link1" onclick="move(1)" class="link" style="top:50%;left:10px;"></a>
<a href="#" id="link2" onclick="move(-1)" class="link" style="top:50%;right:10px;"></a>
</body>
</html> Where 01.jpg is your background image and position = position + direction * 500; is the displacement according to your image
Greetings!