Question

我想知道如何使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链接，我真的不明白为什么它需要..无论如何，一切都可以在那里看到。

由于

Answer 1

好的，我在另一篇我以前没见过的帖子中遇到了答案。似乎需要首先更改旋转木马圈的辐射：Smaller Cloud Carousel

如何使用不同的图像大小缩放云轮播v1.0.5

1 个答案: