Est-il possible de mettre en œuvre un carrousel circulaire/infini en utilisant owl carousel?

Owl Carousel a l' loop: true paramètre de configuration. Mais, il y a quelques problèmes que je n'aime pas:

1. la Chouette n'a pas de goto la première diapositive lorsque, à la fin, lors du déplacement (au lieu de cliquer sur les boutons de navigation)
2. hibou rembobine à la première diapo, il ne s'enroule pas indéfiniment. C'est une grande différence, et pas aussi agréable qu'un carrousel correctement circulaire / infiniment défilant.

a cette fin j'ai trouvé et recommandez l'utilisation du Carrousel lisse à la place. Slick a un "Center Mode" qui a exactement la fonctionnalité que je cherchais:

http://kenwheeler.github.io/slick/

Non.Ils ont dit que le manège ne supporte pas les toboggans circulaires. Éventuellement, cela peut aider:

rewindNav: true

Mais cela ne fonctionne qu'avec les flèches de navigation, pas réactive diapositives =(

Ou vous pouvez huck c'est en quelque sorte)

j'ai pu l'accomplir en utilisant jquery/php / ajax. Voici comment j'ai fait:

1) vous devez d'abord placer la première quantité x d'images sur la page qui sera techniquement la première page et ensuite vous chargerez via ajax chaque fois que vous atteindrez la fin du Carrousel. Dans le script d'exemple que j'ai fourni je reçois une liste d'images d'une table de base de données fictive appelée "images". Dans mon script php, pour cet exemple particulier, il retournera les divs de 24 owl-item avec le contenu. Pour cet exemple, je vais d'abord charger 24 images à la fois sur la première page, puis ajax tentera d'en renvoyer 24 de plus à chaque fois.

HTML (vous aurez besoin d'ajouter les premiers éléments dans le div carrousel et ces éléments seront techniquement la première page des éléments. Vous pouvez utiliser php pour peupler la source divs/image pour la première page initiale. Il suffit d'utiliser divs réguliers comme je l'ai fait ci-dessous parce que le carrousel va ajouter la classe owl-item à eux une fois qu'il initialiser.)

<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 (ce javascript va sur la même page que le HTML ci-dessus.)

<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 (créer un fichier php et ceci devrait être la page qui est utilisée dans l'url ajax dans le JavaScript c.-à-d. $.ajax({method: "GET",url: "/chemin/vers/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

c'est assez bien. Facile comme bonjour. Fonctionne très bien aussi. Si le navigateur redimensionne et provoque les éléments de chouette à redimensionner ainsi, il ne réinitialisez le carrousel au premier élément mais j'ai trouvé comment ajouter les éléments à l'objet pour qu'il ne gâche pas les choses et qui est déjà inclus dans le JavaScript. Dites-moi si vous avez des problèmes et je pourrais vous aider à les régler. J'ai travaillé sur ce plusieurs jours et juste obtenu ce travail donc je n'ai pas eu le temps de tester en profondeur, mais je sais qu'il fonctionne sur les téléphones mobiles, à la fois iPhone et Android et fonctionne sur les iPads ainsi que sur les navigateurs de bureau. Amusez-vous!