主に技術的なことを書くブログ

浅めにマークアップ&フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

jCarouselのエラーの原因はCSSにあった

jQueryでカルーセル表示させるjCarouselをカスタマイズしようと、とりあえずCSSを読み込まずに組み込んでみたら

jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...


というエラーが出て動かなかったので、いろいろ探ってみたら、

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: 10px;
}


という部分、.jcarousel-item-horizontal というクラス指定を消してしまうと、アイテムの高さと横幅があれして無限ループします的なエラーが出て止まるみたいです。

それでエラーはなくなったんですけど、こんどはなんでか、中に4つほど並ぶ予定のリストの横幅が勝手にスタイルが直書きされてしまって、リストがフロートくずれをおこして縦長になってしまうという問題が起こって、どうやらその辺はjavascript で値が挿入されてるっぽいので、javascript の中とかのぞいてみたけど、それっぽいのが見つからず。

たぶん、上のエラーみたいにCSSの値を計算して、そのスタイルが挿入されてるんではないかと思って、上のCSSの「margin-right:10px」を「100px」にしてみたら、案の定、直書きのスタイルの横幅の値が100pxから1000pxになりました。

横幅を可変で扱えないのと、リストの中のサイズを基本に、全体の横幅とかまで決まってくるみたいで、けっこうCSSがめんどくさいです。

あと、.jcarousel-skin-tango というスキンのクラス名も、.jcarousel-skin- のうしろを変えると、ちゃんとCSSが効かないっぽい。

追記:
横幅の値が取得できないのは、その要素まるごとdisplay:none;してるからでした(その要素をさらにスライドの中とかにしてボタンを押すまでdisplay:none;で隠れる場合など)。