// 1. Check input (ID or SEO Slug)
if(isset($_GET['id']) || isset($_GET['slug'])){

    // Detect if we are looking up by ID (Old way) or Slug (SEO way)
    if(isset($_GET['slug'])){
        $slug = $conn->real_escape_string($_GET['slug']);
        $sql = "SELECT * FROM news WHERE seo_url = '$slug'";
    } else {
        $id = intval($_GET['id']);
        $sql = "SELECT * FROM news WHERE id = $id";
    }

    $result = $conn->query($sql);
    
    if($result->num_rows > 0){
        $news = $result->fetch_assoc();

        // --- 2. MAP DATABASE TO VARIABLES (The Critical Step) ---
        
        // A. META TITLE
        // Logic: If admin entered a Meta Title, use it. Else, use the Article Headline.
        $page_title = !empty($news['meta_title']) ? $news['meta_title'] : $news['title'];

        // B. META DESCRIPTION
        // Logic: If admin entered Meta Desc, use it. Else, cut the Short Description to 160 chars.
        $clean_desc = strip_tags($news['short_desc']); // Remove HTML tags
        $page_desc = !empty($news['meta_description']) ? $news['meta_description'] : substr($clean_desc, 0, 160);
        
        $page_category = !empty($news['category']) ? $news['category'] : "Automotive News";

        // C. KEYWORDS (Primary + Secondary)
        // Logic: Combine them into one comma-separated string
        $keys = [];
        if(!empty($news['primary_keyword'])) $keys[] = $news['primary_keyword'];
        if(!empty($news['secondary_keywords'])) $keys[] = $news['secondary_keywords'];
        // Fallback: If empty, use category
        if(empty($keys)) $keys[] = $news['category'];
        $page_keywords = implode(', ', $keys);

        // D. IMAGE URL (For Social Sharing / Open Graph)
        // Logic: Create an absolute path (https://...) so Facebook/LinkedIn can see it.
        $base_url = "https://www.globalautoinsight.com/"; // CHANGE THIS to your actual domain
        if(!empty($news['image_url'])) {
            // If you have a specific external image URL field
            $page_image = $news['image_url'];
        } else {
            // Use the uploaded image
            $page_image = $base_url . "images/" . $news['image'];
        }

        // E. CANONICAL URL (SEO URL)
        // Logic: Tell Google the "Real" link is the SEO friendly one
        if(!empty($news['seo_url'])){
            $page_url = $base_url . "news/" . $news['seo_url'];
        } else {
            $page_url = $base_url . "read_news.php?id=" . $news['id'];
        }

        // F. IMAGE ALT TEXT (For the Body)
        $img_alt_text = !empty($news['image_alt_text']) ? $news['image_alt_text'] : $news['title'];

        $current_page = "news";

    } else {
        // News not found
        header("HTTP/1.0 404 Not Found");
        include('404.php');
        exit();
    }
} else {
    header("Location: index.php");
    exit();
}    


// 3. INCLUDE HEADER (Now the header has access to the variables above)
include 'includes/header.php'; 



// --- 1. Handle Review Submission ---
if(isset($_POST['submit_review'])){
    $n_id = $_POST['news_id'];
    $name = $conn->real_escape_string($_POST['reviewer_name']);
    $msg = $conn->real_escape_string($_POST['review_message']);
    
    // Insert into DB
    $conn->query("INSERT INTO feedback (news_id, user_name, message) VALUES ('$n_id', '$name', '$msg')");
    echo "<meta http-equiv='refresh' content='0'>";
}

