Pregunta sobre css, jquery, javascript, carousel – Cómo mover un elemento de carrusel al medio cuando se hace clic en jQuery

1

¿Cómo puedo hacer que el centro del carrusel se convierta en el elemento central? Busqué una respuesta en todas partes, pero no son respuestas directas ... ¿Puede alguien ayudarme en esto, por favor?

Esto es lo que he hecho hasta ahora:http://jsfiddle.net/sp9Jv/

HTML:

<code><div id="wrapper">
    <div id="carousel">
        <a href="#" class="prev">prev</a>
        <a href="#" class="next">next</a>

        <div class="viewport">
            <ul>
                <li><a href="#">Un</a></li>
                <li><a href="#">Deux</a></li>
                <li><a href="#">Trois</a></li>
                <li><a href="#">Quatre</a></li>
                <li><a href="#">Cinq</a></li>
                <li><a href="#">Six</a></li>
                <li><a href="#">Sept</a></li>
                <li><a href="#">Huit</a></li>
            </ul>
        </div>
        <!-- viewport -->

    </div>
    <!-- carousel -->
</div>
<!-- wrapper -->
</code>

JavaScript:

<code>var carousel = $('#carousel'),
    prev = carousel.find('.prev'),
    next = carousel.find('.next'),
    viewport = carousel.find('.viewport'),
    item = viewport.find('li'),
    itemWidth = item.outerWidth(true),
    itemNum = item.length,
    itemList = viewport.find('ul');

itemList.width(itemWidth * itemNum);

var moveCarousel = function(dir) {
    itemList.animate({ left: '-=' + (itemWidth  * dir) + 'px' }, 400);  
};

//prev
prev.on('click', function(e) {
    e.preventDefault();
    moveCarousel(-1);
});

//next
next.on('click', function(e) {
    e.preventDefault();
    moveCarousel(1);
});

//carousel item
item.on('click', 'a', function(e) {
    var self = $(this),
        selfIndex = self.index(),
        distance = itemList.width() / 2,
        selfPos = self.position(),
        selfPosLeft = selfPos.left,
        viewportPosLeft = viewport.position().left;

    e.preventDefault();

    //move item to middle, but it doesn't work... 
    if (selfPosLeft > Math.floor(viewport.width())/3) {
        itemList.animate({ left: '-' + Math.floor(viewport.width())/3 + 'px' }, 400);
    }

    if (selfPosLeft < Math.floor(viewport.width())/3) {
        itemList.animate({ left: Math.floor(viewport.width())/3 + 'px' }, 400);
    }
});
</code>

CSS:

<code>#wrapper {
    width: 500px;
    margin: 20px auto;
}
#carousel {
    position: relative;
}
.viewport {
    width: 260px;
    border: 1px solid #6e6e6e;
    height: 80px;
    overflow: hidden;
    position: relative;
    margin-left: 100px;
}
.prev, .next {
    position: absolute;
}
.prev {
    top: 20px;
    left: 0;
}
.next {
    top: 20px;
    right: 0;
}

.viewport ul {
    position: absolute;
}
.viewport li {
    float: left;
    margin-right: 10px;
}
.viewport li a {
    display: block;
    width: 80px;
    height: 80px;
    background: #ddd;
}
</code>
Puede ser cualquier número, pero para este ejemplo solo 3. Sólo quiero algo que me dé una ventaja, luego puedo adaptarlo más tarde ... Shaoz
¿Su carrusel siempre muestra solo tres elementos o puede ser más? Tina CG Hoehr

Tu respuesta

2   la respuesta
3

mentos, puede calcular el valor de la izquierda según el elemento seleccionado.

Aquí está mi modificación:

y he enlazado la acción de clic de los elementos del carrusel con esta función y pasé el elemento pulsado utilizando la palabra clave propia.

<code>var itemClicked=function(item){
    var itemIndex=$(item).index(),
        newLeft=(itemIndex*itemWidth*-1)+Math.floor(($(viewport).width()/itemWidth)/2)*itemWidth;
    $(itemList).animate({left:newLeft+"px"},400);
};
</code>

Puedes comprobarlo trabajando en esta url:http://jsfiddle.net/rUZHg/3/

Supongo que esto debería funcionar a pesar del número de elementos vistos mientras calcula el relleno entre el 0 izquierdo y el elemento central a la izquierda.

Gracias @ mhh1422, esto es lo que estaba buscando ... Y funciona ... Shaoz
1

Creé un globalcurrentItem que rastrea lo que hay en el centro. Cada vez que el carrusel se mueve esto se actualiza.

La variable muy útil que encontré fueselfPosLeft que me dijo en qué se hacía clic. Debería añadir que90 fue el múltiplo que obtuve de hacer clic alrededor. Debe estar vinculado a su CSS y no sé cómo encontrar este número de forma dinámica.

Por favor pruebalo :)http://jsfiddle.net/sp9Jv/4/

Bueno, estoy imaginando que cuando tienes más de 3 elementos puedes cambiar el código para calcular la diferencia entre el elemento actual y elselfPosLeft del clic, te lo dejo :) Así parece funcionar.http://jsfiddle.net/sp9Jv/5/

Gracias, @Mia DiLorenza, funciona ... Aprecio su respuesta y esfuerzo ... Shaoz

Preguntas relacionadas