uniwebsidad

Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Problema con slider creado con JavaScript

3 de marzo de 2015

Hola a todos, estoy intentando hacer un widget para mi blog que sea un slider de una serie de 10 fichas que he hecho a base de CSS y HTML. El problema es que en el editor HTML lo tengo todo correcto, pero al añadir todo el código a mi web no obtengo el resultado que sí consigo en el editor. Creo que el problema es el JavaScript.

Si entráis en http://www.dostiroslibres.com/ podréis ver cómo en el lateral derecho debajo de la imagen hay un slider que comienza con la primera ficha de las 10 (que he creado consecutivas la una a la otra). Pero en cuanto tiene que hacer el scroll no pasa a la siguiente, sino que se queda en el limbo. SI sigues pulsado los botones llegas de nuevo a la primera y después a 3 fichas más. En ese momento es el único donde eso es el efecto que quiero. Pero al pasar a la cuarta ficha vuelven a desaparecer y no aparecen las seis restantes.

Me gustaría que me dijerais como hago para que el slider funcione de manera automática correctamente y para que me vaya scrolleando las 10 fichas. Os dejo el código, tanto HTML como CSS del widget, a ver si sabéis de dónde viene el error, porque yo ya no se qué hacer.

Muchas gracias.

HTML con el JavaScript y el estilo del slider.

