jQueryのスライドを指定範囲内で動かしたいです。ご指導願います。

ネットから拾ったカスタマイズのjQueryをさらに編集中ですが、思い通りに実装できません。

写真移動できる範囲はwidth:1260px;で納めたいのですが、
overflow: visible;があることで枠を超えてしまいます。

max-widht:1260px;にしたり色々試しましたが、悩んで調べてもう限界です。

実現したいこと

このように、3枚写真を並べて真ん中以外は不透明にして自動的に右から左に流れるものを作りたいです。

現状は・・・

このようにずーっと続きます。

関係しそうなところのHTML,styles CSS, slick css , slick theme cssを貼ります。

分かる方、ご指導願います。

html
1
2  <div class="section">
3
4    <div class="sliderArea">
5      <div class="full-screen-o slider">
6          <div class="inta-detail-1"><a href="#"><img src="images/inta-1.jpg" alt="一般総合病院のインタビュー"><h5><span class="work-text">一般総合病院</span><br>主に献立作成の栄養指導…</h5></a></div>
7
8
9          <div class="inta-detail-2"><a href="#"><img src="images/inta-2.jpg" alt="保健センターのインタビュー"><h5><span class="work-text">保健センター</span><br>妊婦に対して産前・産後…</h5></a></div>
10
11
12          <div class="inta-detail-3"><a href="#"><img src="images/inta-3.jpg" alt="健康食カフェのインタビュー"><h5><span class="work-text">健康食カフェ</span><br>管理栄養士監修レシピ担…</h5></a></div>
13
14
15          <div class="inta-detail-4"><a href="#"><img src="images/inta-4.jpg" alt="スポーツ臨床のインタビュー"><h5><span class="work-text">スポーツジム</span><br>サッカー選手の栄養管理…</h5></a></div>
16    </div>
17
18  
19  </div>
20
21 
22

CSS
1（styles　css）
2.section{
3    margin: 140px;
4    width: 1260px;
5}
6
7.sliderArea{
8    width: 1260px;
9}
10
11.section img{
12    width: 325px;
13    height: 425px;
14    border:solid 1px #ccc;
15    position: relative;
16}
17
18.sliderArea h5{
19    position: absolute;
20    left: 6%;   
21    top: 60%;
22    background: rgba(255, 255, 255, 0.9);
23    font-style: normal;
24    font-weight: normal;
25    font-size: 1.3em;
26    line-height: 1.6em;
27    color: #5B3B46;
28    padding: 1rem;
29    z-index: 3;
30}

css
1(slick css)
2/* Slider */
3.slick-slider
4{
5    position: relative;
6
7    display: block;
8    box-sizing: border-box;
9
10    -webkit-user-select: none;
11       -moz-user-select: none;
12        -ms-user-select: none;
13            user-select: none;
14
15    -webkit-touch-callout: none;
16    -khtml-user-select: none;
17    -ms-touch-action: pan-y;
18        touch-action: pan-y;
19    -webkit-tap-highlight-color: transparent;
20}
21
22.slick-list
23{
24    position: relative;
25
26    display: block;
27    overflow: hidden;
28
29    margin: 0;
30    padding: 0;
31}
32.slick-list:focus
33{
34    outline: none;
35}
36.slick-list.dragging
37{
38    cursor: pointer;
39    cursor: hand;
40}
41
42.slick-slider .slick-track,
43.slick-slider .slick-list
44{
45    -webkit-transform: translate3d(0, 0, 0);
46       -moz-transform: translate3d(0, 0, 0);
47        -ms-transform: translate3d(0, 0, 0);
48         -o-transform: translate3d(0, 0, 0);
49            transform: translate3d(0, 0, 0);
50}
51
52.slick-track
53{
54    position: relative;
55    top: 0;
56    left: 0;
57
58    display: block;
59    margin-left: auto;
60    margin-right: auto;
61}
62.slick-track:before,
63.slick-track:after
64{
65    display: table;
66
67    content: '';
68}
69.slick-track:after
70{
71    clear: both;
72}
73.slick-loading .slick-track
74{
75    visibility: hidden;
76}
77
78.slick-slide
79{
80    display: none;
81    float: left;
82
83    height: 100%;
84    min-height: 1px;
85}
86[dir='rtl'] .slick-slide
87{
88    float: right;
89}
90.slick-slide img
91{
92    display: block;
93}
94.slick-slide.slick-loading img
95{
96    display: none;
97}
98.slick-slide.dragging img
99{
100    pointer-events: none;
101}
102.slick-initialized .slick-slide
103{
104    display: block;
105}
106.slick-loading .slick-slide
107{
108    visibility: hidden;
109}
110.slick-vertical .slick-slide
111{
112    display: block;
113
114    height: auto;
115
116    border: 1px solid transparent;
117}
118.slick-arrow.slick-hidden {
119    display: none;
120}
121

CSS
1(slick css)
2
3.sliderArea {
4   /* max-width: 100%;*/
5    margin: 0 auto;
6    padding: 0 25px;
7}
8.sliderArea.w300 {
9    max-width: 300px;
10}
11.slick-slide {
12    margin: 0 5px;
13}
14.slick-slide img {
15    width: 100%;
16    height: auto;
17}
18.slick-prev, .slick-next {
19    z-index: 1;
20}
21.slick-prev:before, .slick-next:before {
22    color: #000;
23}
24.slick-slide {
25    transition: all ease-in-out .3s;
26    opacity: .2;
27}
28.slick-active {
29    opacity: 1;
30}
31
32/*センター*/
33.slick-current {
34    opacity: 1;  
35
36}
37.thumb {
38    margin: 70px 0 0;
39}
40.thumb .slick-slide {
41    cursor: pointer;
42}
43.thumb .slick-slide:hover {
44    opacity: .7;
45}
46
47/*====================================================================
48.full-screen-o
49====================================================================*/
50
51.full-screen-o .slick-list {
52    overflow: visible;
53}
54.full-screen-o.slider {
55    max-width: 400px;
56    margin: 0 auto;
57}