18

私はフクロウのカルーセルを使用していますが、循環/無限スクロールをサポートしていないことを除いて、完全に機能します。私はグーグルとスタックオーバーフローでアイデアを探しましたが、うまくいきませんでした。フクロウのカルーセルに循環/無限スクロールを実装した人はいますか?

4

3 に答える 3

8

Owl Carousel にはloop: true構成設定があります。ただし、気に入らない問題がいくつかあります。

  1. フクロウは、最後にドラッグすると最初のスライドに移動しません（ナビゲーションボタンをクリックする代わりに）
  2. フクロウは最初のスライドに巻き戻しますが、無限に回り込むわけではありません。これは大きな違いであり、適切に循環する/無限にスクロールするカルーセルほど満足できるものではありません。

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

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

于 2015-06-06T02:59:14.077 に答える
1

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

rewindNav: true

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

または、何らかの方法でハッキングすることもできます）

于 2014-02-24T08:45:56.257 に答える
0

jquery/php/ajax を使用して実現できました。これが私がやった方法です：

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

HTML (最初のアイテムをカルーセル div に追加する必要があります。これらのアイテムは、技術的にはアイテムの最初のページになります。php を使用して、最初の最初のページの div/image ソースを設定できます。私が行ったように、通常の div を使用するだけです。カルーセルが初期化されると owl-item クラスをそれらに追加するためです)。

<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 とデスクトップブラウザーで動作することはわかっています。楽しむ！

于 2015-07-25T07:13:21.173 に答える