1. Css Style
.content-slider{background:rgb(255,221,64);margin:20px auto;padding:20px;width:300px;height:250px} .slider{margin:0 auto;overflow:visible;position:relative} .mask{overflow:hidden;height:200px} .slider ul{margin:0;padding:20px;position:relative} .slider li{width:250px;height:250px;position:absolute;right:-325px;list-style:none} .slider .quote{font-size:20px;font-style:italic} .slider .source{font-size:15px;text-align:right} .content-slider .link{background:#47cf73;display:inline-block;padding:10px 15px;font-size:12px;border-radius:25px;float:right;bottom:0} .content-slider .link a{color:#ffffff} .slider li.anim1{animation:cycle 30s linear infinite} .slider li.anim2{animation:cycle2 30s linear infinite} .slider li.anim3{animation:cycle3 30s linear infinite} .slider li.anim4{animation:cycle4 30s linear infinite} .slider li.anim5{animation:cycle5 30s linear infinite} .slider:hover li{animation-play-state:paused} @keyframes cycle{0%{right:0}4%{right:0}16%{right:0;opacity:1;z-index:0}20%{right:325px;opacity:0;z-index:0}21%{right:-325px;opacity:0;z-index:-1}50%{right:-325px;opacity:0;z-index:-1}92%{right:-325px;opacity:0;z-index:0}96%{right:-325px;opacity:0}100%{right:0;opacity:1}} @keyframes cycle2{0%{right:-325px;opacity:0}16%{right:-325px;opacity:0}20%{right:0;opacity:1}24%{right:0;opacity:1}36%{right:0;opacity:1;z-index:0}40%{right:325px;opacity:0;z-index:0}41%{right:-325px;opacity:0;z-index:-1}100%{right:-325px;opacity:0;z-index:-1}} @keyframes cycle3{0%{right:-325px;opacity:0}36%{right:-325px;opacity:0}40%{right:0;opacity:1}44%{right:0;opacity:1}56%{right:0;opacity:1;z-index:0}60%{right:325px;opacity:0;z-index:0}61%{right:-325px;opacity:0;z-index:-1}100%{right:-325px;opacity:0;z-index:-1}} @keyframes cycle4{0%{right:-325px;opacity:0}56%{right:-325px;opacity:0}60%{right:0;opacity:1}64%{right:0;opacity:1}76%{right:0;opacity:1;z-index:0}80%{right:325px;opacity:0;z-index:0}81%{right:-325px;opacity:0;z-index:-1}100%{right:-325px;opacity:0;z-index:-1}} @keyframes cycle5{0%{right:-325px;opacity:0}76%{right:-325px;opacity:0}80%{right:0;opacity:1}84%{right:0;opacity:1}96%{right:0;opacity:1;z-index:0}100%{right:325px;opacity:0;z-index:0}}
2. HTML JavaScript
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote">Ini adalah contoh teks yang bisa diedita atau diganti.</div>
<div class="source">- Saya</div>
</li>
<li class="anim2">
<div class="quote">Ganti teks disini sesuai dengan teks yang anda inginkan.</div>
<div class="source">- Kamu</div>
</li>
<li class="anim3">
<div class="quote">Kalimat disini bisa diganti dengan kalimat yang kamu suka.</div>
<div class="source">- Kalian</div>
</li>
<li class="anim4">
<div class="quote">Tulisan teks yang kamu buat ada dibagian ini.</div>
<div class="source">- Anda</div>
</li>
<li class="anim5">
<div class="quote">Gunakan kalimat berbeda untuk ditulis disini.</div>
<div class="source">- Kami</div>
</li>
</ul>
</div>
<div class="link"><a href="#">All Quotes</a></div>
</div>
</div>
