sliderProでimgに入りこんだmarginを消したい
wordpressでwebサイトを制作しています。
sliderProを使用してトップページメイン画像をフェードで動くスライダーを実装したいのですが、
imgタグ内にstyleでmarginが勝手に入り込んでしまい、どうにも困っています。
こちらを消すにはどのようにしたらよろしいのでしょうか。
もしくは、sliderPro同様にレスポンシブ対応で、retina対応やスマホ用など画像サイズの分岐ができ、
fadeが使えて、横幅100%でスライダーが実装できるものがもしあればお教えいただけるとありがたいです。
お手数をおかけしますが、お分かりになられる方いらっしゃいましたら
どうぞよろしくお願いいたします。
該当のソースコード
html
1<link rel="stylesheet" href="http://www.yamanoco.com/wp-content/themes/minar-child/css/slider-pro.min.css"/> 2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 3<script src="http://www.yamanoco.com/wp-content/themes/minar-child/js/jquery.sliderPro.min.js"></script> 4<script> 5 $( document ).ready(function( $ ) { 6 $( '#slider3' ).sliderPro({ 7 width: '100%',//横幅 8 arrows: false,//左右の矢印を出す 9 buttons: true,//ナビゲーションボタンを出す 10 aspectRatio: 1.5,//スライドのアスペクト比 11 forceSize: 'fullWidth',//ウィンドウ内全画面表示 12 slideDistance:0,//スライド同士の距離 13 responsive:true, 14 aspectRatio:3, 15 fade:true, 16 }); 17}); 18 19</script>
php
1<?php if(is_page( '112' )): ?> 2<div id="slider3" class="slider-pro"> 3 <div class="sp-slides"> 4 <div class="sp-slide"> 5 <img class="sp-image" src="/images/main/main01.jpg" /> 6 </div> 7 <div class="sp-slide"> 8 <img class="sp-image" src="/images/main/main02.jpg" /> 9 </div> 10 <div class="sp-slide"> 11 <img class="sp-image" src="/images/main/main03.jpg" /> 12</div> 13 <!--/ sp-slides--></div> 14<!--/ full--></div> 15 16<?php else: ?> 17<?php endif; ?>
試したこと
1)
imgタグにあらかじめstyle="margin:0;"を入れてみましたが、
同じmarginに上書きされてしまい、消すことはできませんでした。
2)
*{
margin: 0;
padding: 0;
}
を入れてみましたが、marginに変更はありませんでした。
3)
ウィンドウ幅を変更するとなぜか横幅100%に表示されるようでした。
補足情報(FW/ツールのバージョンなど)
該当URLです。
http://www.yamanoco.com/
追記)
◼️確認したOS
・iMac 10.13.3
chrome(68.0.3440.106最新版)
Safari(11.0.3)
・iPhone SE
Safari(11.0)
・IE11(バージョン不明)
◼️Wordpressテンプレート
minar
http://wp.regaltheme.com/minar/
回答2件
あなたの回答
tips
プレビュー