javascript - examples - slider carousel

Varias filas con jcarousel

Question

Intento usar jcarousel para construir un contenedor con varias filas, probé algunas cosas pero no tuve suerte. ¿Alguien puede hacer alguna sugerencia sobre cómo crearlo?

Answer 1

Es posible que desee ver serialScroll o localScroll en lugar de jcarousel.

Answer 2

Encontré esta publicación en Grupos de Google que tiene una versión funcional para varias filas. Lo he usado y funciona genial. http://groups.google.com/group/jquery-en/browse_thread/thread/2c7c4a86d19cadf9

Answer 3

Hemos tenido que hacer una modificación similar. Hacemos esto ampliando las opciones predeterminadas, para incluir un valor de filas y el ancho de cada elemento (los llamamos módulos) y luego dividimos el ancho por el número de filas.

Código agregado a la función jCarousel ...

Agregar a las opciones predeterminadas:

moduleWidth: null,
rows:null,

A continuación, configure al crear jCarousel:

$(''.columns2.rows2 .mycarousel'').jcarousel( {
        scroll: 1,
        moduleWidth: 290,
        rows:2,
        itemLoadCallback: tonyTest,
        animation: ''slow''
    });

Encuentra y edita las líneas en:

$.jcarousel = function(e, o) { 

if (li.size() > 0) {
...
moduleCount = li.size();
wh = this.options.moduleWidth * Math.ceil( moduleCount / this.options.rows );
wh = wh + this.options.moduleWidth;

this.list.css(this.wh, wh + ''px'');

// Only set if not explicitly passed as option
if (!o || o.size === undefined)
   this.options.size = Math.ceil( li.size() / this.options.rows );

Espero que esto ayude,

Tony Dillon

Answer 4

Esto es .js sustituciones de código según @Sike y un poco más de mí, la altura no se estableció dinámicamente, ahora lo es.

var defaults = {
        vertical: false,
        rtl: false,
        start: 1,
        offset: 1,
        size: null,
        scroll: 3,
        visible: null,
        animation: ''normal'',
        easing: ''swing'',
        auto: 0,
        wrap: null,
        initCallback: null,
        setupCallback: null,
        reloadCallback: null,
        itemLoadCallback: null,
        itemFirstInCallback: null,
        itemFirstOutCallback: null,
        itemLastInCallback: null,
        itemLastOutCallback: null,
        itemVisibleInCallback: null,
        itemVisibleOutCallback: null,
        animationStepCallback: null,
        buttonNextHTML: ''<div></div>'',
        buttonPrevHTML: ''<div></div>'',
        buttonNextEvent: ''click'',
        buttonPrevEvent: ''click'',
        buttonNextCallback: null,
        buttonPrevCallback: null,
        moduleWidth: null,
        rows: null,
        itemFallbackDimension: null
    }, windowLoaded = false;


    this.clip.addClass(this.className(''jcarousel-clip'')).css({
        position: ''relative'',
        height: this.options.rows * this.options.moduleWidth
    });

    this.container.addClass(this.className(''jcarousel-container'')).css({
            position: ''relative'',
            height: this.options.rows * this.options.moduleWidth
        });

    if (li.size() > 0) {
            var moduleCount = li.size();
            var wh = 0, j = this.options.offset;
            wh = this.options.moduleWidth * Math.ceil(moduleCount / this.options.rows);
            wh = wh + this.options.moduleWidth;

            li.each(function() {
                self.format(this, j++);
                //wh += self.dimension(this, di);
            });

            this.list.css(this.wh, wh + ''px'');


            // Only set if not explicitly passed as option
            if (!o || o.size === undefined) {
                this.options.size = Math.ceil(li.size() / this.options.rows);
            }
        }

Este es el llamado para usar static_sample.html del paquete de códigos en la descarga de jscarousel:

<script type="text/javascript">

jQuery(document).ready(function() {
    jQuery(''#mycarousel'').jcarousel( {
        scroll: 1,
        moduleWidth: 75,
        rows:2,        
        animation: ''slow''
    });
});

</script>

En caso de que necesite cambiar el contenido del carrusel y volver a cargar el carrusel, debe hacer esto:

// Destroy contents of wrapper
$(''.wrapper *'').remove();
// Create UL list
$(''.wrapper'').append(''<ul id="carousellist"></ul>'')
// Load your items into the carousellist
for (var i = 0; i < 10; i++)
{
$(''#carouselist'').append(''<li>Item '' + i + ''</li>'');
}
// Now apply carousel to list
jQuery(''#carousellist'').jcarousel({ // your config });

La definición de html de carrusel debe ser así:

<div class="wrapper">
    <ul id="mycarousel0" class="jcarousel-skin-tango">
     ...<li></li>
     </ul>
</div>

Gracias a Webcidentes

Answer 5

Probé las soluciones anteriores y encontré que cambiar el código original de jCarousel era problemático: me presentó un comportamiento erróneo porque no funcionaba bien con algunas de las funciones de jCarousel, como el bucle continuo, etc.

Utilicé otro enfoque que funciona muy bien y pensé que otros también podrían beneficiarse de él. Es el código JS que uso para crear los elementos li para admitir un jCarousel con múltiples filas con elegante flujo de elementos, es decir, llenar horizontalmente, luego verticalmente, y luego scrollpages:

123 | 789
456 | 0AB

Agregará elementos (valor de var carruselRows) a un único li y, como tal, le permite a jCarousel admitir varias filas sin modificar el código jCarousel original.

// Populate Album photos with support for multiple rows filling first columns, then rows, then pages
var carouselRows=3; // number of rows in the carousel
var carouselColumns=5 // number of columns per carousel page
var numItems=25; // the total number of items to display in jcarousel

for (var indexpage=0; indexpage<Math.ceil(numItems/(carouselRows*carouselColumns)); indexpage++) // for each carousel page
{
    for (var indexcolumn = 0; indexcolumn<carouselColumns; indexcolumn++) // for each column on that carousel page
    {
        // handle cases with less columns than value of carouselColumns
        if (indexcolumn<numItems-(indexpage*carouselRows*carouselColumns))
        {
            var li = document.createElement(''li'');

            for (var indexrow = 0; indexrow < carouselRows; indexrow++) // for each row in that column
            {
                var indexitem = (indexpage*carouselRows*carouselColumns)+(indexrow*carouselColumns)+indexcolumn;

                // handle cases where there is no item for the row below
                if (indexitem<numItems) 
                {
                    var div = document.createElement(''div''), img = document.createElement(''img'');
                    img.src = imagesArray[indexitem]; // replace this by your images source
                    div.appendChild(img);
                    li.appendChild(div);
                }
            }
            $ul.append(li); // append to ul in the DOM
        }
    }
}

Después de que este código haya rellenado el ul con los elementos li jCarousel debe invocarse.

Espero que esto ayude a alguien.

Jonathan

Answer 6

Si necesita una solución rápida para un requisito fijo o excepcional que definitivamente no implique cambiar el código de la biblioteca principal que puede actualizarse periódicamente, lo siguiente puede ser adecuado. Para convertir los siguientes seis elementos en dos filas en el carrusel:

<div class="item">contents</div>
<div class="item">contents</div>
<div class="item">contents</div>
<div class="item">contents</div>
<div class="item">contents</div>
<div class="item">contents</div>

puede usar un poco de JS para envolver los div en grupos LI de dos y luego inicializar el carrusel. su escenario puede permitirle hacer la agrupación en el servidor no siempre es posible. obviamente puedes extender esto a cuantas filas necesites.

var $pArr = $(''div.item'');
var pArrLen = $pArr.length;
for (var i = 0;i < pArrLen;i+=2){
      $pArr.filter('':eq(''+i+''),:eq(''+(i+1)+'')'').wrapAll(''<li />'');
};