<div id="contenedor_principal">
    <span class="flecha izq"></span>
    <span class="flecha der"></span>
    <div id="contenedor_slider">
        <div id="slider22">
            <div id="pricing-table" class="clear">
                <div class="plan">
                    <h3><b>#1</b> Jahill Okafor<span><img src="http://i288.photobucket.com/albums/ll175/dostiroslibres/okafor_zpsgsee5w3s.png" /></span></h3>
                    <a class="signup" href="">VER FICHA</a>
                    <ul>
                        <li><b>Año:</b> 1995 (19)</li>
                        <li><b>College:</b> Duke</li>
                        <li><b>Posición NBA:</b> C</li>
                        <li><b>Estadísticas:</b> 18.3 Pts 9.4 Rbt</li>
                    </ul>
                </div>
 
                <div class="plan">
                    <h3><b>#2</b> Karl Towns<span><img src="http://i288.photobucket.com/albums/ll175/dostiroslibres/towns_zpshrudmhhf.png" /></span></h3>
                    <a class="signup" href="">VER FICHA</a>
                    <ul>
                        <li><b>Año</b> 1995 (19)</li>
                        <li><b>College:</b> Kentucky</li>
                        <li><b>Posición NBA:</b> PF/C</li>
                        <li><b>Estadísticas:</b> 9.3 Pts 6.8     Rbt</li>
                    </ul>
                </div>
                <div class="plan">
                    <h3><b>#3</b><font size="4">
                        D'Angelo Russell</font><span><img src="http://i288.photobucket.com/albums/ll175/dostiroslibres/russel_zpsh8lzcdoh.png" /></span></h3>
                    <a class="signup" href="">VER FICHA</a>
                    <ul>
                        <li><b>Año</b> 1996 (19)</li>
                        <li><b>College:</b> Ohio State</li>
                        <li><b>Posición NBA:</b> PG</li>
                        <li><b>Estadísticas:</b> 19 Pts 5.3  Ast</li>
                    </ul>
                </div>
                <div class="plan">
                    <h3><b>#4</b><font size="3"> Emmanuel Mudiay</font><span><img src="http://i288.photobucket.com/albums/ll175/dostiroslibres/mudiay_zpstrgf0w70.png" /></span></h3>
                    <a class="signup" href="">VER FICHA</a>
                    <ul>
                        <li><b>Año:</b> 1996 (18)</li>
                        <li><b>Equipo:</b> Guangdong</li>
                        <li><b>Posición NBA:</b> PG</li>
                        <li><b>Estadísticas:</b> 17.7 Pts 5.9 Asts</li>
                    </ul>
                </div>
                <div class="plan">
                    <h3><b>#5</b><font size="4"> Stanley Johnson</font><span><img src="http://i288.photobucket.com/albums/ll175/dostiroslibres/johson_zpsxjrcnqbs.png" /></span></h3>
                    <a class="signup" href="">VER FICHA</a>
                    <ul>
                        <li><b>Año</b> 1996 (18)</li>
                        <li><b>College:</b> Arizona</li>
                        <li><b>Posición NBA:</b> SF</li>
                        <li><b>Estadísticas:</b> 19 Pts 6.8  Rbt</li>
                    </ul>
                </div>
                <div class="plan">
                    <h3><b>#6</b> Mario Hezonja<span><img src="http://i288.photobucket.com/albums/ll175/dostiroslibres/hezonja_zpsz15zbrws.png" /></span></h3>
                    <a class="signup" href="">VER FICHA</a>
                    <ul>
                        <li><b>Año</b> 1995 (20)</li>
                        <li><b>Equipo:</b> FC Barcelona</li>
                        <li><b>Posición NBA:</b> SG/SF</li>
                        <li><b>Estadísticas:</b> 8.6 Pts 2   Rbt</li>
                    </ul>
                </div>
                <div class="plan">
                    <h3><b>#7</b><font size="3"> Willie Cauley-Stein</font><span><img src="http://i288.photobucket.com/albums/ll175/dostiroslibres/cauley_zpsplysswzj.png" /></span></h3>
                    <a class="signup" href="">VER FICHA</a>
                    <ul>
                        <li><b>Año</b> 1993 (21)</li>
                        <li><b>College:</b> Kentucky</li>
                        <li><b>Posición NBA:</b> C</li>
                        <li><b>Estadísticas:</b> 9.1 Pts 6.7     Rbt</li>
                    </ul>
                </div>
                <div class="plan">
                    <h3><b>#8</b><font size="3"> Kristaps Porzingis</font><span><img src="http://i288.photobucket.com/albums/ll175/dostiroslibres/porzinings_zpsrsxal7kn.png" /></span></h3>
                    <a class="signup" href="">VER FICHA</a>
                    <ul>
                        <li><b>Año</b> 1995 (19)</li>
                        <li><b>Equipo:</b> CB Sevilla</li>
                        <li><b>Posición NBA:</b> PF</li>
                        <li><b>Estadísticas:</b> 10.1 Pts 4.7    Rbt</li>
                    </ul>
                </div>
                <div class="plan">
                    <h3><b>#9</b> Justise Winslow<span><img src="http://i288.photobucket.com/albums/ll175/dostiroslibres/winslow_zpsyjlyewga.png" /></span></h3>
                    <a class="signup" href="">VER FICHA</a>
                    <ul>
                        <li><b>Año</b> 1996 (18)</li>
                        <li><b>College:</b> Duke</li>
                        <li><b>Posición NBA:</b> SF</li>
                        <li><b>Estadísticas:</b> 12.0 Pts 5.6    Rbt</li>
                    </ul>
                </div>
                <div class="plan">
                    <h3><b>#10</b> Myles Turner<span><img src="http://i288.photobucket.com/albums/ll175/dostiroslibres/turner_zpswe9tsjqw.png" /></span></h3>
                    <a class="signup" href="">VER FICHA</a>
                    <ul>
                        <li><b>Año:</b> 1996 (18)</li>
                        <li><b>College:</b> Texas</li>
                        <li><b>Posición NBA:</b> C</li>
                        <li><b>Estadísticas:</b> 11.0 Pts 6.7    Rbt</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
 
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        border: none;
        position: relative;
    }
 
    html, body33 {
        width: 100%;
        height: 100%;
    }
 
    div#contenedor_principal {
        width: 223px;
        height: 600px;
        margin: 0 auto;
    }
 
    div#contenedor_principal > div#contenedor_slider{
        border: 0px solid #0002222;
        width: 223px;
        height: 501px;
        background: #transparent;
        margin:  auto;
        overflow: hidden;
    }
 
    div#contenedor_principal > span.flecha{
        z-index: 99;
        width: 60px;
        height: 60px;
        top: 240px;
        position: absolute;
        cursor: pointer;
    }
 
    div#contenedor_principal > span.der {
        right: -30px;
        background-image: url('http://i288.photobucket.com/albums/ll175/dostiroslibres/felas22222_zpsumuvigzt.png');
        background-repeat: no-repeat;
        background-position: -60px 0;
    }
 
    div#contenedor_principal > span.izq{
        left: -30px;
        background-image: url('http://i288.photobucket.com/albums/ll175/dostiroslibres/felas22222_zpsumuvigzt.png');
        background-repeat: no-repeat;
        background-position: 0 0;
    }
 
    div#contenedor_principal > div#contenedor_slider div#slider{
        width: 200%; /* este width es sobrescrito en el onload. es equivalente a 2 imágenes */
        position: relative;
        left: 0;
        top: 0;
    }
 
    div#contenedor_principal > div#contenedor_slider div#slider img {
        width: 100px; /* mismo width de #contenedor_slider */
        height: 100px; /* mismo height de #contenedor_slider */
        float: left;
    }
