ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap JS ม้าหมุน


JS ม้าหมุน (carousel.js)

ปลั๊กอินม้าหมุนเป็นส่วนประกอบสำหรับการขี่จักรยานผ่านองค์ประกอบเช่นม้าหมุน (สไลด์โชว์)

สำหรับการสอนเกี่ยวกับ Carousels อ่านของเรา Bootstrap หมุนกวดวิชา

หมายเหตุ: Carousels ยังไม่ได้รับการสนับสนุนอย่างถูกต้องใน Internet Explorer 9 และก่อนหน้านี้ (เพราะพวกเขาใช้การเปลี่ยน CSS3 และภาพเคลื่อนไหวเพื่อให้บรรลุผลภาพนิ่ง)


เรียน Carousel ปลั๊กอิน

ชั้น ลักษณะ
.carousel สร้างม้าหมุน
.slide เพิ่มการเปลี่ยนแปลง CSS และผลภาพเคลื่อนไหวเมื่อเลื่อนจากหนึ่งในรายการต่อไป นำระดับนี้หากคุณไม่ต้องการผลกระทบนี้
.carousel-indicators เพิ่มตัวชี้วัดม้าหมุน เหล่านี้เป็นจุดเล็ก ๆ ที่ด้านล่างของแต่ละสไลด์ (ซึ่งแสดงจำนวนภาพนิ่งที่มีอยู่ในม้าหมุนและเลื่อนที่ผู้ใช้กำลังดู)
.carousel-inner เพิ่มสไลด์เพื่อม้าหมุน
.item ระบุเนื้อหาของแต่ละสไลด์
.left carousel-control เพิ่มปุ่มซ้ายเพื่อหมุนซึ่งจะช่วยให้ผู้ใช้ที่จะกลับไประหว่างภาพนิ่ง
.right carousel-control เพิ่มปุ่มขวาเพื่อหมุนซึ่งจะช่วยให้ผู้ใช้ที่จะก้าวไปข้างหน้าระหว่างภาพนิ่ง
.carousel-caption ระบุคำอธิบายสำหรับม้าหมุน

ผ่าน data-* แอตทริบิวต์

data-ride="carousel" แอตทริบิวต์ป็ม้าหมุน

data-slide และ data-slide-to แอตทริบิวต์ที่ระบุซึ่งเลื่อนที่จะไป

data-slide แอตทริบิวต์รับสองค่า: ย้อนกลับหรือถัดไปในขณะที่ data-slide-to ยอมรับตัวเลข

ตัวอย่าง

<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">

<!-- Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>

<!-- Carousel Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
ลองตัวเอง»

ผ่านทางจาวาสคริปต์

เปิดใช้งานด้วยตนเอง:

ตัวอย่าง

// Activate Carousel
$("#myCarousel").carousel();

// Enable Carousel Indicators
$(".item").click(function(){
    $("#myCarousel").carousel(1);
});

// Enable Carousel Controls
$(".left").click(function(){
    $("#myCarousel").carousel("prev");
});
ลองตัวเอง»

ตัวเลือกม้าหมุน

ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ DATA- เช่นเดียวกับในช่วงข้อมูล = ""

ชื่อ ชนิด ค่าเริ่มต้น ลักษณะ ลองมัน
intervalnumber, or the boolean false5000 ระบุความล่าช้า (มิลลิวินาที) ระหว่างแต่ละสไลด์

หมายเหตุ: การตั้งค่าช่วงเวลาที่เป็นเท็จเพื่อหยุดรายการจากการเลื่อนอัตโนมัติ
ใช้ JS การใช้ข้อมูล
pausestring, or the boolean false"hover" หยุดม้าหมุนจะผ่านจากภาพนิ่งถัดไปเมื่อตัวชี้เมาส์เข้าม้าหมุนและเลื่อนการดำเนินการต่อเมื่อตัวชี้เมาส์ออกจากม้าหมุน

หมายเหตุ: การตั้งค่าการหยุดชั่วคราวเป็นเท็จเพื่อหยุดความสามารถในการหยุดการทำงานชั่วคราวในโฉบ
ใช้ JS การใช้ข้อมูล
wrapbooleantrue ระบุว่าม้าหมุนควรไปถึงภาพนิ่งทั้งหมดอย่างต่อเนื่องหรือหยุดที่สไลด์สุดท้าย

  • จริง - วงจรอย่างต่อเนื่อง
  • เท็จ - หยุดที่รายการสุดท้าย
ใช้ JS การใช้ข้อมูล

วิธีม้าหมุน

ตารางต่อไปนี้แสดงวิธีม้าหมุนที่มีอยู่ทั้งหมด

วิธี ลักษณะ ลองมัน
.carousel( options ) ป็ม้าหมุนที่มีตัวเลือก ดูตัวเลือกข้างต้นสำหรับค่าที่ถูกต้อง ลองมัน
.carousel("cycle") ไปผ่านรายการม้าหมุนจากซ้ายไปขวา ลองมัน
.carousel("pause") หยุดม้าหมุนจากไปผ่านรายการ ลองมัน
.carousel(number) ไปที่รายการที่ระบุ (zero-based: รายการแรกคือ 0, รายการที่สองคือ 1, ฯลฯ .. ) ลองมัน
.carousel("prev") ไปที่รายการก่อนหน้า ลองมัน
.carousel("next") ไปยังรายการถัดไป ลองมัน

เหตุการณ์ม้าหมุน

ตารางต่อไปนี้แสดงเหตุการณ์ม้าหมุนที่มีอยู่ทั้งหมด

เหตุการณ์ ลักษณะ ลองมัน
slide.bs.carousel เกิดขึ้นเมื่อม้าหมุนเป็นเรื่องเกี่ยวกับที่จะเลื่อนจากที่หนึ่งไปอีกที่หนึ่ง ลองมัน
slid.bs.carousel เกิดขึ้นเมื่อม้าหมุนได้เสร็จสิ้นการเลื่อนจากที่หนึ่งไปอีกที่หนึ่ง ลองมัน

ตัวอย่าง

ตัวอย่าง

คำอธิบายภาพสไลด์

เพิ่ม <div class="carousel-caption"> ในแต่ละ <div class="item"> การสร้างคำบรรยายใต้ภาพสำหรับแต่ละภาพนิ่ง:

ตัวอย่าง


<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
ลองตัวเอง»