Carrusel no centrará sus diapositivas

Tengo un problema con mi carrusel de jQuery: sus diapositivas no se centran en la ventana gráfica cuando hago clic en el botón "siguiente diapositiva".

En cambio, se colocarán 'en algún lugar' alrededor del centro, ligeramente fuera de lugar, ya que jQuery parece deslizar mis imágenes según el ancho total del carrusel (creo).

Aquí les dejo una página de prueba que hice para que la vean mejor:

http://paragraphe.org/stackoverflowdemos/slider-how-to-center-slides/

...y aquí está el código que estoy usando, tomado de un tema de WordPress. Jugué con él durante un tiempo y logré cambiar algunos comportamientos, pero no era mi principal preocupación.

jQuery(document).ready(function () {
    jQuery("#mainholder").css("width", "100%");
    jQuery("#mainindex").css("width", "100%");
    jQuery("#mainholder #holder div.singleitem").css({
        "margin-left": 10
    });
    jQuery("#mainholder #holder div.singleitem").last().addClass("last").css({
        "border-right": "10px"
    });
    jQuery("#mainindex #imagediv img").css({
        "margin-left": 0
    });
    jQuery("#mainindex #imagediv img").last().css({
        "margin-right": 0
    });
    totalwidth = jQuery("#holder").width(); // Total large image width          
    totalimages = jQuery("#holder .singleitem").size();
    totalwidth = totalwidth + (10) * (totalimages + 1);
    jQuery("#holder").css({
        "width": totalwidth
    });
    sliderwidth = 1;
    jQuery("#imagediv img").each(function () {
        sliderwidth = sliderwidth + parseInt(jQuery(this).attr("width")) + 1;
    });
    jQuery(".end").css("right", "0");
    if (totalimages <= 1) {
        jQuery("#mainholder").addClass("fixwidth");
        jQuery("#mainholder").css("width", "960px");
        jQuery("a.leftnav,a.rightnav").hide();
    }
    variablechange(); //for initialization before window resize is called
    function variablechange() {
        tempslidedist = new Array();
        slidedist = new Array();
        screenwidth = jQuery(window).width(); // Visible screen width
        handlewidth = ((screenwidth / 10) - 6); // width of the slider handle according to the width of the screen      
        screenmid = (screenwidth) / 2; // Middle of visible screen
        tempval = (screenmid * 10000) / (totalwidth); // The total distance the slider has moved when it reaches the middle of the screen.
        mval = totalwidth * .000095; //
        holdermulti = (totalwidth - screenwidth + 10) / 1000; // Multiple value with which the main images move     
        halfhandlewidth = handlewidth / 2;
        jQuery("#imagediv").css("width", (sliderwidth) + "px");
        indexwidth = (sliderwidth - handlewidth - 5);
        jQuery("#index").css("width", indexwidth + "px");
        divratio = (indexwidth) / 1000;
        if (sliderwidth > screenwidth) {
            jQuery("#index").css("margin-left", "71px");
        } else {
            jQuery("#index").css("margin-left", "");
        }
        slidespeed = (1000 / (sliderwidth)) * 95;
        if (sliderwidth < (handlewidth + 10) || totalimages == 0) { //+10 is added to make the difference larger so when they are almost same, the
            error doesnot takeplace
            jQuery("#mainindex").hide();
            jQuery(".slider-navigation a.leftnav, .slider-navigation a.rightnav").hide();
        } else {
            jQuery("#mainindex").show();
            jQuery(".slider-navigation a.leftnav, .slider-navigation a.rightnav").show();
        }
        for (var i = 0; i < totalimages; i++) {
            if (i == 0) {
                tempslidedist[i] = ((jQuery("#imagediv img:eq(" + (i) + ")").width() - ((handlewidth + 3) / 2)) + (jQuery("#imagediv
 img:eq(" + (i + 1) + ")").width() / 2) + 0);
            } else {
                tempslidedist[i] = (tempslidedist[i - 1] + jQuery("#imagediv img:eq(" + (i) + ")").width() / 2 + jQuery("#imagediv
 img:eq(" + (i + 1) + ")").width() / 2 + 0);
            }
            slidedist[i] = Math.round(((tempslidedist[i])) / divratio);
        }
    }
    jQuery(".imgexcerpt").hide();
    jQuery(".imglink").mouseover(function () {
        jQuery("#mainholder").addClass("disablemove");
    });
    jQuery(".imglink").mouseout(function () {
        jQuery("#mainholder").removeClass("disablemove");
    });
    jQuery(".imgexcerpt").mouseover(function () {
        jQuery("#mainholder").addClass("disablemove");
    });
    jQuery(".imgexcerpt").mouseout(function () {
        jQuery("#mainholder").removeClass("disablemove");
    });
    jQuery(".imglink").click(function (e) { //Toggling the show/hide the img excerpt link   
        thisimgwidth = jQuery(this).parent().find("img").width();
        if (thisimgwidth < 355) {
            exceptwidth = (.85 * thisimgwidth);
        } else {
            exceptwidth = 340;
        }
        jQuery(this).parent().siblings().find(".imgexcerpt").fadeOut("fast").end().find("img").fadeTo("fast", 1).end().find(".imglink").addClass("show");
        if (jQuery(this).hasClass("show")) {
            jQuery(this).parent().find(".imgexcerpt").css({
                "width": exceptwidth
            }).fadeIn("fast");
            jQuery(this).parent().find("img").fadeTo("fast", .3);
            jQuery(this).removeClass("show");
        } else {
            jQuery(this).parent().find(".imgexcerpt").css({
                "width": exceptwidth
            }).fadeOut("fast");
            jQuery(this).parent().find("img").fadeTo("fast", 1);
            jQuery(this).addClass("show");
        }
    });
    jQuery("#index").slider({
        max: 1000,
        animate: true,
        step: 1,
        change: ifSliderChange,
        slide: ifSliderSlide
    });
    jQuery("#index").slider("value", (0));
    jQuery("#index").css("z-index", "99");
    mainfunctions(); //for initialization before window resize  
    function mainfunctions() {
        jQuery("#index .ui-slider-handle").css("width", (handlewidth) + "px");
        if (sliderwidth < screenwidth) {
            jQuery("#index .ui-slider-handle").css("margin", "0 -" + (handlewidth / 2 + 3) + "px");
        }
    }
    animating = false;
    click = -1;
    jQuery(".leftnav").live("click", function () {
        if (!animating && !jQuery("#mainholder").hasClass("disablemove")) {
            if (click >= 0) {
                click--;
            }
            var sliderpos = jQuery("#index").slider("value");
            var flag = 0;
            for (var j = totalimages; j >= 0; j--) {
                if ((sliderpos > slidedist[(j)]) && flag == 0) {
                    click = j;
                    flag = 1;
                }
            }
            if (click < 0) {
                jQuery("#index").slider("value", (0));
            } else {
                jQuery("#index").slider("value", (slidedist[click]));
            }
            animating = true;
        }
    });
    jQuery(".rightnav").live("click", function () {
        if (!animating && !jQuery("#mainholder").hasClass("disablemove")) {
            click++;
            var sliderpos = jQuery("#index").slider("value");
            var flag = 0;
            for (var j = 0; j < totalimages; j++) {
                if ((slidedist[(j)] > sliderpos) && flag == 0) {
                    click = j;
                    flag = 1;
                }
            }
            if (sliderpos >= 1000) {
                jQuery("#index").slider("value", (0));
                click = -1;
            } else {
                jQuery("#index").slider("value", (slidedist[click]));
            }
            animating = true;
        }
    });
    jQuery(".end").css("z-index", "99");
    jQuery(".start").css("z-index", "99");
    jQuery(".end").click(function () {
        jQuery("#index").slider("value", (1000));
    });
    jQuery(".start").click(function () {
        jQuery("#index").slider("value", (0));
    });
    jQuery(window).resize(function () {
        variablechange();
        mainfunctions();
    });

    function ifSliderChange(e, ui) {
        jQuery("#mainindex").animate({
            scrollLeft: (((ui.value - tempval) * mval))
        }, 500);
        jQuery("#mainholder").animate({
            scrollLeft: (ui.value * holdermulti)
        }, 500, function () {
            animating = false;
        });
    }

    function ifSliderSlide(e, ui) {
        jQuery("#mainholder").prop({
            scrollLeft: (ui.value * holdermulti)
        });
    }
});

¿Sabrías una manera de obtener las imágenes en el centro de la ventana gráfica?

Muchas gracias!

preguntado el 22 de mayo de 12 a las 15:05

Creo que uno de los problemas que tiene o que podría estar contribuyendo al menos es el hecho de que tiene un margen izquierdo: 10px en todos los div que contienen las imágenes. Creo que esto está causando un problema de cálculo porque cuando te desplazas hasta el final, se aleja cada vez más del centro (lo que podría ser 10 px por vez). En lugar de hacer estoimgwidth = jQuery(this).parent().find("img").width(); prueba thisimgwidth = jQuery(this).outerWidth(true); *El verdadero incluye el margen del elemento -

@Peanuts: en el futuro, formatee correctamente su código para que otros puedan leerlo más fácilmente. Además, eso es mucho código para pedirle a la gente que revise. Recomiendo crear un ejemplo simple que demuestre el soluciones problema que está teniendo o, mejor aún, crear un violín. -

¿Qué estás haciendo para centrarlos? No veo nada para centrarlos. Su ventana gráfica (el ancho de la pantalla no es fijo, pero el ancho de las imágenes es fijo (900 px) -

Gracias chicos por sus observaciones, voy a trabajar más en esto. De hecho, el "desplazamiento" progresivo es de 10 px a la vez (¿debido al margen?), por lo que podría trabajar en esa dirección. Además, sería increíble si alguien pudiera sugerir algún ajuste para que, en lugar de mover las imágenes por su ancho, por clic, se deslicen hacia el centro de la ventana gráfica. -

0 Respuestas

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.