// --- 2. Fetch News Data ---
if(isset($_GET['id'])){
    $id = intval($_GET['id']);
    $sql = "SELECT * FROM news WHERE id = $id";
    $result = $conn->query($sql);
    
    if($result->num_rows > 0){
        $news = $result->fetch_assoc();
        // Calculate read time
        $word_count = str_word_count($news['content']);
        $read_time = ceil($word_count / 200); 
    } else {
        header("Location: index.php");
        exit();
    }
} else {
    header("Location: index.php");
    exit();
}
?>

    <style>
        :root {
            --accent-color: #e74c3c; 
            --bg-color: #f8f9fa;      
            --card-bg: #ffffff;
            --text-main: #222222;
            --text-light: #666666;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: 'Inter', sans-serif;
            /* Footer Sticky Fix */
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* --- NAVIGATION --- */
        .navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid #eaeaea;
            padding: 15px 0;
        }

        /* --- MAIN LAYOUT CONTAINER --- */
        .main-article-wrapper {
            max-width: 1250px; 
            margin: 50px auto;
            background: var(--card-bg);
            padding: 0 0 0 0; /* Padding handled by children */
            border-radius: 12px;
            box-shadow: 0 15px 45px rgba(0,0,0,0.08); 
            overflow: hidden;
            /* Flex grow to push footer down if content is short */
            flex: 1; 
        }

        /* --- HEADER --- */
        .article-header {
            padding: 60px 80px 10px 80px; 
            text-align: center;
        }

        .category-badge {
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--accent-color);
            margin-bottom: 20px;
            display: inline-block;
            border-bottom: 3px solid var(--accent-color);
            padding-bottom: 5px;
        }

        .article-title {
            font-family: 'Cambria', sans-serif;
            font-weight: 900;
            font-size: 2.5rem; 
            line-height: 1.1;
            color: #111;
            margin-bottom: 25px;
            letter-spacing: -1.5px;
        }

        .article-meta {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 25px;
            color: var(--text-light);
            font-size: 1rem;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            padding: 20px 0;
            margin-top: 30px;
            max-width: 800px; 
            margin-left: auto;
            margin-right: auto;
        }

        /* --- IMAGES --- */
        .featured-image-container {
            width: 100%;
            max-width: 1100px; /* Limit width for large screens */
            height: 500px;     /* Fixed height to prevent page jumping */
            margin: 30px auto; 
            
            /* PLAIN BACKGROUND (Removes the blurry image effect) */
            background-color: #ffffff; 
            
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 8px;
            border: 1px solid #f0f0f0; /* Optional: subtle border */
        }
    
        /* --- 2. The Slider Item --- */
        .carousel-item {
            width: 100%;
            height: 500px; /* Must match container height */
            background-color: #ffffff; /* Ensure white background */
        }
        
        /* Container to hold the image and text */
        .static-overlay-container {
            position: relative;
            width: 100%;
            max-width: 700px; /* Constrains the whole block */
            margin: auto;
            overflow: hidden;
        }
        
        /* The Overlay Box */
        .static-text-overlay {
            position: absolute;
            top: 55%; /* Adjusted to sit in the white space */
            left: 50%;
            transform: translate(-50%, -50%);
            
            /* CRITICAL CHANGES BELOW */
            width: 75%;       /* Reduced from 85% to keep text away from edges */
            max-width: 700px; /* Prevents text from spreading too wide on big screens */
            text-align: center;
            z-index: 10;
            pointer-events: none;
        }
        
        /* Category Pill */
        .overlay-category {
            background: #333;
            color: #fff;
            padding: 5px 18px;
            border-radius: 20px;
            display: inline-block;
            margin-bottom: 12px;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 1px;
        }
        
        /* Title Styling */
        .overlay-title {
            font-family: 'Playfair Display', serif; /* Or your preferred bold serif */
            font-weight: 800;
            
            /* FONT SIZE ADJUSTMENT */
            font-size: 1.8rem; /* Reduced from 2.2rem to ensure it fits */
            
            color: #1a1a1a;
            line-height: 1.0;
            margin: 0;
            word-wrap: break-word; /* Ensures long words don't break the layout */
        }
        
        /* Mobile Responsive Adjustments */
        @media (max-width: 768px) {
            .static-text-overlay { width: 85%; }
            .overlay-title { font-size: 1.2rem; }
            .overlay-category { font-size: 0.6rem; padding: 3px 12px; }
        }
    
        /* --- 3. The Image Itself --- */
        .featured-image {
            width: 100%;
            height: 80%;
            object-fit: contain; 
            object-position: center;
            display: block;
        }
        
        /* Remove any shadows/filters from the image */
        .carousel-item img {
            box-shadow: none;
            filter: none;
        }

        /* --- ARTICLE BODY --- */
        .article-body {
            padding: 20px 80px 40px 80px; 
        }
        
        /* Fix for no-image gap */
        .article-body.no-image-gap {
            padding-top: 0 !important;
            margin-top: -20px;
        }

        /* Summary Box */
        .summary-card {
            background-color: #fcfcfc;
            border: 1px solid #eee;
            border-radius: 12px;
            padding: 40px;
            margin-bottom: 50px;
            position: relative;
        }
        .summary-card::before {
            content: ''; position: absolute;
            left: 0; top: 30px; bottom: 30px;
            width: 5px; background: var(--accent-color);
            border-radius: 0 4px 4px 0;
        }
        .summary-title {
            font-weight: 800; font-size: 1rem;
            text-transform: uppercase; color: #333;
            margin-bottom: 20px; display: flex; align-items: center;
        }
        .summary-list li {
            font-family: 'Cambria', sans-serif; font-size: 1.1rem;
            color: #444; margin-bottom: 15px; line-height: 1.6;
        }

        /* Content Text */
        .content-text {
            font-family: 'Cambria', serif;
            font-size: 1.15rem; line-height: 1.9;
            color: #2c2c2c; text-align: justify;
        }
        .content-text p { margin-bottom: 2em; }

        /* Tag Hover */
        .tag-link:hover {
            background-color: var(--accent-color) !important;
            color: white !important;
            border-color: var(--accent-color) !important;
            transition: 0.3s;
        }

        /* --- REVIEWS --- */
        .review-wrapper {
            background: #fafafa;
            border-top: 1px solid #eee;
            padding: 60px 100px;
        }
        .review-bubble {
            background: white; border: 1px solid #eee;
            border-radius: 12px; padding: 25px;
            margin-bottom: 25px; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
        }

        /* --- FOOTER FIX --- */
        footer {
            width: 100%;
            margin-top: auto; /* Pushes footer to bottom */
        }

        /* Responsive */
        @media (max-width: 992px) {
            .main-article-wrapper { width: 95%; margin: 20px auto; }
            .article-header { padding: 40px 20px; }
            .article-body, .review-wrapper { padding: 30px 20px; }
            .article-title { font-size: 2rem; }
            .featured-image-container { width: 100%; }
        }
    </style>
