質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

194閲覧

Swiperを使っているのですが、テキストが選択できません

dboy

総合スコア3

スライダー

GUIのグラフィカルウィジェットのひとつです。インジケーターを動かすことで値を調節可能とします。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2024/07/04 09:00

実現したいこと

PCサイトで縦スライドのSwiperを使って制作しています。
スライド自体は問題ないのですが、テキストをマウスカーソルで選択させたいです

発生している問題・分からないこと

文章にマウスカーソルで選ぼうとするとうまくいきません

該当のソースコード

HTML

1<body> 2 <div class="swiper"> 3 <div class="swiper-wrapper"> 4 <section class="swiper-slide slide1"> 5 <img src="img/logo.png" alt="art" class="logo1 pc_only"> 6 <img src="img/logo_s.png" alt="art" class="logo1 sp_only"> 7 </section> 8 <section class="swiper-slide slide2"> 9 <p class="text1 pc_only">文章テスト文章テスト文章テスト文章テスト </p> 10 <p class="text1 sp_only">文章テスト文章テスト文章テスト文章テスト文章テスト</p> 11 </section> 12 <section class="swiper-slide slide3"> 13 <p class="text2 pc_only">テスト文章テスト文章テスト文章テスト文章テスト文章 </p> 14 <p class="text2 sp_only">テスト文章テスト文章テスト文章テスト文章テスト文章 </p> 15 </section> 16 <section class="swiper-slide slide4"> 17 <div class="slide4_2"> 18 <img src="img/logo.png" alt="art" class="logo2 pc_only"> 19 <img src="img/logo_s.png" alt="art" class="logo1 sp_only"> 20 <p class="text3">文章テスト文章テスト文章テスト文章テスト文章テスト</p> 21 <p class="text3">テストタイトルテスト文章テスト文章テスト文章テスト文章テスト</p> 22 </div> 23 24 <div class="copyright"><adress>Copyright . All Rights Reserved.</adress></div> 25 </section> 26 </div> 27 <!-- ページネーション --> 28 <div class="swiper-pagination"></div> 29 <!-- 前後の矢印 --> 30 <div class="swiper-button-prev"></div> 31 <div class="swiper-button-next"></div> 32 </div> 33 34 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 35<!-- Swiper用JavaScript --> 36<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> 37 <script src="js/main.js"></script> 38</body>

css

