Comunidad de diseño web y desarrollo en internet online

¿Cómo hacer un "slide" muy sencillo con poco código?

Citar            
MensajeEscrito el 10 Ago 2015 05:27 am
Hola compañeros, ando necesitando realizar un slide pero no soy muy bueno en programación y me cuesta mucho adaptarme a los slides ya hechos que encontré en internet, nunca termino de entender cómo aplicarlos para que me funcionen bien.

Tengo el código HTML y CSS, y me gustaría saber si alguien me puede ayudar a hacer que al mantener click en el botón de la derecha (si prueban el código, sería el rectángulo que aparece negro transparente a la derecha) se vaya navegando por la galería o "slide" hacia la derecha, hasta el final (es decir, que no sea en un ciclo infinito), y con el botón de la izquierda, obviamente hacia la izquierda (hasta el principio, y que ahí frene).

Les dejo un link para que se descarguen el pack de archivos por si lo necesitan, y más abajo les dejo el código HTML y CSS por si sirve.

Pack de archivos para descargar

HTML

Código HTML :

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <link rel="stylesheet" href="css.css">
</head>
<body>

<div class="container">
   <div class="button-back">X</div>
   <div class="button-forward">X</div>
   <div class="image"><img src="images/dog.jpg" alt="" /></div>
   <div class="image"><img src="images/field.jpg" alt="" /></div>
   <div class="image"><img src="images/gnome.jpg" alt="" /></div>
   <div class="image"><img src="images/golf.jpg" alt="" /></div>
   <div class="image"><img src="images/leaf.jpg" alt="" /></div>
   <div class="image"><img src="images/pencils.jpg" alt="" /></div>
</div>

</body>
</html>


CSS

Código CSS :

html, body
{
   background-color: #444;
   font-size: 10px;
   margin: 0px;
   padding: 0px;
}

.container
{
   font-size: 0px;
   height: 100%;
   letter-spacing: -1px;
   margin: 0px 0px;
   overflow: hidden;
   padding: 0px 0px;
   position: absolute;
   text-align: left;
   white-space: nowrap;
   width: 100%;
   word-spacing: -1px;
}

.container .button-back,
.container .button-forward
{
   background: #111;
   height: 100%;
   opacity: 0.5;
   position: fixed;
   width: 5%;
   z-index: 1000;
}
.container .button-back
{
   left: 0px;
   top: 0px;
}

.container .button-forward
{
   right: 0px;
   top: 0px;
}

.container div.image
{
   background-color: #333;
   display: inline-block;
   font-size: 1rem;
   height: 100%;
   letter-spacing: normal;
   margin: 0px;
   padding: 0px;
   position: relative;
   white-space: normal;
   word-spacing: normal;
}

.container div.image img
{
   height: 100%;
}

Por Sinbirome

2 de clabLevel



 

firefox
Citar            
MensajeEscrito el 10 Ago 2015 08:26 pm
Jajaja no chavo como crees? xD si es bien facil modificar los plugins... jejejeje bueno no =P pero si quieres hacer un plugin asi como dices debes entender la logica de lo que estas haciendo...

Por ejemplo aqui el primer problema es que debes definir un ancho de la imagen, si no lo tienes va a ser un problema más calcular el tamaño de la página.

Pero bueno vamos por pasos ¿que es lo primero que quieres hacer?

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 10 Ago 2015 08:31 pm

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 15 Ago 2015 04:48 am

elporfirio escribió:

Por cierto aquí un ejemplo mas o menos de lo que quieres hacer :) http://jsfiddle.net/elporfirio/5pbe8/


Gracias elporfirio =)
Al final me puse a usar un plugin que se llama slick (este: http://kenwheeler.github.io/slick/), pero no pude personalizarlo por completo. Me olvidé de fijarme las respuestas a este post, pero muchas gracias por la ayuda =).

No sé casi de programación así que tuve problemas con los plugins, y slick me resolvió muchos temas pero un problema es que me modifica el DOM una vez que ya cargó la página (creo). Logré hacer un slide con slick pero le quiero poner un recuadro de texto arriba de cada slide (uno que no ocupe todo el slide) y no puedo. Si alguna vez usaste slick, avisame y te digo cuál fue mi problema =)

Gracias por la ayuda!

Por Sinbirome

2 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.