<!--</head>
<body>-->



<!-- Navbar -->
<!--<nav class="navbar navbar-expand-lg sticky-top">
    <div class="container">
        <div class="ms-auto">
            <a href="NewsWorldwide.php" class="text-decoration-none text-muted fw-bold small">
                <i class="fas fa-chevron-left me-1"></i> BACK TO NEWS
            </a>
        </div>
    </div>
</nav>-->

<!-- ================= MAIN LAYOUT ================= -->
<div class="main-article-wrapper">
    <!-- 1. HEADER -->
    <header class="article-header">
        <h1 class="article-title">Cofat Opens New EV Electrical Components Plant in Tunisia</h1>
        
        <div class="article-meta">
            <span><i class="far fa-calendar me-2"></i>January 19, 2026</span>
            <span>&bull;</span>
            <span><i class="far fa-clock me-2"></i> min read</span>
            <span>&bull;</span>
            <span><i class="far fa-user me-2"></i>Editorial Team</span>
        </div>

        <div class="article-meta d-flex flex-wrap justify-content-center align-items-center gap-2 mt-4" style="border:none; margin-top:0; padding-top:0;">
            <span class="text-muted small fw-bold text-uppercase"><i class="fas fa-tags me-1"></i> Tags:</span>
                                    <a href="search.php?tag=Electrification" class="text-decoration-none">
                            <span class="badge bg-light text-dark border px-3 py-2 tag-link">Electrification</span>
                        </a>
                                    <a href="search.php?tag=EV" class="text-decoration-none">
                            <span class="badge bg-light text-dark border px-3 py-2 tag-link">EV</span>
                        </a>
                                    <a href="search.php?tag=Cofat" class="text-decoration-none">
                            <span class="badge bg-light text-dark border px-3 py-2 tag-link">Cofat</span>
                        </a>
                                    <a href="search.php?tag=Tunisia" class="text-decoration-none">
                            <span class="badge bg-light text-dark border px-3 py-2 tag-link">Tunisia</span>
                        </a>
                                    <a href="search.php?tag=Plant+inauguration" class="text-decoration-none">
                            <span class="badge bg-light text-dark border px-3 py-2 tag-link">Plant inauguration</span>
                        </a>
                    </div>
    </header>

    <!-- 2. IMAGE LOGIC -->
    
    <!--Found Images: 1 
    Gallery Data: cofat-opens-new-ev-electrical-components-plant-tunisia-1768848993-0.png 
    Main Image: cofat-opens-new-ev-electrical-components-plant-tunisia-1768848993-0.png -->
    
            <div class="featured-image-container shadow-sm border rounded-4 overflow-hidden mb-5">
            
                            
                <!-- B. SINGLE IMAGE -->
                <div class="static-overlay-container" style="background: #fffff;">
                    <img src="images/cofat-opens-new-ev-electrical-components-plant-tunisia-1768848993-0.png" 
                         class="featured-image img-fluid" 
                         style="max-height: 550px; width: auto; object-fit: contain; display: block; margin: auto;">
                    
                    <!-- THE OVERLAY: Only shows if $is_static is true -->
                                    </div>
                
                    </div>
    
    <!-- 3. ARTICLE CONTENT -->
    <div class="article-body ">
        
        <!-- Summary -->
        <div class="summary-card">
            <div class="summary-title"><i class="fas fa-bolt text-warning me-2"></i> Quick Takeaways</div>
            <ul class="summary-list list-unstyled m-0">
                <li><i class='fas fa-check text-success me-2 small'></i>Cofat opens new EV electrical components plant in Tunisia, strengthening the country’s role in the global electric vehicle supply chain.</li><li><i class='fas fa-check text-success me-2 small'></i>The project signals growing international confidence in Tunisia’s automotive manufacturing ecosystem.</li>            </ul>
        </div>

        <!-- Full Text -->
        <div class="content-text">
            On January 13, the Tunisian Automotive Association announced that Cofat, a subsidiary of the Elloumi Group, has inaugurated a new manufacturing facility in the Sbikha industrial zone of the Kairouan governorate. The development marks a significant step in expanding Tunisia’s footprint in advanced automotive technologies.<br />
