0

R. Recco の CloudCarousel V1.0.5 プラグインをさまざまな画像サイズで拡張可能にするにはどうすればよいか考えていました。つまり、画像カルーセルを Foundation レスポンシブ フレームワークに含めました。残りの Web アプリケーションはさまざまなフォント サイズ (レイアウトで rem base を使用) に正しく適合するため、どのプロパティをどのように変更する必要があるかを知りたいです。大きいサイズまたは小さいサイズで同じ側面を維持するためのプラグイン。

現時点では、いくつかの線形プロパティ (xpos、ypos) のみを変更しましたが、プラグインはいくつかの非線形関数 (cos、sin など) を使用するため、従うべきパターン (スペースと位置) を理解できません。ラッパーコンテナーに応じてサイズを変更した後は一致しません)。最小スケールも変更しようとしましたが、これ以上何をすればよいかわかりません。

すべてを適切にスケーリングするために何を変更する必要があるかについて、誰かがヒントを教えてくれますか?

関連するコードを含む jsfiddle を次に示します。これで十分だと思います。

http://jsfiddle.net/joseAyudarte91/UaJg3/6/

これはhtmlです：

      <div id="carousel_wrapper">
            <div id = "cloud_carousel">    
                    <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
                    <!-- You can place links around these images -->
                    <a href="#" rel="Caserio nevado"><img class="cloudcarousel" src="http://s26.postimg.org/jxv8igwfd/image.jpg" alt="Miniatura: caserio nevado" title="Caserio nevado" /></a>
                    <a href="#" rel="Desayuno en el porche"><img class="cloudcarousel" src="http://s26.postimg.org/yjm96pt7t/image.jpg" alt="Desayuno en el porche" title="Desayuno en el porche" /></a>
                    <a href="#" rel="Suite"><img class="cloudcarousel" src="http://s26.postimg.org/62wy00209/image.jpg" alt="Suite" title="Suite "/></a>
                    <a href="#" rel="Porche hamacas"><img class="cloudcarousel" src="http://s26.postimg.org/9rmmzhc15/image.jpg" alt="Porche hamacas" title="Porche hamacas" /></a>
                    <a href="#" rel="Sauna"><img class="cloudcarousel" src="http://s26.postimg.org/4dnurxmax/image.jpg" alt="Sauna" title="Sauna" /></a>
                    <a href="#" rel="camino entorno"><img class="cloudcarousel" src="http://s26.postimg.org/yng2myyp5/image.jpg" alt="Camino entorno" title="Camino entorno" /></a>
                    <a href="#" rel="Sala con minibar"><img class="cloudcarousel" src="http://s26.postimg.org/glwxp64o9/image.jpg" alt="Sala con minibar" title="Sala con minibar" /></a>
                    <a href="#" rel="Pantano Landa"><img class="cloudcarousel" src="http://s26.postimg.org/9swkswdux/image.jpg" alt="Pantano Landa" title="Pantano Landa" /></a>
                            <!--<a href="#" rel="Vistas con nieve"><img class="cloudcarousel" src="images/thumbnails/09.jpg" alt="Vistas con nieve" title="Vistas con nieve" /></a>
                                    <a href="#" rel="Porche vistas exterior"><img class="cloudcarousel" src="images/thumbnails/10.jpg" alt="Porche vistas exterior" title="Porche vistas exterior" /></a>-->
            </div>

            <!-- Define left and right buttons. -->
            <center>
                <input id="slider-left-but" type="button" value="" />
                <input id="slider-right-but" type="button" value="" />
            </center>
            <div id="title_carousel">BIENVENIDO A ATERBE</div>
      </div>

わかりました、申し訳ありませんが、ここにコードを追加するには問題があります。jsfiddle リンクがある場合、なぜそれが必要なのか本当に理解できません.とにかく、すべてがそこに表示されます。

ありがとう

4

1 に答える 1

0

わかりました、以前に見たことのない別の投稿で答えに出くわしました。カルーセル サークルの半径を最初に変更する必要があるようです: Smaller Cloud Carousel

于 2014-01-26T11:41:16.663 に答える