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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2433閲覧

swiperの矢印ボタン<>を画像に変更したい

chiikuma

総合スコア5

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/11/20 15:46

編集2019/11/21 01:58

前提・実現したいこと

HTMLでswiperのプラグインを使ってのスライド作成について。
矢印マーク(<、>)を画像に変更したいのですが、

.swiper-button-prev,
.swiper-button-next {
background-image: none;
}
上記コードを追加しても上書きができず、デフォルトの矢印が残ったまま、その下に画像が表示されます。
また、矢印をクリックすると、青い枠が表示されるのですが、それも非表示にしたいです。
解決できる方法がございましたらご教示いただきたく思います。

よろしくお願いいたします。

該当のソースコード

/* style */ .swiper-slide{ padding: 100px 100px; } .swiper-button-prev, .swiper-button-next { background-image: none; } .swiper-button-next { background-image: url(https://www.otwo.jp/blog/demo/swiper/arrow_left.png); } .swiper-button-prev { background-image: url(https://www.otwo.jp/blog/demo/swiper/arrow_right.png); transform: scale(-1, 1); } <!-- HTML --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> <!-- script --> var mySwiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } });

補足情報(FW/ツールのバージョンなど)

最低限のコードにしました。
swiper.cssとswiper.min.jsは最新のバージョンをダウンロードしています。

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

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

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

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

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

H40831

2019/11/26 19:14 編集

なにか基本的な要点を理解されてない可能性を感じて気がかりなのですが… 自己解決後で恐縮ですが、 差し支えなければ、 実際のページの、検証ツールのCSSについての部分がどういう状態になってるのか スクショなどでご提示いただけないでしょうか?
guest

回答2

0

ベストアンサー

cssの読み込み順序が先の方になってたりしませんか?
同じ詳細度なら後の方が優先されるので、順序を変えたり、詳細度を上げるようにしてみてはどうでしょうか?

投稿2019/11/22 07:44

uemaSR

総合スコア257

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

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

chiikuma

2019/11/26 15:26

お返事が遅くなり申し訳ございません。 ご回答いただいた内容でもやってみましたが、やはりダメでして、邪道かもしれませんがswiper.cssのswiper-button-prev、swiper-button-nextをfont-size: 0;に直接書き換えて自己解決しました。 読み込み順序の優先度に関しては参考になりましたのでベストアンサーとさせていただきます。 有り難うございました。
guest

0

こちらの参考サイトを検証ツールでいじってみたところ、
background-imageの上書きで普通に画像は変わりました。noneは使ってません。
また、青い枠も表示されませんでした。もし表示されるようでしたら
outline: none;で消せるかと思います。

もう一度、単純なタイプミスなどがないか確認してみてはいかがですか?

投稿2019/11/20 15:56

H40831

総合スコア973

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

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

chiikuma

2019/11/21 02:06

ご回答有難うございます。 そちらのサイトを参考に、上記のように最低限のコードに変更してみましたが(該当のソースコードを更新しました)、青い枠は消えたもののやはりデフォルトの矢印ボタンは残ったままとなりました。もう少し解決策を探ってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問