Flexslider2のカーセルスライダーでスライド後、画像が見切れてしまいます。

本当はスライド前スライド後、ウィンドウとスライドーの可変後常時、スライダーの両端のフチが20px、画像間のマージンが30px、
のカーセルスライダーをflexslider２で作りたいのですが、
現在は最後までスライドするとどうしても、左端右端が見切れてしまいます。
http://ur0.work/NSjJ
このサイトトップページの下のスライダーです。
よろしくお願いします。

---------------------------------------------------
html

<script>

$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
slideshow:false,
touch:true,
controlNav:false,
itemWidth: 150,
itemMargin: 30,
minItems:2
});
});
</script>

<div class="flexslider">
<ul class="slides">
<li><a href="/img/ttt.jpg" data-lightbox="1" title="01"><img src="img/ttt-s.png"></a></li>

<li><a href="/img/ttt.jpg" data-lightbox="1" title="02"><img src="/img/ttt-s.png"></a></li>

<li><a href="/img/ttt.jpg" data-lightbox="1" title="03"><img src="/img/ttt-s.png"></a></li>

<li><a href="/img/ttt.png" data-lightbox="1" title="04"><img src="/img/ttt-s.png"></a></li>

<li><a href="/img/ttt.png" data-lightbox="1" title="05"><img src="img/ttt-s.png"></a></li>

<li><a href="/img/ttt.png" data-lightbox="1" title="06"><img src="/img/ttt-s.png"></a></li>

<li><a href="/img/ttt.png" data-lightbox="1" title="07"><img src="/img/ttt-s.png" ></a></li>

<li><a href="/img/ttt.png" data-lightbox="1" title="08"><img src="/img/ttt-s.png" ></a></li>

</ul>
</div>


--------------------------------

css
.flexslider {
max-width:730px;//レスポンシブにも対応したいので max-は残したいです。
height:197px;
margin-bottom:0;
right:0;
margin-left:49px;
margin-top:1px;
z-index:10;
position: relative;
}


.slides {
margin-top:22px;
margin-left:-20px;
height:200px;
z-index:10;
width: 2220px;
margin-left: -20px;
}

.slides li {
z-index:10;
}

@media screen and (max-width:1024px) {
.flexslider {
width:550px;
}}

@media screen and (max-width:1024px) {
.slides li {
width:145px;
}}


-------------------------------------------------
試したこと

.slides li{margin-right: 20px !important;//効果無し
}
.slides{max-width:730px;//並び自体がスライダーじゃなくなります。
}
.flexslider {padding-right:20px;}
//を試したら右端は見切れなくなったのですが、スライダーの枠のサイズ自体大きくなってしまったりプラス左端が見切れてしまったりします。



----------------------------------------------------
js
すいません。jsはどこを変えればいいのか分からないのとcoda2で読みやすいよう改行もできないみたいなのでそのままでリンク先を載せます。
http://ur0.work/NSjN

No.1 ベストアンサー 回答者： fujillin 回答日時： 2018/11/29 11:00

こんにちは

回答が無いようですので・・・

なんだか、改変する気満々のご質問のようですが、ご質問の内容程度が実現できないライブラリを改変してまで利用するよりも、他のスライダを利用する方が良さそうに思います。
とは言うものの、配布されているライブラリでその程度のことができないものとも思えません。

ひとまず単純化して、以下の2通りの方法を試してみましたが、両方とも見た目は同じようになります。
とりあえず、実現したい形式を以下と仮定
（少し違う数値の指定もされているようですが…）
　・画僧サイズは150角
　・画像と画像の間は30pxの間隔
　・スライダ全体（画像）の外側は20pxの枠（=スペース）

◆テストした方法1（TypeA）
（1）CSSで画像のサイズを150角に指定
　　li要素のpaddingを上下20px、左右15pxに指定
（2）スクリプトでflexsliderのオプションに
　　itemWidth: 180
　　を指定（間隔はデフォルトの0）
※上記で要素間隔は0だが、見た目は30px（＝15+15）に見え、外側は上下20px、左右15pxとなるので
（3）div.flexslider要素の
　　幅を、(150 + 30)×n pxに設定（nは整数）
　　左右に、5pxのborderを設定（20px = 15 ＋ 5）

◆テストした方法2（TypeB）
（1）CSSで画像のサイズを150角に指定
（2）スクリプトでflexsliderのオプションに
　　itemWidth: 150, itemMargin: 30
　　を指定
※上記で画像間隔は30px、外側は0pxの状態になるので
（3）div.flexslider要素の
　　幅を、(150 + 30)×n - 30 pxに設定（nは整数）
　　外側に、20pxのborderを設定

ご提示の内容を確認してはいませんが、いろいろ複雑にしすぎて、もともとのflexslider側の設定と干渉を起こしているのではないでしょうか？

この回答へのお礼

２番目の方法を試したら右側の見切れが無事無くなりました。
複数の方法での回答ありがとうございました。

お礼日時：2018/12/03 00:19