カテゴリー別アーカイブ: JS

スライダーで無限ループ+自動アニメーション+スワイプをしたいならswiper一択か

slick bxslider をためしたが

slick
無限にアニメーションを続ける設定をするとスワイプ機能が死んだ

bx slider
同様にスワイプ機能が死んだ

swiper
今のところうまく動きそう。忘れちゃいけない設定が、スワイプ後に自動アニメーションが切れるのがデフォルトの設定のようなのでoptionで

        autoplay: {
            delay: 0,
            disableOnInteraction: false,
          },

disableOnInteraction falseを設定すること。

jquery ui tabの入れ子でうまく動かないとき

なんとなく使ってしまうjqueryプラグイン。

今回 ui tabを利用していて入れ子にする必要ができた。
想定したく見方をしてもうまく動かなかったので以下を注意する必要がありそう

$(function() {
  $( "#tabs" ).tabs();
});

こうして指定した要素の中のhrefをすべて参照しているぽく、モックサイトでhref=””みたいにブランクしておくとそこでエラーが発生する可能性が。

なので面倒だけど、指定した要素内のhrefはしっかり宛先を指定すればエラー発生の原因を一つ減らすことができそうでした。

結局使うことになるImagemap

レイアウトがこだわりすぎた要素に対して、こだわりすぎたリンクを設置するときにはどうしてもつかうことになる。

今回お世話になったサイト。

◆Imagemapを生成してくれるサイト
https://www.image-map.net/

◆ImagemapにHoverの能力をつけるプラグインの説明サイト
https://cror.net/jquery/jquery-maphilight.html
見てる最中にサイトが落ちちゃった

◆レスポンシブ対応させるプラグインの説明サイト

イメージマップのあのめんどくさい座標マッピングをやってくれる超便利なジェネレータ

colorboxでmodalが開くときに画面幅より一度大きい状態からフィットする現象

サイトのつくりの影響かもしれないが、画面を大幅に超える大きさで表示された後にぴったりとアニメーションで調整される現象がおこった。

 $(".inline").colorbox({
inline:true,
width:"90%",
maxWidth:1020,
rel:'group',
closeButton:false
});

スマホのときは画面幅の90%でPCなどの時は1020くらいを最大にしてよっていう書き方、

色々微調整してもうまくいかなかったので、以下のように逃げました。

$(".inline").colorbox({
inline:true,
maxWidth:"90%",
rel:'group',
closeButton:false
});
.modal-content {
  max-width: 1020px;
}

とりあえずこれで回避。
原因はなんだったのだろうか。