我正在尝试创建一个松弛的滑块，但是由于某种原因，它似乎无法正常工作。也许我做错了事，但我觉得我需要一些额外的JavaScript，仅光滑文档中的默认代码还不够。
这是一个快速的代码笔：https://codepen.io/anon/pen/rROXJQ
<section class="success-stories scrollspy" id="success-story">
<div class="">
<div class="slick1 success-banner slick-initialized slick-slider slick-dotted"><button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: inline-block;">Previous</button><div class="slick-list draggable" style="padding: 0px 50px;"><div class="slick-track" style="opacity: 1; width: 20000px; transform: translate3d(-1247px, 0px, 0px);"><div class="slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" tabindex="-1"><div><div style="width: 100%; display: inline-block;">
<div class="card ">
<div class="card-content ">
<span class="card-title">Lorem Ipsum</span>
<p>Lorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="card-action">
<a class="waves-effect btn" href="https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1" tabindex="-1">READ MORE</a>
</div>
<div class="slide-num">
03
</div>
<div class="card-pic" style="background-image:url('https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1');">
<div class="pic-caption">
<h6></h6>
<p></p>
</div>
</div>
</div>
</div></div></div><div class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" tabindex="-1"><div><div style="width: 100%; display: inline-block;">
<div class="card ">
<div class="card-content ">
<span class="card-title">Lorem Ipsum by Budget Lorem Ipsum.</span>
<p>WLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="card-action">
<!--<a class="waves-effect btn" >READ MORE</a>-->
</div>
<div class="slide-num">
04
</div>
<div class="card-pic" style="background-image:url('https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1');">
<div class="pic-caption">
<h6></h6>
<p></p>
</div>
</div>
</div>
</div></div></div><div class="slick-slide slick-current slick-active slick-center" data-slick-index="0" aria-hidden="false" tabindex="0" role="tabpanel" id="slick-slide10"><div><div style="width: 100%; display: inline-block;">
<div class="card">
<div class="card-content ">
<span class="card-title">Lorem Ipsum reaches Lorem Ipsum</span>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="card-action">
<a href="https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1" class="waves-effect btn" tabindex="0">READ MORE</a>
</div>
<div class="slide-num">
01
</div>
<div class="card-pic" style="background-image:url('https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1');">
<audio preload="none" class="audio-tag">
<source src="https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1" type="audio/mpeg">
</audio>
<a href="#" class="audio-trigger" tabindex="0">play!</a>
<div class="pic-caption">
<h6>Lorem Ipsum</h6>
<p>Lorem Ipsum</p>
</div>
</div>
</div>
</div></div></div><div class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide11"><div><div style="width: 100%; display: inline-block;">
<div class="card ">
<div class="card-content ">
<span class="card-title">Lorem Ipsum Lorem Ipsum</span>
<p>FLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="card-action">
<a class="waves-effect btn" href="https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1" tabindex="-1">READ MORE</a>
</div>
<div class="slide-num">
02
</div>
<div class="card-pic" style="background-image:url('https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1');">
<div class="pic-caption">
<h6>Lorem Ipsum & Lorem Ipsums</h6>
<p>FirstJob Lorem Ipsum</p>
</div>
</div>
</div>
</div></div></div><div class="slick-slide" data-slick-index="2" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide12"><div><div style="width: 100%; display: inline-block;">
<div class="card ">
<div class="card-content ">
<span class="card-title">Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
<p>Lorem Ipsum. Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="card-action">
<a class="waves-effect btn" href="https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1" tabindex="-1">READ MORE</a>
</div>
<div class="slide-num">
03
</div>
<div class="card-pic" style="background-image:url('https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1');">
<div class="pic-caption">
<h6></h6>
<p></p>
</div>
</div>
</div>
</div></div></div><div class="slick-slide" data-slick-index="3" aria-hidden="true" tabindex="-1" role="tabpanel" id="slick-slide13"><div><div style="width: 100%; display: inline-block;">
<div class="card ">
<div class="card-content ">
<span class="card-title">Lorem Ipsum by Lorem Ipsum.</span>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="card-action">
<!--<a class="waves-effect btn" >READ MORE</a>-->
</div>
<div class="slide-num">
04
</div>
<div class="card-pic" style="background-image:url('https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1');">
<div class="pic-caption">
<h6></h6>
<p></p>
</div>
</div>
</div>
</div></div></div><div class="slick-slide slick-cloned" data-slick-index="4" aria-hidden="true" tabindex="-1"><div><div style="width: 100%; display: inline-block;">
<div class="card">
<div class="card-content ">
<span class="card-title">BLorem Ipsum Lorem Ipsum</span>
<p>Lorem Ipsum Valued at $Lorem Ipsum (and growing). Lorem Ipsum Lorem Ipsum Lorem IpsumInvests.
</p>
</div>
<div class="card-action">
<a href="https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1" class="waves-effect btn" tabindex="-1">READ MORE</a>
</div>
<div class="slide-num">
01
</div>
<div class="card-pic" style="background-image:url('https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1');">
<audio preload="none" class="audio-tag">
<source src="https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1" type="audio/mpeg">
</audio>
<a href="#" class="audio-trigger" tabindex="-1">play!</a>
<div class="pic-caption">
<h6>Lorem Ipsum</h6>
<p>Lorem Ipsumt Founder</p>
</div>
</div>
</div>
</div></div></div><div class="slick-slide slick-cloned" data-slick-index="5" aria-hidden="true" tabindex="-1"><div><div style="width: 100%; display: inline-block;">
<div class="card ">
<div class="card-content ">
<span class="card-title">Lorem Ipsum Lorem Ipsum</span>
<p>FLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem Ipsum.
</p>
</div>
<div class="card-action">
<a class="waves-effect btn" href="https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1" tabindex="-1">READ MORE</a>
</div>
<div class="slide-num">
02
</div>
<div class="card-pic" style="background-image:url('https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1');">
<div class="pic-caption">
<h6>Lorem Ipsum & Lorem Ipsum</h6>
<p>Lorem IpsumFounders</p>
</div>
</div>
</div>
</div></div></div><div class="slick-slide slick-cloned slick-center" data-slick-index="6" aria-hidden="true" tabindex="-1"><div><div style="width: 100%; display: inline-block;">
<div class="card ">
<div class="card-content ">
<span class="card-title">Lorem Ipsum wins prestigious Lorem Ipsum</span>
<p>Lorem Ipsum times by Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
</div>
<div class="card-action">
<a class="waves-effect btn" href="https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1" tabindex="-1">READ MORE</a>
</div>
<div class="slide-num">
03
</div>
<div class="card-pic" style="background-image:url('https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1');">
<div class="pic-caption">
<h6></h6>
<p></p>
</div>
</div>
</div>
</div></div></div><div class="slick-slide slick-cloned" data-slick-index="7" aria-hidden="true" tabindex="-1"><div><div style="width: 100%; display: inline-block;">
<div class="card ">
<div class="card-content ">
<span class="card-title">Lorem Ipsum Lorem Ipsum Lorem Ipsum Direct.</span>
<p>Weather Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum for Lorem Ipsum.
</p>
</div>
<div class="card-action">
<!--<a class="waves-effect btn" >READ MORE</a>-->
</div>
<div class="slide-num">
04
</div>
<div class="card-pic" style="background-image:url('https://fortunedotcom.files.wordpress.com/2016/11/jeff-bezos-bpoy-2016.jpg?w=820&h=570&crop=1');">
<div class="pic-caption">
<h6></h6>
<p></p>
</div>
</div>
</div>
</div></div></div></div></div><button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: block; margin-left: -25px;">p</button><ul class="slick-dots" style="display: block; min-width: 120px; margin-left: 30px;" role="tablist"><li class="slick-active" role="presentation"><button type="button" role="tab" id="slick-slide-control10" aria-controls="slick-slide10" aria-label="1 of 4" tabindex="0" aria-selected="true">1</button></li><li role="presentation"><button type="button" role="tab" id="slick-slide-control11" aria-controls="slick-slide11" aria-label="2 of 4" tabindex="-1">2</button></li><li role="presentation"><button type="button" role="tab" id="slick-slide-control12" aria-controls="slick-slide12" aria-label="3 of 4" tabindex="-1">3</button></li><li role="presentation"><button type="button" role="tab" id="slick-slide-control13" aria-controls="slick-slide13" aria-label="4 of 4" tabindex="-1">4</button></li></ul></div>
</div>
</section>
JS部分：
$('.slick1').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 3,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
] }）;