Hola una pregunta alguien me puede ayudar con este codigo de mi slider??
Alguien conoce una forma facil de hacer funcionar los circulos para poder elegir la imagen que quiera? Yo no se como se hace.
Este es todo el codigo de Jquery
$(document).ready(function(){
var slider=$('#slider');
var Sig=$('.sig');
var Ant=$('.atr');
$('#slider section:last').insertBefore('#slider section:first');
slider.css('margin-left','-'+100+'%');
function MoverD(){
slider.animate({
marginLeft:'-'+ 200 +'%'
},500,function(){
$('#slider section:first').insertAfter('#slider section:last');
slider.css('margin-left','-'+100+'%');
});
}
Sig.click(function(){
MoverD();
});
function MoverI(){
slider.animate({
marginLeft:0
},500,function(){
$('#slider section:last').insertBefore('#slider section:first');
slider.css('margin-left','-'+100+'%');
});
}
Ant.click(function(){
MoverI();
});
var AutoPlay= setInterval(MoverD,4000);
$('#c-slider').hover(function(){
clearInterval(AutoPlay);
},function(){
AutoPlay= setInterval(MoverD,4000);
});
});
y el html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="estilos.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="JS.js"></script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="c-slider">
<div id="slider">
<section><img src="DisFue.png" alt=""></section>
<section><img src="DisMar.png" alt=""></section>
<section><img src="DisNeg.png" alt=""></section>
<section><img src="DisNuevoG.png" alt=""></section>
</div>
<div class="sig">></div>
<div class="atr"><</div>
<div class="controles">
<div class="control active"></div>
<div class="control"></div>
<div class="control"></div>
<div class="control"></div>
</div>
</div>
</body>
</html>