<strong>EV Electrical Components Manufacturing Expansion</strong><br />
The newly opened plant will focus on producing electrical components for electric vehicles, catering to international automotive manufacturers and suppliers. By targeting export-oriented production, Cofat aims to integrate the facility into global value chains while meeting the growing demand for reliable EV electrical systems.<br />
<strong>Employment and Regional Impact</strong><br />
<ul><li>The facility is expected to create nearly 2,000 direct jobs, providing a substantial boost to local employment and industrial activity in the Kairouan region.</li></ul> This investment reinforces Tunisia’s position as a competitive manufacturing hub for the evolving electric mobility sector. <br />
Based on a press release from the Tunisian Automotive Association, the project reflects continued momentum in the country’s automotive industry and its alignment with global electrification trends.        </div>

        <!-- Link Button -->
                    <div class="mt-5 mb-5">
                <div class="d-grid gap-2 col-md-8 mx-auto">
                    <a href="https://taa.tn/fr/node/221" target="_blank" class="btn btn-lg btn-outline-dark rounded-pill py-3 fw-bold shadow-sm">
                        <i class="fas fa-external-link-alt me-2 text-danger"></i>
                        Company Press Release                    </a>
                    <p class="text-center text-muted small mt-1">
                        <i class="fas fa-info-circle me-1"></i> Click above to visit the official source.
                    </p>
                </div>
            </div>
        
        <!-- Share -->
        <div class="d-flex justify-content-between align-items-center mt-5 pt-4 border-top">
            <div>
                <span class="fw-bold small me-2 text-uppercase">Share:</span>
            </div>
            <div>
                <button class="btn btn-outline-dark rounded-circle me-1" style="width:40px; height:40px;"><i class="fab fa-twitter"></i></button>
                <button class="btn btn-outline-dark rounded-circle me-1" style="width:40px; height:40px;"><i class="fab fa-facebook-f"></i></button>
                <button class="btn btn-outline-dark rounded-circle" style="width:40px; height:40px;"><i class="fas fa-share-alt"></i></button>
            </div>
        </div>
    </div> <!-- Close Article Body -->

    <!-- 4. REVIEWS -->
    <div class="review-wrapper">
        <div class="d-flex justify-content-between align-items-center mb-5">
            <div>
                <h3 class="fw-bold mb-1">Discussion</h3>
                <p class="text-muted mb-0">Join the conversation.</p>
            </div>
            <button class="btn-action" data-bs-toggle="modal" data-bs-target="#reviewModal">
                <i class="fas fa-comment-alt me-2"></i> Add Comment
            </button>
        </div>

        <div class="review-list">
                            <div class="review-bubble">
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded-circle bg-dark text-white d-flex align-items-center justify-content-center fw-bold me-3" 
                             style="width: 45px; height: 45px; font-size: 1rem;">
                            D                        </div>
                        <div>
                            <h6 class="fw-bold mb-0 text-dark">DavidJouby</h6>
                            <small class="text-muted" style="font-size: 0.8rem;">
                                March 26, 2026                            </small>
                        </div>
                    </div>
                    <p class="mb-0 text-secondary" style="font-size: 1.1rem; line-height: 1.6;">
                        Good morning! globalautoinsight.com, 
