Hola amigos Arcanitos!
En esta entrada, les mostraré como hacer un slider para mostrar, por ejemplo, productos de una página, o fotos o lo que sea.
El punto es que sacaremos estos elementos desde nuestra base de datos. El resultado quedará algo así:
*Nota: si no recuerdas como conectarse a una base de datos revisa
este artículo
1) Crear el <div> correspondiente para este espacio de nuestra página.
2) Que al cargar la página se carguen los primeros 4 elementos
3) Que al presionar las flechas se invoquen mas elementos de la base de datos y vallan mostrándose.
Nuestra base de datos para el ejemplo será así:
Paso 1: El HTML para el div será asi:
(Nota: Es importante que en el tag <body> se debe agregar la acción "onload='cargar_slider()" para que al cargar la página se ejecute esa función.
Nota 2: Es importante poner "id" a cada objeto que será usado por nuestra función javascript.)
<body onload="cargar_slider()">
<div style="background-color:#AED6F1;">
<div id="productos" class="productos">
<div class="flecha" onclick="cambiar_productos('izq')"><img src="images/flecha_izq.png"></div>
<div class="producto" id="producto0" >
<div class="producto_blanco" style="cursor:pointer;" >
<img width="190" style="max-height:210px;" id="prod0_b">
</div>
<div class="producto_abajo">
<span style="padding-top:20px;" id="prod0_a"></span>
</div>
</div>
<div class="producto" id="producto1">
<div class="producto_blanco" style="cursor:pointer;">
<img width="190" style="max-height:210px;" id="prod1_b">
</div>
<div class="producto_abajo">
<span style="padding-top:20px;" id="prod1_a"></span>
</div>
</div>
<div class="producto" id="producto2">
<div class="producto_blanco" style="cursor:pointer;" >
<img width="190" style="max-height:210px;" id="prod2_b">
</div>
<div class="producto_abajo">
<span style="padding-top:20px;" id="prod2_a"></span>
</div>
</div>
<div class="producto" id="producto3" >
<div class="producto_blanco" style="cursor:pointer;">
<img width="190" style="max-height:210px;" id="prod3_b">
</div>
<div class="producto_abajo">
<span style="padding-top:20px;" id="prod3_a"></span>
</div>
</div>
<div class = "flecha" onclick="cambiar_productos('der')"><img src="images/flecha_der.png"></div>
</div>
</div>
</body>
El CSS de los estilos que usé es el siguiente:
(Nota: este pedazo de código puede estar en el mismo archivo HTML en que se encuentra el div creado anteriormente)
<style>
.productos{
width:1100px;
height:350px;
padding-top:50px;
margin:auto;
font-size:20px;
text-align:left;
display: table;
}
.producto{
width: 20%;
height: 220px;
float:left;
}
.flecha{
width: 10%;
padding-top:100px;
height: 150px;
float:left;
vertical-align:middle;
text-align:center;
cursor:pointer;
}
.producto_blanco{
width: 200px;
background-color: white;
text-align:center;
height:220px;
}
.producto_abajo{
background-color: black;
height: 30px;
color:white;
width: 200px;
font-size:14px;
text-align:center;
vertical-align:middle;
font-weight:bold;
padding-top:10px;
}
</style>
(odio los colores del highlighter pero el que usaba antes como que murió :c )
Las funciones javascript que usaremos serán "cargar slider" y "cambiar slider" la primera no recibe ni un parámetro y la segunda recibe el "lado", si derecha o izquierda.
Recuerden agregar la libreria de jquery ya que lo usaremos para hacer llamadas con ajax.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Las funciones script quedarán así: (Puede verse complicado pero no lo es,
es simple, solo que queda largo porque lo haremos por la fuerza bruta XD)
var pos1=0;
var pos2=1;
var pos3=2;
var pos4=3;
function cargar_slider()
{
$.post(
"cargar_slider.php",
{
action:"cargar_slider"
},
function(data, status)
{
if(status=='success')
{
var serverresponse = JSON.parse(data);
if(serverresponse.arreglo_id.length != 0)
{
$("#prod"+pos1+"_b").attr("src", "images/"+serverresponse.arreglo_foto[pos1]);
$("#prod"+pos1+"_a").html(serverresponse.arreglo_producto[pos1]);
$('#producto0').click(function() {
window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos1]+'';
});
$("#prod"+pos2+"_b").attr("src", "images/"+serverresponse.arreglo_foto[pos2]);
$("#prod"+pos2+"_a").html(serverresponse.arreglo_producto[pos2]);
$('#producto1').click(function() {
window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos2]+'';
});
$("#prod"+pos3+"_b").attr("src", "images/"+serverresponse.arreglo_foto[pos3]);
$("#prod"+pos3+"_a").html(serverresponse.arreglo_producto[pos3]);
$('#producto2').click(function() {
window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos3]+'';
});
$("#prod"+pos4+"_b").attr("src", "images/"+serverresponse.arreglo_foto[pos4]);
$("#prod"+pos4+"_a").html(serverresponse.arreglo_producto[pos4]);
$('#producto3').click(function() {
window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos4]+'';
});
}
}
}
);
}
function cambiar_productos(lado)
{
$.post(
"cargar_slider.php",
{
action:"cargar_slider"
},
function(data, status)
{
if(status=='success')
{
//lo que se recibe desde "cargar_slider.php"
var serverresponse = JSON.parse(data);
if(lado == 'der')
{
if(pos4 == serverresponse.arreglo_id.length-1)
{
pos4=0;
pos3=pos3+1;
pos2=pos2+1;
pos1=pos1+1;
}
else if(pos3 == serverresponse.arreglo_id.length-1)
{
pos3=0;
pos4=pos4+1;
pos2=pos2+1;
pos1=pos1+1;
}
else if(pos1 == serverresponse.arreglo_id.length-1)
{
pos1=0;
pos4=pos4+1;
pos2=pos2+1;
pos3=pos3+1;
}
else if(pos2 == serverresponse.arreglo_id.length-1)
{
pos2=0;
pos4=pos4+1;
pos3=pos3+1;
pos1=pos1+1;
}
else
{
pos1 = pos1+1;
pos2 = pos2+1;
pos3 = pos3+1;
pos4 = pos4+1;
}
$("#prod0_b").attr("src", "images/"+serverresponse.arreglo_foto[pos1]);
$("#prod0_a").html(serverresponse.arreglo_producto[pos1]);
//agrego la funcion que al hacer click en el producto se habra su información
$('#producto0').click(function() {
window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos1]+'';
});
$("#prod1_b").attr("src", "images/"+serverresponse.arreglo_foto[pos2]);
$("#prod1_a").html(serverresponse.arreglo_producto[pos2]);
$('#producto1').click(function() {
window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos2]+'';
});
$("#prod2_b").attr("src", "images/"+serverresponse.arreglo_foto[pos3]);
$("#prod2_a").html(serverresponse.arreglo_producto[pos3]);
$('#producto2').click(function() {
window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos3]+'';
});
$("#prod3_b").attr("src", "images/"+serverresponse.arreglo_foto[pos4]);
$("#prod3_a").html(serverresponse.arreglo_producto[pos4]);
$('#producto3').click(function() {
window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos4]+'';
});
}
if(lado == 'izq')
{
if(pos1 == 0)
{
pos1=serverresponse.arreglo_id.length-1;
pos3=pos3-1;
pos2=pos2-1;
pos4=pos4-1;
}
else if(pos2 == 0)
{
pos2=serverresponse.arreglo_id.length-1;
pos3=pos3-1;
pos4=pos4-1;
pos1=pos1-1;
}
else if(pos3 == 0)
{
pos3=serverresponse.arreglo_id.length-1;
pos1=pos1-1;
pos2=pos2-1;
pos4=pos4-1;
}
else if(pos4 == 0)
{
pos4=serverresponse.arreglo_id.length-1;
pos3=pos3-1;
pos2=pos2-1;
pos1=pos1-1;
}
else
{
pos1 = pos1-1;
pos2 = pos2-1;
pos3 = pos3-1;
pos4 = pos4-1;
}
$("#prod0_b").attr("src", "images/"+serverresponse.arreglo_foto[pos1]);
$("#prod0_a").html(serverresponse.arreglo_producto[pos1]);
$('#producto0').click(function() {
window.location.href='index.php?id=detalle&producto='+serverresponse.arreglo_id[pos1]+'';
});
$("#prod1_b").attr("src", "images/"+serverresponse.arreglo_foto[pos2]);
$("#prod1_a").html(serverresponse.arreglo_producto[pos2]);
$('#producto1').click(function() {
window.location.href='index.php?id=detalle&producto='+serverresponse.arreglo_id[pos2]+'';
});
$("#prod2_b").attr("src", "images/"+serverresponse.arreglo_foto[pos3]);
$("#prod2_a").html(serverresponse.arreglo_producto[pos3]);
$('#producto2').click(function() {
window.location.href='index.php?id=detalle&producto='+serverresponse.arreglo_id[pos3]+'';
});
$("#prod3_b").attr("src", "images/"+serverresponse.arreglo_foto[pos4]);
$("#prod3_a").html(serverresponse.arreglo_producto[pos4]);
$('#producto3').click(function() {
window.location.href='index.php?id=detalle&producto='+serverresponse.arreglo_id[pos4]+'';
});
}
}
}
);
}
3) El archivo que procesará la respuesta de estas funciones anteriores, es decir "cargar_slider.php", será de la siguiente forma:
(Nota: "json_encode" lo uso como forma de enviar de forma ordenada los arreglos que enviaré de vuelta como respuesta.)
<?php
include("config.php");
$action = $_POST['action'];
if($action == "cargar_slider")
{
$arreglo_foto = Array();
$arreglo_id = Array();
$arreglo_producto = Array();
$arreglo_id = Array();
$sql = mysqli_query($link, "select * from Productos");
while($row = mysqli_fetch_array($sql))
{
array_push($arreglo_foto, $row['foto']);
array_push($arreglo_id, $row['id_producto']);
array_push($arreglo_producto, $row['producto']);
}
$json = array('arreglo_foto' => $arreglo_foto, 'arreglo_id' => $arreglo_id, 'arreglo_producto' => $arreglo_producto );
echo json_encode($json);
}
Si tienes cualquier duda escríbeme, si te sirvió este artículo también recuerda dejar un comentario ^^
Si quieres ver este código en funcionamiento haz click
aquí,
Haciendo click aquí podrás ver el código completo del archivo html con el css y las funciones javascript incluídas.