ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingต้องการให้ Testimonial Slider เล่นทุกอันที่เราใส่ ต้องตั้งค่าตรงไหนคะ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: ต้องการให้ Testimonial Slider เล่นทุกอันที่เราใส่ ต้องตั้งค่าตรงไหนคะ  (อ่าน 2049 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
spookey
Newbie
*

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 1



ดูรายละเอียด
« เมื่อ: 28 มีนาคม 2023, 13:41:05 »

คือตอนนี้มันจะเล่นวนอยู่ประมาณ 4 อัน ซึ่งมีทั้งหมด 10 testimonial ไม่ทราบว่าต้องเพิ่มโค้ดอะไร ตรงไหนได้ไหมคะ ไม่เป็นเรืองโค้ดเลยค่ะ ไปหาโหลดมาจากที่แจกฟรีแล้วนำมาใส่เว็บแก้เอาค่ะ
รบกวนพี่ๆ สมาชิกท่านไหนเก่งๆ ช่วยหน่อยนะคะ ขอบคุณค่ะ wanwan017

อันนี้เป็นไฟล์ 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;
}

ขอบพระคุณล่วงหน้าค่ะ wanwan017
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์