Today, we’re going to create a delightful carousel slider that showcases different plans—perfect for any service-based business.

Step 1: Setting Up Your HTML

First things first, let's lay out our HTML structure. This is where the magic begins! We'll create a simple document that includes a carousel. Here’s a snippet to get us going:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="carousel">
        <div class="plan">
            <!-- Plan details go here -->
        </div>
        <!-- More plans here -->
        <div class="arrows">
            <button id="prev"><</button>
            <button id="next">></button>
        </div>
    </div> 
    <script src="app.js"></script>
</body>
</html>

Step 2: Adding the Plans

Inside your carousel, you’ll want to add a few plans. Each plan will have a title, image, price, and a button to see more details. Here’s how you can do that:

<div class="plan">
    <h1>Basic Plan</h1>
    <img src="https://example.com/image.jpg">
    <div class="price">$499/month</div>
    <button class="see-detail">See detail</button>
    <div class="detail">
        <h1>Features</h1>
        <ul>
            <li>Family Law Support</li>
            <li>Business Law Consultation</li>
            <li>Estate Planning Assistance</li>
            <li>Personal Injury Guidance</li>
            <li>Monthly Performance Report</li>
        </ul>
    </div>
</div>

Repeat this for each plan (Basic, Standard, and Premium) while adjusting the details accordingly!

Step 3: Styling with CSS

Now, let’s make it pretty! We’ll add some CSS to style our carousel and plans. Here’s a basic style setup:

.carousel {
    position: relative;
    width: 100%;
    height: 870px;
    overflow: hidden;
}

.plan {
    position: absolute;
    width: 400px;
    height: 650px;
    text-align: center;
    background-color: #ebece7;
    border-radius: 20px;
    padding: 10px;
    transition: 0.5s;
    left: calc(50% - 15px);
    top: 10%;
    color: #5a5143;
}

.arrows {
    position: absolute;
    bottom: 200px;
    width: 1140px;
    display: flex;
    justify-content: space-between;
    left: 10%;
    top: 50%;
}

Feel free to customize colors, fonts, and sizes to match your brand’s vibe!

Step 4: Making It Interactive with JavaScript

Now, the fun part! Let’s make our carousel interactive. We’ll write some JavaScript to allow users to navigate through the plans.

let activeIndex = 0;
const plans = document.querySelectorAll('.plan');
const totalPlans = plans.length;

function updateActivePlan() {
    plans.forEach((plan, index) => {
        plan.style.opacity = index === activeIndex ? 1 : 0.6;
        plan.style.transform = index === activeIndex ? 'scale(1)' : 'scale(0.8)';
    });
}

document.getElementById('next').addEventListener('click', () => {
    activeIndex = (activeIndex + 1) % totalPlans;
    updateActivePlan();
});

document.getElementById('prev').addEventListener('click', () => {
    activeIndex = (activeIndex - 1 + totalPlans) % totalPlans;
    updateActivePlan();
});

updateActivePlan(); // Initial call to set the first active plan

Step 5: Test Your Carousel

You’ve done it! Now, it’s time to test your carousel. Open your HTML file in a browser and click those navigation buttons. You should see your plans sliding beautifully!