Как масштабировать облачную карусель v1.0.5 с различными размерами изображения

Мне было интересно, как я мог сделать плагин R. Recco CloudCarousel V1.0.5 масштабируемым с различными размерами изображений. Я имею в виду: я включил карусель изображений в платформу, реагирующую на Foundation, и, поскольку остальная часть моего веб-приложения правильно соответствует разным размерам шрифтов (с использованием базы rem в макете), я хотел бы знать, какие свойства мне нужно изменить и как в плагин, чтобы сохранить тот же аспект с большими или меньшими размерами.

На данный момент я изменил только некоторые линейные свойства (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... В любом случае, там все видно.

Спасибо

Источник

1 ответ

Решение

Хорошо, я столкнулся с ответом в другом посте, которого я раньше не видел. Похоже, что сначала нужно изменить радиус круга карусели: Меньшая облачная карусель

Источник
Другие вопросы по тегам