คือตอนนี้มันจะเล่นวนอยู่ประมาณ 4 อัน ซึ่งมีทั้งหมด 10 testimonial ไม่ทราบว่าต้องเพิ่มโค้ดอะไร ตรงไหนได้ไหมคะ ไม่เป็นเรืองโค้ดเลยค่ะ ไปหาโหลดมาจากที่แจกฟรีแล้วนำมาใส่เว็บแก้เอาค่ะ
รบกวนพี่ๆ สมาชิกท่านไหนเก่งๆ ช่วยหน่อยนะคะ ขอบคุณค่ะ
อันนี้เป็นไฟล์ html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="sl.css" rel="stylesheet" type="text/css">
</head>
<body>
<div><section id="slider-container">
<div id="testimonials"><br>
<div align="center" ><h2>Testimonial</h2></div>
<figure class="single-testimonial">
<blockquote>
<p><q>Testimonial 01</q></p>
<footer>- <cite>Name 01</cite></footer>
</blockquote>
<blockquote>
<p><q>Testimonial 02</q></p>
<footer>- <cite>Name 02</cite></footer>
</blockquote>
<blockquote>
<p><q>Testimonial 03</q></p>
<footer>- <cite>Name 03</cite></footer>
</blockquote>
<blockquote>
<p><q>Testimonial 04</q></p>
<footer>- <cite>Name 04</cite></footer>
</blockquote>
<blockquote>
<p><q>Testimonial 05</q></p>
<footer>- <cite>Name 05</cite></footer>
</blockquote>
<blockquote>
<p><q>Testimonial 06</q></p>
<footer>- <cite>Name 06</cite></footer>
</blockquote>
<blockquote>
<p><q>Testimonial 07</q></p>
<footer>- <cite>Name 07</cite></footer>
</blockquote>
<blockquote>
<p><q>Testimonial 08</q></p>
<footer>- <cite>Name 08</cite></footer>
</blockquote>
<blockquote>
<p><q>Testimonial 09</q></p>
<footer>- <cite>Name 09</cite></footer>
</blockquote>
<blockquote>
<p><q>Testimonial 10</q></p>
<footer>- <cite>Name 10</cite></footer>
</blockquote>
</figure>
</div>
</section></div>
</body>
</html>
ส่วนข้างล่างนี้เป็นไฟล์ css ค่ะ
p {
text-align: center;
font-size: 1.5em;
font-family: 'Roboto', sans-serif;
line-height: 1.6;
padding: 1em;
}
#slider-container {
display: flex;
flex-wrap: wrap;
}
#testimonials {
position: relative;
justify-content: center;
margin: 0 auto;
overflow: hidden;
width: 100%;
height: 300px;
}
figure {
position: center;
width: 400%;
left: 0;
animation: 40s slider infinite;
-webkit-animation: 20s slider infinite;
border-top: 1px solid #c2c1c2;
border-bottom: 1px solid #c2c1c2;
margin: 0;
}
blockquote {
width: 25%;
margin: 0;
float: left;
padding-bottom: 1em;
}
@-webkit-keyframes slider {
0% { transform: translateX(0%); }
25% { transform: translateX(0%); }
33% { transform: translateX(-25%); }
58% { transform: translateX(-25%); }
66% { transform: translateX(-50%); }
91% { transform: translateX(-50%); }
100%{ transform: translateX(-75%); }
}
@keyframes slider {
0% { transform: translateX(0%); }
25% { transform: translateX(0%); }
33% { transform: translateX(-25%); }
58% { transform: translateX(-25%); }
66% { transform: translateX(-50%); }
91% { transform: translateX(-50%); }
100%{ transform: translateX(-75%); }
}
footer {
padding: 0em;
text-align: center;
margin-right: 2em;
}
@media(min-width:750px) {
#testimonials: height: 50px;
}
ขอบพระคุณล่วงหน้าค่ะ
กระทู้เมื่อเร็วๆ นี้
