web-dev-qa-db-ja.com

フクロウカルーセルを使用して円形/無限のカルーセルを実装することは可能ですか？

私はフクロウカルーセルを使用していますが、円形/無限スクロールをサポートしていないことを除いて完全に動作します。私はグーグルとstackoverflowでアイデアを検索しましたが、運はありませんでした。誰かがフクロウのカルーセルに円形/無限スクロールを実装していますか？

jquery-pluginsowl-carouselinfinite-carousel
17
Manu Goel

フクロウカルーセルにはloop: true構成設定。しかし、私が好きではないいくつかの問題があります：

  1. フクロウは、（ナビゲーションボタンをクリックするのではなく）ドラッグするときに、最後に最初のスライドに移動しません
  2. フクロウは最初のスライドに巻き戻します。無限に折り返しません。これは大きな違いであり、適切に円形/無限にスクロールするカルーセルほど喜ばしいものではありません。

そのために、代わりにスリックカルーセルを使用することをお勧めします。 Slickには、まさに私が探していた機能を備えた「センターモード」があります。

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

7
leepowers

いいえ、カルーセルは円形のスライドをサポートしていないと言っていました。おそらくこれは役立つかもしれません：

rewindNav: true

ただし、これはナビゲーション矢印でのみ機能し、レスポンシブスライドでは機能しません=（

または、どういうわけかハックすることもできます）

1
spiny_beast

Jquery/php/ajaxを使用して達成できました。ここに私がそれをした方法があります：

1）最初に、技術的には最初のページになる最初のx個の画像を最初にページに配置する必要があります。その後、カルーセルの最後に到達するたびにajaxを介して読み込みます。私が提供したスクリプト例では、「images」という架空のデータベーステーブルから画像のリストを取得しています。この特定の例のphpスクリプトでは、コンテンツを含む24個のフクロウ項目divを返します。この例では、最初に最初のページに一度に24個の画像をロードし、次にajaxは毎回24個の画像を返そうとします。

[〜＃〜] html [〜＃〜]（最初のアイテムをカルーセルdivに追加する必要があり、これらのアイテムは技術的にアイテムの最初のページになります。phpを使用して、最初の最初のページのdivs/imageソース。次のように通常のdivを使用します。カルーセルは、初期化するとフクロウ項目クラスを追加するためです。

<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（このJavaScriptは上記のHTMLと同じページに表示されます。）

<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（phpファイルを作成します。これはJavaScriptのajax URLで使用されるページでなければなりません。つまり、$。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

それはほとんどそれです。やさしい。かなりうまく機能します。ブラウザのサイズが変更され、フクロウのアイテムのサイズも変更される場合、カルーセルは最初のアイテムにリセットされますが、アイテムを混乱させないようにアイテムをオブジェクトに追加する方法を見つけました。これはすでにJavaScriptに含まれています。問題がある場合はお知らせください。問題を解決できる可能性があります。この数日間取り組んでいて、これをうまく動かしたので、広範囲にテストする時間はありませんでしたが、iPhoneとAndroidの両方であり、iPadでも同様に動作しますデスクトップブラウザのように。

0
pogeybait