実現したいこと
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;0201 }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
試したこと・調べたこと
上記の詳細・結果
noSwipingSelectorのオプションもやってみたのですが、うまく行きませんでした
$(function(){
new Swiper ('.swiper-wrapper', {
effect: "slide",
loop: true,
noSwipingSelector: 'p',
})
});
補足
Swiperのテンプレートを使っていることが前提です
0 コメント