Q&A
fit-content ⇒ 単純に auto で良いのでは？
###前提・実現したいこと
以下の条件で、横スライドメニューを実装したいです。
①メニューは文字数が異なるので幅を可変的にしたい
②スマホ、PCいずれにもスクロール対応したい
③スクロールした場所で止めたい
###発生している問題
条件①が達成できません。
###該当のソースコード
ユーザーページのメニューを想定しています。
スマホの場合、PCのウィンドウ幅を小さくした場合に、メニューを横スライドさせたいと思っており、以下のようにSwiperを実装しました。
メニューは「トップ」や「タイムライン」のように文字数が異なるので可変的な幅にしたいのですが、どうしたらいいでしょうか？
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.min.js"></script> 5 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.css"> 6 <title>Swiper</title> 7</head> 8<body> 9 <div class="profile"> 10 <img src="https://illustrain.com/wp-content/uploads/2016/12/illustrain01-eto-tori041-300x300.png"> 11 <p>にわとりさん</p> 12 </div> 13 <div class="swiper-container"> 14 <ul class="swiper-wrapper"> 15 <li class="swiper-slide is_active">トップ</li> 16 <li class="swiper-slide">タイムライン</li> 17 <li class="swiper-slide">性格</li> 18 <li class="swiper-slide">スケジュール</li> 19 <li class="swiper-slide">経歴</li> 20 <li class="swiper-slide">欲しいものリスト</li> 21 <li class="swiper-slide">ペット</li> 22 </ul> 23</div> 24</body> 25</html>
css
1/*初期化*/ 2li{list-style: none;} 3ul{padding: 0;} 4 5/*スライダー*/ 6.swiper-button-prev, .swiper-button-next { 7 display: none !important; 8} 9 10/*プロフィール*/ 11.profile { 12 display: flex; 13 align-items: center; 14 margin: 0 0 20px 0; 15} 16.profile p { 17 font-weight: bold; 18 font-size: 2em; 19} 20.profile img { 21 width: 80px; 22 height: 80px; 23 background: pink; 24 border-radius: 50%; 25 margin: 0 15px 0 0; 26} 27 28/*メニュー*/ 29li.is_active { 30 border-bottom: 1px solid red; 31} 32li { 33 margin: 0 10px 0 0; 34} 35
js
1var swiper = new Swiper('.swiper-container', { 2 freeMode: true, 3 freeModeMomentum: false, 4 slidesPerView: 2, 5});
###試したこと
以下の変更と追加を試しました。
オプションslidesPerView: 2をslidesPerView: 'auto'とし表示数を自動に変更して、CSSでwidth: fit-content !important;の追加です。
しかしこちら、Chromeではうまくいくのですが、Firefoxでは幅が全開になってしまいます。
つまり最終的に、Chromeで見たこれを作りたいのです。
js
1var swiper = new Swiper('.swiper-container', { 2 freeMode: true, 3 freeModeMomentum: false, 4 // 変更 5 //slidesPerView: 2, 6 slidesPerView: 'auto', 7});
css
1li { 2 margin: 0 10px 0 0; 3 /*追加*/ 4 width: fit-content !important; 5}
###試したプラグイン
他のプラグイン Owl Carousel(2.3.4) などを試しましたが、条件③のオプションがなかったので断念しました。
上記SwiperにはfreeMode: trueのようにこのオプションがありますので現状近いと思い採用している状況です。
###バージョン情報
Swiperは6.4.15ですが、特にこだわりはありません。
jQueryを使う場合3.4.1を使っています。
言語はJavascriptまたはjQueryでの方法を求めています。
アドバイス宜しくお願い致します。
単純すぎて笑いました。せっかく今下記のようなsetWidthという関数まで作って奮闘していたのですが…ｗ
https://jsfiddle.net/34sjvzxr/
しかしこれではスクロールできすぎてしまって困っていたところなので、そちらのCSSが最適な解法です。
どうもありがとうございました！
このエリアはベストアンサーにできまないようで、誠に恐れ入りますがそのままご回答に記載して頂けますと助かります。
回答1件
ベストアンサーあなたの回答
tips
プレビュー