</style>
 
<script type="text/javascript">
    var namespaceSlider = {
 
        Evento: function(elemento,nomevento,funcion) {
            if (elemento.attachEvent) {
                var fct=function(){
                    funcion.call(elemento,window.event);
                }
                elemento.attachEvent('on'+nomevento,fct);
                return true;
            } else if (elemento.addEventListener) {
                elemento.addEventListener(nomevento,funcion,false);
                return true;
            } else {
                return false;
            }
        },
 
        estableceValoryEventos: window.onload = function() {
            var selectorSlider = document.getElementById('slider22');
            var n_Imagenes = selectorSlider.getElementsByTagName('img').length;
            selectorSlider.style.width = parseInt(n_Imagenes * 100, 10) + '%';
 
            var spans = document.querySelectorAll('span.flecha');
            namespaceSlider.Evento(spans[0], 'click', function() {namespaceSlider.mover(n_Imagenes, 0)});
            namespaceSlider.Evento(spans[1], 'click', function() {namespaceSlider.mover(n_Imagenes, 1)});
        },
 
        clicks: 0,
        posInicial: 0,
        anchoImg: 100,
 
        mover : function(nImg, i){
 
            namespaceSlider.clicks += (i == 0) ? parseInt(nImg-1, 10) : parseInt(i, 10);
            var indiceImg = namespaceSlider.clicks % nImg;
            var posFinal = namespaceSlider.anchoImg * parseInt(indiceImg, 10);
            var slider = document.getElementById('slider22');
 
            if (namespaceSlider.posInicial >= posFinal) { // escrolea hacia la izquierda
 
                (function desplazar() {
                    setTimeout(function(){
 
                        if(namespaceSlider.posInicial <= posFinal) return;
                        namespaceSlider.posInicial -= 2;
                        slider.style.left = -namespaceSlider.posInicial + '%';
                        desplazar();
                    },6);
                })();
 
            } else { // escrolea hacia la derecha
 
                (function desplazar() {
                    setTimeout(function(){
 
                        if(namespaceSlider.posInicial >= posFinal) return;
                        namespaceSlider.posInicial += 2;
                        slider.style.left = -namespaceSlider.posInicial + '%';
                        desplazar();
                    },6);
                })();
            }
        }
    }
</script>

Y el css de las fichas:

body {
    background: #303030;
}
 
#pricing-table {
    margin: 100px auto;
    text-align: center;
    width: 5000px;
 /* total computed width = 222 x 3 + 226 */;
}
 
#pricing-table .plan {
    font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
    text-shadow: 0 1px rgba(255,255,255,.8);
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    padding: 20px;
    width: 181px;
 /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */
    float: left;
    position: relative;
}
 
