Bootstrap จะมี Component ตัวหนึ่งที่ชื่อว่า Carousel ซึ่งมันก็คือ Slide ในตัว Bootstrap 4 นั้นมีลูกเล่นหน้าตาสวยงามอยู่แล้วเหมาะกับการทำเลยนะครับ

carousel
carousel

 

การใช้งาน

จากคอนเทนต์ การใช้งาน Front-End Frameworks ยอดนิยม Bootstrap 4 copy code มาได้เลยครับเพื่อเรียกใช้ CSS bootstrap, Javascript Bootstrap, jQuery, Popper ให้ครับ และจะมีส่วนที่ต้องเพิ่มเข้าไปอีกทีนะครับ

 

เพิ่ม Code ส่วนของ Slide เข้าไป

 

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://picsum.photos/800/400/?gravity=east" alt="First slide">
            <div class="carousel-caption d-none d-md-block">
            <h5>Lorem.</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, commodi.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="http://via.placeholder.com/800x400" alt="Second slide">
            <div class="carousel-caption d-none d-md-block">
            <h5>Lorem.</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, commodi.</p>
            </div>
        </div>
        <div class="carousel-item">
                <img class="d-block w-100" src="https://picsum.photos/800/400/?gravity=east" alt="Third slide">
                <div class="carousel-caption d-none d-md-block">
                <h5>Lorem.</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, commodi.</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
        </a>
</div>

หลังจากใส่ตัวอย่าง โค้ดลงไป จะได้ผลลัพท์ประมาณนี้เลยครับ ง่ายมากๆ แทบไม่ต้องเพิ่มอะไรเลยนอกจาก html

carousel
carousel

จากตัวอย่างใช้ ID carouselExampleIndicators เป็นตัวกำหนด section Slide ใช้ carousel  โดยใส่ carousel slide carousel-fade *ตัว carousel-fade เป็นตัวกำหนดให้เป็นการเปลี่ยน slide แบบ Fade

 
Loading...