web-dev-qa-db-fra.com

Est-il possible de mettre en place un carrousel circulaire/infini en utilisant un carrousel de hibou?

J'utilise hibou carrousel et cela fonctionne parfaitement sauf qu'il ne supporte pas le défilement circulaire/infini. J'ai cherché des idées sur google et stackoverflow sans succès. Quelqu'un at-il implémenté le défilement circulaire/infini dans le carrousel des hiboux?

17
Manu Goel

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

  1. Owl ne passe pas à la première diapositive à la fin, en glissant (au lieu de cliquer sur les boutons de navigation)
  2. Owl rembobine sur la première diapositive, il ne s’enroule pas à l’infini. C'est une grande différence, et pas aussi agréable qu'un carrousel proprement circulaire/défilant à l'infini.

À cette fin, j'ai trouvé et recommande d'utiliser le carrousel Slick à la place. Slick a un "Mode Centre" qui avait exactement les fonctionnalités que je recherchais: 

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

7
leepowers

Non, ils ont dit que le carrousel ne supportait pas les diapositives circulaires… .. Cela pourrait peut-être aider:

rewindNav: true

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

Ou vous pouvez le faire quelque part)

1
spiny_beast

J'ai été capable de le faire en utilisant jquery/php/ajax. Voici comment je l'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, puis vous chargerez via ajax chaque fois que vous atteindrez la fin du carrousel. Dans l'exemple de script 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 renverra 24 divs owl-item avec un contenu. Pour cet exemple, je vais d'abord charger 24 images à la fois sur la première page, puis ajax essaiera d'en retourner 24 à chaque fois.

HTML(Vous devrez ajouter les premiers éléments au div du carrousel et ces éléments constitueront techniquement la première page des éléments. Vous pouvez utiliser php pour renseigner la source divs/image de la première page. Juste utilisez des divs réguliers comme je l’ai fait ci-dessous car le carrousel y ajoutera la classe hibou-item une fois initialisé).

<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éez un fichier php et ceci devrait être la page utilisée dans l'URL ajax du JavaScript, à savoir $ .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

C'est à peu près tout. C'est de la tarte. Fonctionne assez bien aussi. Si le navigateur redimensionne et provoque le redimensionnement des éléments chouette, il réinitialise le carrousel sur le premier élément, mais je découvre comment ajouter les éléments à l'objet pour qu'il ne gâche pas le contenu et qu'il soit déjà inclus dans JavaScript. . Faites-moi savoir si vous avez des problèmes et je pourrais peut-être aider à les résoudre. Cela fait plusieurs jours que je travaille et ça fonctionne donc je n'ai pas encore eu le temps de le tester, mais je sais que cela fonctionne sur les téléphones mobiles, iPhone et Android, sur iPad et sur les navigateurs de bureau. S'amuser!

0
pogeybait