Eu tenho um slider
feito pelo OwlCarousel
quero que passem gráficos de pizza renderizados pelo HighCharts
. Ou seja, Eu tenho 4 pie charts
Com legendas, e quero que ao passar os 4 pies
, fiquem também sem a legenda apenas em Mobile.
comentar
|
Sim, é possível, você já esta trabalhando com div's
, basta coloca-las todas dentro de uma outra div
e adicionar as class
que criam esse efeito....
USANDO O FLICKITY
<div class="main-gallery">
<div id="DonuTchartIBV-MMS-1" class="donut gallery-cell"></div>
...
<div id="" class="gallery-cell"></div>
</div>
E claro, carregar as bibliotecas necessárias e adicionar a seguinte linha no seu arquivo .js
:
$('.main-gallery').flickity({
cellAlign: 'left',
contain: true
});
jsFiddle do exemplo usando o flickity
USANDO O OWLCAROUSEL
<div id="owl-example" class="owl-carousel">
<div id="DonuTchartIBV-MMS-1" class="donut"></div>
...
<div></div>
</div>
Carregar as bibliotecas: Theme.css, carousel.css, carousel.js necessárias e adicionar a seguinte linha no seu arquivo .js
:
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
-
Consegui por, mas estou a usar slides diferentes, e achei mais eficaz o Owl Carousel. Consegui por a funcionar, mas não me mostra os gráficos e não entendo o porquê. Poderei partilhar aqui a minha dúvida? – n1c0t0p 3/06/15 às 14:00
-
-
Mais ou menos como isto que tenho na print: prntscr.com/7co09m Até está tudo bem. Mas quando escrevo os gráficos (Highcharts) Ele não mexe o slider (e tem autoplay: 1000) e não existe efeitos nem nada. Só quando faço resize ele actua normalmente. Queria que ele ao ter aquela div naquele "display" ele escreva os gráficos e que ponha o OwlCarousel. Vou tentar expor no fiddle e já mostro :) – n1c0t0p 3/06/15 às 15:05
-
Mostra os gráficos, os valores que tenho no meio e o slider. Mas tudo parado, sem qualquer tipo de animação. – n1c0t0p 3/06/15 às 15:13
-