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

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

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

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

Q&A

解決済

1回答

13876閲覧

【※画像有り】Swiperボタンを外側へ出したい

hellohello

総合スコア22

スライダー

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

0グッド

0クリップ

投稿2018/11/06 06:47

編集2018/11/06 08:54

イメージ説明
【実現したいこと】画像のように、Swiperスライドのボタンを外側へ出したいです。

【現状】①ボタンそのものの大きさや幅は、CSSで'.swiper-button-next' を使い変えることは出来た
②containerをrelative、'.swiper-button-next'にabsoluteを使いtop値から10pxで指定した所、ボタンが消えて無くなった
③Qiitaや他サイトをくまなく調べたが、解決策をしらべられなかった

【Swiper】リンク内容プラグイン、公式サイト
何をどう足せば外側に出せるでしょうか?
以下のコードの状態で、画像のようなボタンが背景と被ってしまい、外にない状況です。

どんなに小さいこと、ヒントでも頂ければ幸いです。

どうかご教授よろしくお願いいたします。

以下HTML

javascript

1<!DOCTYPE html> 2<html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>ttt</title> 7 8 <link rel="stylesheet" href="big.css"> 9 <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"> 10 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> 11 <style type="text/css"> 12 .swiper-container { 13 height: 270px; 14 margin:20px 100px; 15 16 } 17 18 .swiper-slide { 19 padding-top: 180px; 20 text-align: center; 21 color: #fff; 22 font-size: 30px; 23 } 24 25<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> 26</head> 27 28 29 30<!-- Slider main container --> 31 <div class="swiper-container"> 32 <!-- Additional required wrapper --> 33 <div class="swiper-wrapper"> 34 <!-- Slides --> 35 <div class="swiper-slide" style=" 36 background-color: red; 37 background-repeat: no-repeat; 38 width: 1261px; 39 background-size: cover; 40 background-position: center center;"> 41 </div> 42 <div class="swiper-slide">Slide 2</div> 43 <div class="swiper-slide">Slide 2</div> 44 </div> 45 <!-- If we need pagination --> 46 <div class="swiper-pagination"></div> 47 48 <!-- If we need navigation buttons --> 49 <div class="swiper-button-prev"></div> 50 <div class="swiper-button-next"></div> 51 </div> 52. 53. 54. 55 56. 57. 58. 59 60</body> 61 <script type="text/javascript"> 62 var mySwiper = new Swiper('.swiper-container', { 63 loop: true, 64 pagination: '.swiper-pagination', 65 nextButton: '.swiper-button-next', 66 prevButton: '.swiper-button-prev', 67 }) 68</script> 69</html>
.swiper-pagination-bullet { display: inline-block; width:13px !important; height:13px !important;

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

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

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

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

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

kei344

2018/11/06 08:00

(質問文は編集できます)質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、プラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)
hellohello

2018/11/06 08:27

kei344様 質問文に不備があり大変申し訳ありません。ご指摘ありがとうございました!以後注意いたします。
hellohello

2018/11/06 08:27

またなにか至らぬ所ありましたらぜひ仰ってください。大変失礼いたしました。
kei344

2018/11/06 08:30

試したHTML/CSSも提示されてはいかがでしょうか。また、プラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)
hellohello

2018/11/06 08:56

何度もお手を煩わせてしまい、大変恐縮です。いかがでしょうか? アドバイス頂きありがとうございます。
guest

回答1

0

ベストアンサー

HTML

1 <div class="swiper-container"> 2 <!-- Additional required wrapper --> 3 <div class="swiper-wrapper"> 4 <!-- Slides --> 5 <div class="swiper-slide" style=" 6 background-color: red; 7 background-repeat: no-repeat; 8 width: 1261px; 9 background-size: cover; 10 background-position: center center;"> 11 </div> 12 <div class="swiper-slide">Slide 2</div> 13 <div class="swiper-slide">Slide 2</div> 14 </div> 15 <!-- If we need pagination --> 16 17 <!-- If we need navigation buttons --> 18 <div class="swiper-button-prev"></div> 19 <div class="swiper-button-next"></div> 20 </div> 21 <div class="swiper-pagination"></div><!-- ←外に出せばよいです。スタイルは元のスタイルを参考にしてください。 --> 22```**動くサンプル:**[https://jsfiddle.net/25hym0s4/](https://jsfiddle.net/25hym0s4/)

投稿2018/11/06 09:01

kei344

総合スコア69498

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

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

hellohello

2018/11/06 09:25

Kei344さん…できました!!!!!!!すごいです感動です。5時間考え続けた問題が解決いたしました!!!!!本当にありがとうございます…感謝してもしきれません。いくつものアドバイス決して忘れず勉強に励みます。本当にありがとうございました!!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問