js4-6

by wang_siang

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="container">
        <div class="single-item"></div>
    </div>

CSS

*,
        ::after,
        ::before {
            box-sizing: border-box;
        }

        body {
            margin: 0;
        }

        .container {
            padding: 40px 40px 16px 40px;
            background: #ffda7bbc;
        }

        .single-item {
            max-width: 800px;
            margin: 0 auto;
        }

JavaScript

const img = [
            `https://images.unsplash.com/photo-1738066246945-81af71b60493?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`,
            `https://images.unsplash.com/photo-1739312025707-bbf6765973b3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`,
            `https://images.unsplash.com/photo-1739047855450-27615bc98bc5?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`,
            `https://images.unsplash.com/photo-1504446659705-07c22b96c3fd?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`,
            `https://images.unsplash.com/photo-1740121565887-efe5b47fe9fb?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D`
        ]

        const items = img.map((item,i)=>{
            return `<img src="${item}" alt="圖片${i+1}">`
        }).join('');

        
        $('.single-item').html(items);

        $('.single-item').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 1,
            arrows: true,
            dots: true,
            autoplay: true,
            autoplaySpeed: 2000,
        });