[slick.js]レスポンシブなスライダー「slick」の機能「unslick」を使ってスマホのみ縦積みにする - Qiita
自分用の備忘録として、、、。 オプションのbreakpointでsettings: 'unslick'だけ設定しても、 スマホからPCサイズにリサイズしたとき、上手く切り替えることができません。 以下の方法で、スマホの場合はカルーセルを解除して縦積みに、 PCサイズの場合はイベントを再登録することができます。 記述はES6とES5の記述で分けています。 記述方法 JavaScript(ES6) (function($) { const NAMESPACE = window.NAMESPACE || {}; NAMESPACE.XXXX = function() { let $win = $(window); const _init = function() { $(function(){ mainVisualSlider.init(); }); }; const mainVisualSli
![[slick.js]レスポンシブなスライダー「slick」の機能「unslick」を使ってスマホのみ縦積みにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/aac574235ba9d00b5d8e5e088b8100eef25e6732/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCc2xpY2suanMlNUQlRTMlODMlQUMlRTMlODIlQjklRTMlODMlOUQlRTMlODMlQjMlRTMlODIlQjclRTMlODMlOTYlRTMlODElQUElRTMlODIlQjklRTMlODMlQTklRTMlODIlQTQlRTMlODMlODAlRTMlODMlQkMlRTMlODAlOENzbGljayVFMyU4MCU4RCVFMyU4MSVBRSVFNiVBOSU5RiVFOCU4MyVCRCVFMyU4MCU4Q3Vuc2xpY2slRTMlODAlOEQlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElQTMlRTMlODElQTYlRTMlODIlQjklRTMlODMlOUUlRTMlODMlOUIlRTMlODElQUUlRTMlODElQkYlRTclQjglQTYlRTclQTklOEQlRTMlODElQkYlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTQ2NWRmNmE0NDg0YTQ4NzEzMTNjYjBlNzJlYWM4ZGJm%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzLWthdG8mdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWM3MjMxZjQ2ZDRhMmFjN2FjOWVhZjBjM2UwNjc0NGQx%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Ki44Oz44OG44Kj44O844O744OV44Kh44Kv44OI44Oq44O8%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Df5e3683647643d38abd0f348dc536402)
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
スマートフォン向けウェブサイトで、ブラウザサイズにあわせてコンテンツを拡大縮小させる方法 イクリプススペシャルサイトのケース | blog – NOBORU HIRABAYASHI
昨日立て続けにスマートフォン向けウェブサイトで、ブラウザサイズにあわせてコンテンツを拡大縮小させるサイトを見たので、それらをチェックしてみた。 以前の記事はこちら：スマートフォン向けウェブサイトで、ブラウザサイズにあわせてコンテンツを拡大縮小させる方法 今回チェックするサイトはイクリプス SPECIAL WEBSITEのSP版：http://www.eclipse-avn.jp/sp/ 基本的には以前の記事に記載の方法と近いのですが、ビミョーに違っていてその理由がすいませんわかりません。 デモはこちら：http://noboruhirabayashi.com/test/content_fit1/ 手順1 UserAgentでiPhone、iPod、iPad、Androidの判定。 function userAgentCheck(){ var ua=navigator.userAgent;
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
