KPI FAI UMJ: Cara Membuat Testinonial Slider Responsive

ini adalah kode lengkap untuk membuat slider testimoni yang modern, responsif, dan fungsional. Saya menggunakan Swiper.js, pustaka slider paling populer, untuk memastikan performa yang halus di HP, Tablet, maupun PC. 1. Struktur HTML (index.html) Kita akan menggunakan CDN untuk FontAwesome (ikon) dan Swiper.js agar Anda tidak perlu mengunduh file tambahan. Code HTML

Your Message:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Testimonial Slider</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    <link rel="stylesheet" href="style.css">
</head>
<body>

<section class="testimonial-section">
        <div class="container">
            <h2 class="section-title">Apa Kata Mereka?</h2>
            
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="testi-card">
                            <div class="img-area">
                                <img src="https://i.pravatar.cc/150?u=1" alt="User">
                            </div>
                            <div class="content">
                                <h3>Andi Wijaya</h3>
                                <span>Web Developer</span>
                                <p>"Layanan yang sangat luar biasa! Hasil kerjanya sangat profesional dan tepat waktu. Sangat direkomendasikan."</p>
                                <div class="socials">
                                    <a href="https://facebook.com" target="_blank"><i class="fab fa-facebook"></i></a>
                                    <a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
                                    <a href="https://linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a>
                                    <a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="testi-card">
                            <div class="img-area"><img src="https://i.pravatar.cc/150?u=2" alt="User"></div>
                            <div class="content">
                                <h3>Siti Aminah</h3>
                                <span>UI/UX Designer</span>
                                <p>"Desain yang diberikan sangat modern dan sesuai dengan tren masa kini. Komunikasi juga sangat lancar."</p>
                                <div class="socials">
                                    <a href="#" target="_blank"><i class="fab fa-facebook"></i></a>
                                    <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
                                    <a href="#" target="_blank"><i class="fab fa-linkedin"></i></a>
                                    <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>

Code CSS

Your Message:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f4f7f6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 40px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    color: #333;
    font-size: 2rem;
}

/* Card Styling */
.testi-card {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    margin: 20px 10px; /* Jarak untuk shadow agar tidak terpotong */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Efek Shadow */
    transition: transform 0.3s ease;
}

.testi-card:hover {
    transform: translateY(-5px);
}

.img-area img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #007bff;
    margin-bottom: 15px;
    object-fit: cover;
}

.content h3 {
    font-size: 1.2rem;
    color: #222;
}

.content span {
    color: #007bff;
    font-size: 0.9rem;
    font-weight: 600;
}

.content p {
    color: #666;
    font-style: italic;
    margin: 15px 0;
    line-height: 1.6;
}

/* Social Media Icons */
.socials a {
    text-decoration: none;
    color: #555;
    font-size: 1.2rem;
    margin: 0 8px;
    transition: color 0.3s;
}

.socials a:hover {
    color: #007bff;
}

/* Penyesuaian Swiper Pagination */
.swiper-pagination-bullet-active {
    background: #007bff;
}

Code Java Script

Your Message:

Partner Strategis