Y
yamashita
Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
hola amiguitos tengo un problemilla pequeñito resulta que tengo mi slider javascript gallery y se ven la imagenes rotando de posicion pero la cuarta imagen no se ve les dejo mi codigo para que vean:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>image slider </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- image slider start-->
<div class="slider">
<div class="slides">
<!-- radio buttoms start-->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!-- radio buttoms end -->
<!-- slides images start -->
<div class="slide first">
<img src="1.jpg" alt="">
</div>
<div class="slide">
<img src="2.jpg" alt="">
</div>
<img src="3.jpg" alt="">
</div>
<div class="slide">
<img src="4.jpeg" alt="">
</div>
<!-- slide images end -->
<!-- automatic navigation start -->
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
<!-- automatic navigation end -->
</div>
<!-- manual navigation start -->
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
<!-- manual navigation end -->
</div>
<!-- image slider end -->
<script type="text/javascript">
var counter = 1;
setInterval(function(){
document.getElementById('radio' + counter).checked = true;
counter++;
if(counter > 4){
counter = 1;
}
},5000);
</script>
</body>
</html>
ººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººº
aca les dejo el css
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.slider {
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
}
.slides {
width: 500%;
height: 500px;
display: flex;
}
.slides input {
display: none;
}
.slide {
width: 20%;
transition: 2s;
}
.slide img {
width: 800px;
height: 500px;
}
/* css for manual slide navigation */
.navigation-manual{
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn {
border: 2px solid #40D3DC;
padding: 5px;
border-radius : 10px;
cursor: pointer;
transition:1s;
}
.manual-btn:not🙂last-child){
margin-right: 40px;
}
.manual-btn:hover {
background: #40D3DC;
}
#radio1:checked ~ .first {
margin-left: 0;
}
#radio2:checked ~ .first {
margin-left: -20%;
}
#radio3:checked ~ .first {
margin-left: -40%;
}
#radio4:checked ~ .first {
margin-left: -60%;
}
/*css for automatic navigation */
.navigation-auto{
position:absolute;
display: flex;
width: 800px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div {
border: 2px solid #40D3DC;
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not🙂last-child){
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1 {
background: 40D3DC;
}
#radio2:checked ~ .navigation-auto .auto-btn2 {
background: 40D3DC;
}
#radio3:checked ~ .navigation-auto .auto-btn3 {
background: 40D3DC;
}
#radio4:checked ~ .navigation-auto .auto-btn4 {
background: 40D3DC;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>image slider </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- image slider start-->
<div class="slider">
<div class="slides">
<!-- radio buttoms start-->
<input type="radio" name="radio-btn" id="radio1">
<input type="radio" name="radio-btn" id="radio2">
<input type="radio" name="radio-btn" id="radio3">
<input type="radio" name="radio-btn" id="radio4">
<!-- radio buttoms end -->
<!-- slides images start -->
<div class="slide first">
<img src="1.jpg" alt="">
</div>
<div class="slide">
<img src="2.jpg" alt="">
</div>
<img src="3.jpg" alt="">
</div>
<div class="slide">
<img src="4.jpeg" alt="">
</div>
<!-- slide images end -->
<!-- automatic navigation start -->
<div class="navigation-auto">
<div class="auto-btn1"></div>
<div class="auto-btn2"></div>
<div class="auto-btn3"></div>
<div class="auto-btn4"></div>
</div>
<!-- automatic navigation end -->
</div>
<!-- manual navigation start -->
<div class="navigation-manual">
<label for="radio1" class="manual-btn"></label>
<label for="radio2" class="manual-btn"></label>
<label for="radio3" class="manual-btn"></label>
<label for="radio4" class="manual-btn"></label>
</div>
<!-- manual navigation end -->
</div>
<!-- image slider end -->
<script type="text/javascript">
var counter = 1;
setInterval(function(){
document.getElementById('radio' + counter).checked = true;
counter++;
if(counter > 4){
counter = 1;
}
},5000);
</script>
</body>
</html>
ººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººººº
aca les dejo el css
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: black;
}
.slider {
width: 800px;
height: 500px;
border-radius: 10px;
overflow: hidden;
}
.slides {
width: 500%;
height: 500px;
display: flex;
}
.slides input {
display: none;
}
.slide {
width: 20%;
transition: 2s;
}
.slide img {
width: 800px;
height: 500px;
}
/* css for manual slide navigation */
.navigation-manual{
position: absolute;
width: 800px;
margin-top: -40px;
display: flex;
justify-content: center;
}
.manual-btn {
border: 2px solid #40D3DC;
padding: 5px;
border-radius : 10px;
cursor: pointer;
transition:1s;
}
.manual-btn:not🙂last-child){
margin-right: 40px;
}
.manual-btn:hover {
background: #40D3DC;
}
#radio1:checked ~ .first {
margin-left: 0;
}
#radio2:checked ~ .first {
margin-left: -20%;
}
#radio3:checked ~ .first {
margin-left: -40%;
}
#radio4:checked ~ .first {
margin-left: -60%;
}
/*css for automatic navigation */
.navigation-auto{
position:absolute;
display: flex;
width: 800px;
justify-content: center;
margin-top: 460px;
}
.navigation-auto div {
border: 2px solid #40D3DC;
padding: 5px;
border-radius: 10px;
transition: 1s;
}
.navigation-auto div:not🙂last-child){
margin-right: 40px;
}
#radio1:checked ~ .navigation-auto .auto-btn1 {
background: 40D3DC;
}
#radio2:checked ~ .navigation-auto .auto-btn2 {
background: 40D3DC;
}
#radio3:checked ~ .navigation-auto .auto-btn3 {
background: 40D3DC;
}
#radio4:checked ~ .navigation-auto .auto-btn4 {
background: 40D3DC;
}