carrousel simple

carrouse simple

by JavaFace

HTML

<div class='cont_padre' id='cont_padre'>
 <header class='cont_cabeza' id='cont_cabeza'>
   <input type="button" name="bto_portada_1" id="bto_portada_1" value="Natasha">
   <input type="button" name="bto_portada_2" id="bto_portada_2" value="Adelya">
   <input type="button" name="bto_portada_3" id="bto_portada_3" value="Mysha">
 </header>
 <!---->
<div class='cont_paneles' id='cont_paneles'>
 <section class='paneles' id='panel_1'>
     <figure><img src='https://lh4.googleusercontent.com/-cq10d4LUahU/UhwUkhLJ1rI/AAAAAAAAGbE/x0DGMLlh6h0/w600-h450-no/ima1.jpg'></img></figure>
 </section>
 <section class='paneles' id='panel_2' style='display:none'>
     <figure><img src='https://lh5.googleusercontent.com/-gQnTx7-ALh0/UhwUlZxITVI/AAAAAAAAGbU/CWsqLF1MuIg/w946-h630-no/ima2.jpg'></img></figure>
 </section>
 <section class='paneles' id='panel_3' style='display:none'>
     <figure><img src='https://lh6.googleusercontent.com/-rgJ7IM36uo0/UhwUlSEot6I/AAAAAAAAGbQ/3bfK7D1o6BQ/w670-h503-no/ima3.jpg'></img></figure>
 </section>
<div>
<!---->
<div class='cont_botones'>
<input type="button" name="bto_anterior" id="bto_anterior" value="Anterior">
 <input type="button" name="bto_siguiente" id="bto_siguiente" value="Siguiente">
</div>
<!---->
</div>

CSS

.cont_padre{
width:65%;
margin:5% auto;
overflow:hidden;
}
.cont_cabeza{
width:100%;
text-align:center;
background-color:#252525;
}
.cont_cabeza input[type="button"]{
border: 1px solid rgba(0,0,0,0.2);
cursor: pointer;
display: inline-block;
padding: 6px 10px;
text-align: center;
text-shadow: 0 0 5px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.4);
text-decoration: none;
font-family: 'Calibri';
white-space: normal;
outline: none; 
background:rgba(255,255,255,0.04);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

.activa_button{
font-size:1.2em;
font-weight:bold;
color:#fed803;
}

.cont_paneles{
width:100%;
padding:15px 15px 15px 15px;
}
.paneles{
width:100%;
background-color:#ffffff;
padding:15px 15px 15px 15px;
overflow-y:auto;
}
.paneles figure{
width:480px;
height:450px;
margin:0px auto;
}
figure img{
width:515px;
height:455px;
border-radius:50%;
border:4px solid #252525;	
}
.cont_botones{
width:100%;
text-align:center;
background-color:#252525;
}

.cont_botones input[type="button"]{
border: 1px solid rgba(0,0,0,0.2);
color: #f5f5f5;
cursor: pointer;
display: inline-block;
padding: 6px 10px;
text-align: center;
text-shadow: 0 0 5px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,0.4);
text-decoration: none;
font-size: 1.0em;
font-family: 'Calibri';
white-space: normal;
outline: none; 
background:rgba(255,255,255,0.04);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.cont_botones input[type="button"]:hover{
color:#ffea00;
border-right:1px solid #bbf05f;
}

JavaScript

jQuery(function(){
	
	var section = jQuery('#cont_paneles>section');
	var botones=  jQuery('#cont_cabeza>input[type="button"]');
    var mostrar_section = 0; 
	var pintar_boton=0;
	
    section.hide().first().show(); 
	botones.first().addClass('activa_button');
	
    jQuery("#bto_siguiente").click(function() {
        section.eq(mostrar_section).hide();//oculto el primer panel que esta en la posicion 0
		botones.eq(pintar_boton).removeClass('activa_button');
        mostrar_section = (mostrar_section + 1 < section.length) ? mostrar_section + 1 : 0;
		pintar_boton=(pintar_boton + 1 < botones.length) ? pintar_boton + 1 : 0;
        section.eq(mostrar_section).show(); // muesta el siguiente
		botones.eq(pintar_boton).addClass('activa_button');
    });
	
    jQuery("#bto_anterior").click(function() {
        section.eq(mostrar_section).hide();
		botones.eq(pintar_boton).removeClass('activa_button');
        mostrar_section = (mostrar_section > 0) ? mostrar_section - 1 : section.length - 1;
		pintar_boton = (pintar_boton > 0) ? pintar_boton - 1 : botones.length - 1;
        section.eq(mostrar_section).show(); // muestra el anterior
		botones.eq(pintar_boton).addClass('activa_button');
    });
	
});