I recently found globalautoinsight.com online. 
We help companies reach new partners through website contact pages. 
This approach helps companies find partners and customers. 
  
  
You can try our service without paying anything. 
 
Thanks for taking a moment to read this. 
Contact us. 
Telegram - https://t.me/FeedbackFormEU 
WhatsApp - +375259112693 
WhatsApp  https://wa.me/+375259112693                    </p>
                </div>
                            <div class="review-bubble">
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded-circle bg-dark text-white d-flex align-items-center justify-content-center fw-bold me-3" 
                             style="width: 45px; height: 45px; font-size: 1rem;">
                            A                        </div>
                        <div>
                            <h6 class="fw-bold mb-0 text-dark">Andrewtisse</h6>
                            <small class="text-muted" style="font-size: 0.8rem;">
                                February 20, 2026                            </small>
                        </div>
                    </div>
                    <p class="mb-0 text-secondary" style="font-size: 1.1rem; line-height: 1.6;">
                        Howdy-doody! globalautoinsight.com 
 
Did you know that it is possible to send messages completely lawfully? 
When such proposals are submitted, no personal information is utilized, and messages are routed to forms specifically configured to receive messages and appeals securely. Messages through Feedback Forms are highly unlikely to be labeled as spam, since they are deemed important. 
Trу out our service without paying a dіme! 
We can transmit a maximum of 50,000 messages for you. 
 
The cost of sending one million messages is $59. 
 
This offer is automatically generated. 
 
Contact us. 
Telegram - https://t.me/FeedbackFormEU 
WhatsApp - +375259112693 
WhatsApp  https://wa.me/+375259112693 
We only use chat for communication.                    </p>
                </div>
                            <div class="review-bubble">
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded-circle bg-dark text-white d-flex align-items-center justify-content-center fw-bold me-3" 
                             style="width: 45px; height: 45px; font-size: 1rem;">
                            D                        </div>
                        <div>
                            <h6 class="fw-bold mb-0 text-dark">Davidsok</h6>
                            <small class="text-muted" style="font-size: 0.8rem;">
                                February 14, 2026                            </small>
                        </div>
                    </div>
                    <p class="mb-0 text-secondary" style="font-size: 1.1rem; line-height: 1.6;">
                        Good day! globalautoinsight.com 
 
