ขอความช่วยเหลือ ดู Code สไลด์ แบบมีลูกศรกดด้านข้างครับ

สำหรับผู้ที่ เริ่มต้น Programming - PHP มีอะไร แนะนำ หรือข้อสงสัยต้องบอร์ด นี้ คนที่มีความรู้ แบ่งปันคนอื่นบ้างนะ ปัญหาการเขียนโปรแกรม แบบ OOP Session Cookies php network

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
dzjp
PHP Newbie
PHP Newbie
โพสต์: 1
ลงทะเบียนเมื่อ: 13/07/2020 2:37 pm

ขอความช่วยเหลือ ดู Code สไลด์ แบบมีลูกศรกดด้านข้างครับ

โพสต์ที่ยังไม่ได้อ่าน โดย dzjp »

รบกวนสอบถามครับ จะทำให้ ภาพสไลด์ แบบมีลูกศรกด ด้านข้างทำยังไง ครับ

ผมมี ไฟล์ แนบให้ดู ครับ ช่วยแนะนำผมทีนะครับ
Test.rar
(647.66 KiB) ดาวน์โหลดแล้ว 119 ครั้ง
อันนี้ 1. code html

โค้ด: เลือกทั้งหมด

<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Slick</title>
        <link rel="stylesheet" href="css/slick.css">
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        
        <div class="collection-slick-slider multiple-items">
            <div class="item">
                <img src="Image/1.jpg" alt="">
            </div>
            <div class="item">
                <img src="Image/2.jpg" alt="">
            </div>
            <div class="item">
                <img src="Image/3.jpg" alt="">
            </div>
            <div class="item">
                <img src="Image/4.jpg" alt="">
            </div>
            <div class="item">
                <img src="Image/5.jpg" alt="">
            </div>
            <div class="item">
                <img src="Image/6.jpg" alt="">
            </div>
            <div class="item">
                <img src="Image/7.jpg" alt="">
            </div>
        </div>
        
        
        
        <script src="js/slick.min.js"></script>
        <script src="js/custom.js"></script>   
    </body>
</html>
อันนี้ 2. Code Style.css

โค้ด: เลือกทั้งหมด

.collection-slick-slider {
    display: flex;
}

.collection-slick-slider .item{
    width: 350px;
    height: 250px;
    margin: 50px;
}

.collection-slick-slider .item img{
    width: 350px;
    height: 250px;
    
}
อันนี้ 3. Code Custom.js

โค้ด: เลือกทั้งหมด

$(function () {
    $('.multiple-items').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
    });
});
ตัว Code ใน custom เอามาจากเว็บ http://kenwheeler.github.io/slick/ ครับ
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: Bing [Bot] และบุคลทั่วไป 50