#pricing-table #most-popular {
    z-index: 2;
    top: -13px;
    border-width: 3px;
    padding: 30px 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
    box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
}
 
/* --------------- */   
 
#pricing-table h3 {
    font-size: 20px;
    font-weight: normal;
    padding: 20px;
    margin: -20px -20px 50px -20px;
    background-color: #eee;
    background-image: -moz-linear-gradient(#fff,#eee);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(#fff, #eee);
    background-image: -o-linear-gradient(#fff, #eee);
    background-image: -ms-linear-gradient(#fff, #eee);
    background-image: linear-gradient(#fff, #eee);
}
 
#pricing-table #most-popular h3 {
    background-color: #ddd;
    background-image: -moz-linear-gradient(#eee,#ddd);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
    background-image: -webkit-linear-gradient(#eee, #ddd);
    background-image: -o-linear-gradient(#eee, #ddd);
    background-image: -ms-linear-gradient(#eee, #ddd);
    background-image: linear-gradient(#eee, #ddd);
    margin-top: -30px;
    padding-top: 30px;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
 
#pricing-table .plan:nth-child(1) h3 {
    -moz-border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    border-radius: 5px 0 0 0;
}
 
#pricing-table .plan:nth-child(4) h3 {
    -moz-border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    border-radius: 0 5px 0 0;
}
 
#pricing-table h3 span {
    display: block;
    font: bold 25px/100px Georgia, Serif;
    color: #777;
    background: #fff;
    border: 5px solid #fff;
    height: 100px;
    width: 100px;
    margin: 10px auto -65px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
    -webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
    box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
}
 
/* --------------- */
 
#pricing-table ul {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
}
 
#pricing-table li {
    border-top: 1px solid #ddd;
    padding: 10px 0;
}
 
/* --------------- */
 
#pricing-table .signup {
    position: relative;
    padding: 8px 20px;
    margin: 20px 0 0 0;
    color: #fff;
    font: bold 14px Arial, Helvetica;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    background-color: #cc4728;
    background-image: -moz-linear-gradient(#cc4728, #cc4728);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#cc4728), to(#62bc30));
    background-image: -webkit-linear-gradient(#cc4728, #cc4728);
    background-image: -o-linear-gradient(#cc4728, #cc4728);
    background-image: -ms-linear-gradient(#cc4728, #cc4728);
    background-image: linear-gradient(#cc4728, #cc4728);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 0 1px 0 rgba(0,0,0,.3);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 rgba(0, 0, 0, .7);
}
 
#pricing-table .signup:hover {
    background-color: #cc4728;
    background-image: -moz-linear-gradient(#cc4728, #cc4728);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#cc4728), to(#cc4728));
    background-image: -webkit-linear-gradient(#cc4728, #cc4728);
    background-image: -o-linear-gradient(#cc4728, #cc4728);
    background-image: -ms-linear-gradient(#cc4728, #cc4728);
    background-image: linear-gradient(#cc4728, #cc4728);
}
 
#pricing-table .signup:active, #pricing-table .signup:focus {
    background: #cc4728;
    top: 2px;
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, .7) inset;
}
 
/* --------------- */
 
.clear:before, .clear:after {
    content: "";
    display: table;
}
 
.clear:after {
    clear: both;
}
 
.clear {
    zoom: 1;
}
css html javascript

Respuestas

#1

Por lo que he visto, el problema está en el elemento #pricing-table, cuyos estilos CSS actuales son los siguientes:

#pricing-table {
    margin: 100px auto;
    text-align: center;
    width: 892px;  /* <-- quita esta propiedad */
}

Si quitas la propiedad width, para que el elemento tenga una anchura automática, el problema se resuelve (al menos en Google Chrome): ver imagen del slider funcionando

@javiereguiluz

3 marzo 2015, 15:32
#2

Perfecto, que cosa más tonta era, estaba cegado.

EDIT: Problema resuelto. Muchísimas gracias.

@dostiroslibres

3 marzo 2015, 18:03