Did you know that it is possible to send messages in a completely legitimate way? 
When such commercial offers are sent, no personal data is used and messages are sent to forms specifically designed to receive messages and appeals efficiently. Messages that are sent with the help of Feedback Forms are not viewed as spam since they are seen as important. 
Try our service out – it’s free of charge! 
We can send up to 50,000 messages on your behalf. 
 
The cost of sending one million messages is $59. 
 
This message was automatically generated. 
 
Contact us. 
Telegram - https://t.me/FeedbackFormEU 
Skype  live:contactform_18 
WhatsApp - +375259112693 
WhatsApp  https://wa.me/+375259112693 
We only use chat for communication.                    </p>
                </div>
                    </div>
    </div>

</div> <!-- End Main Wrapper -->

<!-- ================= MODAL ================= -->
<div class="modal fade" id="reviewModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 12px;">
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-bold ms-2 mt-2">Join the Discussion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST">
                <div class="modal-body p-4">
                    <input type="hidden" name="news_id" value="114">
                    <div class="form-floating mb-3">
                        <input type="text" name="reviewer_name" class="form-control rounded-3" id="floatingInput" placeholder="Name" required>
                        <label for="floatingInput">Your Name</label>
                    </div>
                    <div class="form-floating">
                        <textarea name="review_message" class="form-control rounded-3" placeholder="Comment" id="floatingTextarea" style="height: 120px" required></textarea>
                        <label for="floatingTextarea">What are your thoughts?</label>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0 pe-4 pb-4">
                    <button type="button" class="btn btn-link text-muted text-decoration-none" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" name="submit_review" class="btn btn-dark rounded-pill px-4 fw-bold">Post Comment</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- 2. THEN Include Footer -->
<!-- Footer -->
<footer class="mt-5 bg-dark">
    <div class="container pb-5 pt-5">
        <div class="row">
            <div class="col-md-4">
                <h3 class="fw-bold text-white">GLOBAL AUTO</h3>
                <p class="text-secondary">We bring you the latest automotive news, reviews, and insights from around the globe.</p>
            </div>
            <div class="col-md-4">
                <h5 class="text-white">Quick Links</h5>
                <a href="index.php" class="text-secondary text-decoration-none d-block mb-2">Home</a>
                <a href="admin_login.php" class="text-secondary text-decoration-none d-block mb-2">Admin Login</a>
                <a href="contact.php" class="text-secondary text-decoration-none d-block">Contact Us</a>
            </div>
            <div class="col-md-4">
                <h5 class="text-white">Newsletter</h5>
                <div class="input-group mt-3">
                    <input type="email" class="form-control" placeholder="Email Address">
                    <button class="btn btn-danger">Subscribe</button>
                </div>
            </div>
        </div>
        <hr class="mt-4 border-secondary">
        <p class="text-center mb-0 text-secondary">&copy; 2026 Global Auto Insight. All rights reserved.</p>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- Optional: Allow pages to inject specific JS scripts -->


<script>
    // Scroll Progress
    window.onscroll = function() {
        // Safety Check: Ensure progress bar exists before running logic
        var bar = document.getElementById("progressBar");
        if(bar){
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            var scrolled = (winScroll / height) * 100;
            bar.style.width = scrolled + "%";
        }
    };

    // Force Carousel Autoplay
    // NOTICE: Switched single quotes to double quotes below to fix PHP error
    document.addEventListener("DOMContentLoaded", function () {
        var myCarousel = document.querySelector("#newsGalleryCarousel");
        if(myCarousel) {
            var carousel = new bootstrap.Carousel(myCarousel, {
                interval: 3000, 
                ride: "carousel",
                wrap: true
            });
        }
    });
</script>

</body>
</html>