jquery-plugins - bootstrap - plugins slider jquery

¿Es posible implementar un carrusel circular/infinito utilizando el carrusel de búhos?

Question

Estoy utilizando el carrusel de búhos y funciona perfectamente, excepto que no admite el desplazamiento circular / infinito. Busqué ideas en google y stackoverflow sin suerte. ¿Alguien ha implementado el desplazamiento circular / infinito en el carrusel de búhos?

Answer 1

No. Dijeron que el carrusel no admite diapositivas circulares. Posiblemente esto puede ayudar:

rewindNav: true

Pero esto solo funciona con flechas de navegación, no con diapositivas sensibles = (

O puedes huck de alguna manera)

Answer 2

Pude lograrlo usando jquery / php / ajax. Así es como lo hice:

1) Primero debe colocar inicialmente la primera x cantidad de imágenes en la página, que técnicamente será la primera página y luego cargará a través de ajax cada vez que llegue al final del carrusel. En el script de ejemplo que proporcioné, obtengo una lista de imágenes de una tabla de base de datos ficticia llamada "imágenes". En mi script php, para este ejemplo en particular, devolverá 24 divs de elementos de buho con contenido. Para este ejemplo, cargaré inicialmente 24 imágenes a la vez en la primera página y luego ajax intentará devolver 24 más cada vez.

HTML (Necesitará agregar los primeros elementos en el div carrusel y estos serán técnicamente la primera página de elementos. Podría usar php para completar la fuente de la imagen / divs para la primera página inicial. Simplemente use divs normales como lo hice a continuación porque el carrusel les agregará la clase de artículo de búho una vez que se inicialice).

<div class="circle-slider">
    <div>
        <img src="/path/to/image/1" />
    </div>
    <div>
        <img src="/path/to/image/2" />
    </div>
        .... the rest of the images go here, each in their own div ....
        .... for this example I''d load 24 images total ...
</div>

Javascript (este javascript va en la misma página que el HTML anterior).

<script type="text/javascript">
        $(document).ready(function() {
            var itemsPerPage = 0; // The number of items per page.
            var page = 2; // Start on page 2 since we initially created page 1 in HTML
            var working = false; //Boolean to keep the trigger from firing while we work
            var lastvalue = 0; //last value of the owl objects item position array
            var carouselDiv = ''.circle-slider''; // the div that you will be placing the owl carousel on. See HTML above. MUST BE IN jQuery Notation.

            //Normal Owl Carousel Setup. See their site for more options. My example works with these options. No guarantee if you change them to something else that it will work.
            $(carouselDiv).owlCarousel({
                items : 1,
                itemsDesktop : [1920,2],
                itemsDesktopSmall : [980,2],
                itemsTablet: [768,2],
                itemsTabletSmall: [480,1],
                itemsMobile : [370,1],
                singleItem : false,
                itemsScaleUp : false,
                slideSpeed : 800,
                paginationSpeed : 300,
                rewindSpeed : 250,
                pagination:false,
                autoPlay : false,
                afterMove : function() {
                    // This is where all the magic happens. Once you slide the items around and let go this afterMove callback fires.
                    var owl = $(carouselDiv).data(''owlCarousel''); //get the current owl carousel object
                    lastvalue = owl.positionsInArray[owl.positionsInArray.length-1]; //Get the last item position value in the position array

                    if((owl.currentItem == owl.maximumItem) && !working){
                        working = true; //Set working to true so we dont fire more events and load more items until this request is finished working
                        $.ajax({
                            method: "GET",
                            url: "/path/to/php/script/see/script/below",
                            async: false,
                            dataType: "script",
                            data: { page: page, itemWidth: owl.itemWidth }
                        }).done(function( data ) {
                            itemsPerPage = parseInt(cresults.numberOfItems, 10);
                            if( itemsPerPage ){
                                $(''.owl-wrapper'').width($(''.owl-wrapper'').width() + (itemsPerPage * owl.itemWidth)); //modify the width of the wrapper div to handle the new items
                                $(''.owl-wrapper'').append(cresults.html); //append the markup
                                owl.maximumItem = parseInt(owl.maximumItem, 10) + parseInt(itemsPerPage, 10); //modify the max items in the owl object
                                for (var i = 0; i < itemsPerPage; i++) { // add new indexes in the position array for the owl object.
                                    lastvalue = lastvalue-owl.itemWidth
                                    owl.positionsInArray.push(lastvalue);
                                }
                                owl.maximumPixels = owl.maximumPixels - (owl.itemWidth * itemsPerPage); //modify the owl maximum pixels to accomodate new items
                                owl.$owlItems = $(carouselDiv).find(".owl-item");
                                page = page + 1;
                            }
                            working = false;
                        });
                    }
                }
            });
        });
    </script>

PHP SCRIPT (Cree un archivo php y debería ser la página que se usa en la url de ajax en el JavaScript, es decir, $ .ajax ({method: "GET", url: "/ path / to / php / script" ... ..)

<?php
    $page = isset($_GET[''page'']) ? $_GET[''page''] : 2;
    $itemWidth = isset($_GET[''itemWidth'']) ? $_GET[''itemWidth''] : 0;
    //Get 24 images from my database
    $link = mysqli_connect("myhost","myuser","mypassw","mybd") or die("Error " . mysqli_error($link)); 
    $query = ''SELECT * FROM images LIMIT 24 OFFSET '' . (($page - 1) * 24);
    $result = $link->query($query);
    $return = null;
    while($image = mysqli_fetch_object($result)) {
        $return .= ''<div style="width: '' . $itemWidth . ''px;" class="owl-item"><div><img src="'' . $image->path . ''" alt="img" /></div></div>'';
    }

    mysqli_close($link);       
    // Replace some characters in the return string to they wont mess up javascript
    $return = preg_replace(''//n/s'', "", $return);
    $return = preg_replace(''//s/s+/'', '' '', $return);
    $return = preg_replace(''//'/'', ''&rsquo;'', $return);
    echo ''cresults = { "html" : /''' . $return . ''/', numberOfItems: /''' . $result->num_rows . ''/'};''; //echoing the return value will fulfill the Ajax call to this method

Eso es practicamente todo. Muy fácil. Funciona bastante bien también. Si el navegador cambia de tamaño y hace que los elementos del búho también cambien de tamaño, restablece el carrusel al primer elemento, pero me di cuenta de cómo agregar los elementos al objeto para que no ensucie las cosas y eso ya está incluido en el JavaScript. . Avíseme si tiene algún problema y es posible que pueda ayudarlo a solucionarlo. He estado trabajando en esto varios días y lo conseguí, así que no tuve tiempo de probarlo ampliamente, pero sé que funciona en teléfonos móviles, tanto en iPhone como en Android, y en iPads y en navegadores de escritorio. ¡Que te diviertas!

Answer 3

Owl Carousel tiene el loop: true configuración de configuración loop: true . Pero, hay algunos problemas que no me gustan:

1. Owl no pasa a la primera diapositiva cuando está al final, al arrastrar (en lugar de hacer clic en los botones de navegación)
2. Owl retrocede a la primera diapositiva, no se envuelve infinitamente. Esta es una gran diferencia, y no es tan agradable como un carrusel que se desplaza infinitamente de manera circular.

Para ello he encontrado y recomiendo usar el carrusel Slick en su lugar. Slick tiene un "Modo Centro" que tenía exactamente la funcionalidad que estaba buscando:

slick