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

Alternative Text

Parmarno (I-Makeweb.com)

ผมเป็น Web Developer ที่ยินดีให้คำแนะนำปรึกษาทั้ง Frontend และ Backend รวมถึง Server Network หากว่าผมช่วยให้คำแนะนำจนแก้ปัญหาได้ก็ดี ความรู้ที่มียินดีแบ่งปันให้นะครับ

Plugin Redis Object Cache จับเอา Redis มาทำ Cache

การจับ Redis มาใช้งานเป็นตัว Caching Object Cache โดยผ่าน Plugin Redis Object Cache มาลองดูตัวอย่างการใช้งานกันอย่างง่ายและไวมาก

เรื่องที่ควรจะให้ความสำคัญ ข้อมูลส่วนตัวในโลกออนไลน์

ความสำคัญของข้อมูลส่วนตัวในโลกออนไลน์ การอนุญาติให้ไปสามารถเอาไปใช้งาน ตัวอย่างเอาไปใช้อะไรได้บ้าง และการลบข้อมูลที่อนุญาติ

 
Loading...