0

下記サイトで配布されているSlider Proというものを使用しています。

http://bqworks.com/slider-pro/

これを使用して表示させた画像の角を丸くするにはどうしたらいいのでしょうか?
サイト内の画像は全てborder-radius:10pxで丸角にしているので、
このスライダーで表示させている画像にも同じようにborder-radius:10pxを指定したいです。

このスライダーでは、下記のように記述して画像を表示させるので、
(参考サイト:http://gimmicklog.main.jp/jquery/340/

<div id="任意名" class="slider-pro">
  <div class="sp-slides">
    <div class="sp-slide">
      <img class="sp-image" src="img/01.jpg" />
    </div>
    <div class="sp-slide">
      <img class="sp-image" src="img/02.jpg" />
    </div>
    <div class="sp-slide">
      <img class="sp-image" src="img/03.jpg" />
    </div>
  </div>
</div>

サイト全体のCSSで

.sp-image {
  border-radius: 10px;
}

と指定してみましたが変化がありませんでした。(角がとがったまま)
一応このスライダー用のデフォルトCSSにも同様に追記してみましたがダメでした。
当方初心者のため、自分ではお手上げ状態で...
このスライダーはjsで組まれているようなので、
それもなにか関係しているのでしょうか...。(私はjsは全く分かりません...。)
皆様のお力をお借りできますと幸いです。よろしくお願い致します。

1

1 件の回答 1

0

slider-pro.cssにて.slider-pro img.sp-image { border-radius: 0 !important; }という指定があるため詳細度で上書きされている状態です。
cssの指定を.slider-pro img.sp-image { border-radius: 10px !important; }とし、slider-pro.cssより後に読み込むように変更してみてください。

1
  • お返事が遅くなりまして申し訳ございません。 ご教示いただいた通りの方法で解決しました。ありがとうございました!
    – ta539tg70
    Commented 2017年12月16日 2:16

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。