1body{ 2 font-size: 16px; 3 font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif; 4} 5 6.logo1{ 7 width:60%; 8} 9@media screen and (max-width: 430px) { 10 .logo1{ 11 width:90%; 12 } 13} 14 15.logo2{ 16 width:100%; 17} 18@media screen and (max-width: 430px) { 19 .logo2{ 20 width:90%; 21 } 22} 23 24.swiper-slide{ 25 height: 100%; 26 display: flex; 27 flex-flow: column; 28 align-items: center; 29 justify-content:center; 30 background-attachment:scroll; 31 background-position:center center; 32} 33 34.slide1{ 35 background: url(../img/pc1.jpg) no-repeat; 36 background-attachment:scroll; 37 background-position:center center; 38} 39 40@media screen and (max-width: 430px) { 41 .slide1{ 42 background: url(../img/sp1.jpg) no-repeat; 43 background-size: 100%; 44 } 45} 46 47.slide2{ 48 background: url(../img/pc2.jpg) no-repeat; 49 background-attachment:scroll; 50 background-position:center center; 51} 52 53 54@media screen and (max-width: 430px) { 55 .slide2{ 56 background: url(../img/sp2.jpg) no-repeat; 57 background-size: 100%; 58 } 59} 60 61.slide3{ 62 background: url(../img/pc3.jpg) no-repeat; 63 background-attachment:scroll; 64 background-position:center center; 65} 66 67 68@media screen and (max-width: 430px) { 69 .slide3{ 70 background: url(../img/sp3.jpg) no-repeat; 71 background-size: 100%; 72 } 73} 74 75.slide4{ 76 background: url(../img/pc4.jpg) no-repeat; 77 background-attachment:scroll; 78 background-position:center center; 79} 80 81 82@media screen and (max-width: 430px) { 83 .slide4{ 84 background: url(../img/sp4.jpg) no-repeat; 85 background-size: 100%; 86 } 87} 88 89 90.slide4_2{ 91 max-width:530px; 92 text-align:left; 93} 94 95 96/* スライダーの高さ指定*/ 97.swiper-wrapper { 98 height: 96vh; 99 } 100 101 @media screen and (max-width: 430px) { 102 .swiper-wrapper { 103 height: 85vh; 104 } 105 } 106 107 108 /* 矢印の位置調整 */ 109 .swiper-button-prev { 110 left: 50%; 111 margin: 0; 112 top: 0; 113 transform: translate(-50%, 0px) rotate(90deg); 114 } 115 .swiper-button-next { 116 bottom: 0; 117 left: 50%; 118 margin: 0; 119 top: auto; 120 transform: translate(-50%, 0px) rotate(90deg); 121 } 122 123 /* 矢印一番最初と最後を非表示 */ 124 .swiper-button-disabled{ 125 display: none; 126 } 127 128 129 /*ドット表示*/ 130 .swiper-pagination{ 131 display: none; 132 } 133 134 .text1{ 135 /* font-weight: bold; */ 136 color:red; 137 /* font-size: 2rem; */ 138 font-size: 1.5rem; 139 line-height: 4rem; 140 padding:0 2rem; 141 } 142 143 @media screen and (max-width: 430px) { 144 .text1{ 145 font-size: 1.25rem; 146 line-height: 2.8rem; 147 padding:0 1rem; 148 } 149 } 150 151 152 .text2{ 153 /* font-weight: bold; */ 154 color:#0025a4; 155 /* font-size: 2rem; */ 156 font-size: 1.5rem; 157 line-height: 4rem; 158 padding:0 2rem; 159 } 160 161 @media screen and (max-width: 430px) { 162 .text2{ 163 font-size: 1.25rem; 164 line-height: 2.8rem; 165 padding:0 1rem; 166 } 167 } 168 169 170 .text3{ 171 /* font-weight: bold; */ 172 color:#00a63c; 173 /* font-size: 1.5rem; */ 174 font-size: 1.2rem; 175 line-height: 3rem; 176 padding:0 2rem; 177 } 178 179 @media screen and (max-width: 430px) { 180 .text3{ 181 font-size: 0.9rem; 182 line-height: 2rem; 183 padding:0 1rem; 184 } 185 } 186 187 188 /*copyright*/ 189 .copyright{ 190 bottom: 20px; 191 left: 0; 192 width: 100%; 193 text-align: center; 194 position: absolute; 195 z-index: 98; 196 } 197 198 @media screen and (max-width: 430px) { 199 .copyright{ 200 font-size:0.8rem;0 201 } 202 } 203 204 205/* PCスマホ 設定 206------------------------------------------------------------*/ 207 208.pc_only { display: block; } 209.sp_only { display: none; } 210 211@media (max-width: 430px) { 212 .pc_only { display: none; } 213 .sp_only { display: block; } 214} 215

js

1const swiper = new Swiper(".swiper", { 2 loop: false, // ループ 3 speed: 800, // 少しゆっくり(デフォルトは300) 4 mousewheel: true, // マウスホイールでスライド 5 direction: "vertical", // 縦方向 6 autoplay: { // 自動再生 7 delay: 10000, // 10秒後に次のスライド 8 disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない 9 noSwipingSelector: 'p' 10 }, 11 // ページネーション 12 pagination: { 13 el: ".swiper-pagination", 14 clickable: true, 15 }, 16 // 前後の矢印 17 navigation: { 18 nextEl: ".swiper-button-next", 19 prevEl: ".swiper-button-prev", 20 }, 21 22 23 }); 24

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

noSwipingSelectorのオプションもやってみたのですが、うまく行きませんでした

$(function(){
new Swiper ('.swiper-wrapper', {
effect: "slide",
loop: true,
noSwipingSelector: 'p',
})
});

補足

Swiperのテンプレートを使っていることが前提です

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ご提示のコードを試してみましたところ、simulateTouch: false,とすると、テキストを選択できるようになりました。

投稿2024/07/04 10:21

Lhankor_Mhy

総合スコア36791

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dboy

2024/07/05 00:54

回答ありがとうございます。 試したところ問題が解決しました! 記述場所は最初の const swiper = new Swiper(".swiper", { の中に書いてみました。 ベストアンサーに選ばせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問