0

我想知道如何使 R. Recco 的 CloudCarousel V1.0.5 插件可扩展为不同的图像大小。我的意思是：我已经在 Foundation 响应式框架中包含了图像轮播，并且由于我的 Web 应用程序的其余部分正确地适合不同的字体大小（在布局中使用 rem base），我想知道我必须更改哪些属性以及如何更改该插件以保持与更大或更小的尺寸相同的方面。

目前，我只更改了一些线性属性（xpos、ypos），但由于插件使用了一些非线性函数（cos、sin..etc），我无法计算出要遵循的模式（空格和位置与包装容器相应地更改大小后不匹配）。我也尝试过修改最小比例，但我不知道还有什么要触摸的。

有人可以向我提供一些关于需要更改哪些内容才能正确扩展所有内容的提示吗？

这是带有相关代码的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

好的，我在之前没见过的另一篇文章中找到了答案。看来轮播圈的radius需要先改一下：Smaller Cloud Carousel

于 2014-01-26T11:41:16.663 回答