{"id":5877,"date":"2025-06-26T14:27:55","date_gmt":"2025-06-26T06:27:55","guid":{"rendered":"https:\/\/sing2sky.com\/?page_id=5877"},"modified":"2025-09-19T07:15:26","modified_gmt":"2025-09-19T11:15:26","slug":"factory-real-view","status":"publish","type":"page","link":"https:\/\/sing2sky.com\/es\/about-us\/factory-real-view\/","title":{"rendered":"Vista real de la f\u00e1brica"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5877\" class=\"elementor elementor-5877\" wpc-filter-elementor-widget=\"1\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fd75ec5 e-flex e-con-boxed e-con e-parent\" data-id=\"fd75ec5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2aed84b elementor-widget elementor-widget-html\" data-id=\"2aed84b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Manufacturing Excellence - Premium Wooden Educational Toys Factory<\/title>\r\n    <meta name=\"description\" content=\"Discover our state-of-the-art manufacturing facility producing premium wooden educational toys for preschools, kindergartens, and childcare centers. Quality craftsmanship meets safety standards.\">\r\n    <meta name=\"keywords\" content=\"wooden educational toys manufacturing, preschool toys factory, kindergarten educational materials, childcare center toys, wooden toy production, educational toy manufacturing\">\r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        html, body {\r\n            width: 100%;\r\n            height: 100%;\r\n            overflow-x: hidden;\r\n        }\r\n\r\n        body {\r\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n            line-height: 1.6;\r\n            color: #333;\r\n            background-color: #fff;\r\n        }\r\n\r\n        \/* Header styles - Full-screen banner *\/\r\n        .banner_img {\r\n            text-align: center;\r\n            width: 100vw;\r\n            height: 60vh;\r\n            min-height: 400px;\r\n            position: relative;\r\n            margin-left: calc(-50vw + 50%);\r\n        }\r\n\r\n        .banner_img img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            display: block;\r\n        }\r\n\r\n        .wrap {\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 2vw;\r\n        }\r\n\r\n        \/* Product top section - Full screen width *\/\r\n        .product-top {\r\n            padding: 5vh 0;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 4vw;\r\n            min-height: 40vh;\r\n        }\r\n\r\n        .product-top .left-content {\r\n            flex: 1;\r\n        }\r\n\r\n        .product-top .right-content {\r\n            flex: 1;\r\n        }\r\n\r\n        .tit2 {\r\n            font-size: clamp(2rem, 5vw, 4rem);\r\n            font-weight: 700;\r\n            color: #2c3e50;\r\n            margin-bottom: 0;\r\n            line-height: 1.2;\r\n        }\r\n\r\n        .vtxt {\r\n            font-size: clamp(1rem, 1.5vw, 1.2rem);\r\n            color: #666;\r\n            line-height: 1.8;\r\n        }\r\n\r\n        .vtxt p {\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        \/* CAROUSEL SECTION *\/\r\n        .carousel-section {\r\n            background-color: #f8f9fa;\r\n            width: 100vw;\r\n            padding: 5vh 0;\r\n            margin-left: calc(-50vw + 50%);\r\n            position: relative;\r\n        }\r\n\r\n        .carousel-container {\r\n            position: relative;\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 0 60px;\r\n        }\r\n\r\n        .carousel-wrapper {\r\n            overflow: hidden;\r\n            border-radius: 16px;\r\n        }\r\n\r\n        .carousel-track {\r\n            display: flex;\r\n            transition: transform 0.5s ease-in-out;\r\n            will-change: transform;\r\n        }\r\n\r\n        .carousel-slide {\r\n            width: calc(50% - 10px);\r\n            min-width: calc(50% - 10px);\r\n            background: white;\r\n            border-radius: 16px;\r\n            overflow: hidden;\r\n            box-shadow: 0 8px 32px rgba(0,0,0,0.1);\r\n            margin-right: 20px;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        .slide-content {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            min-height: 400px;\r\n            padding: 0;\r\n        }\r\n\r\n        .slide-image {\r\n            width: 100%;\r\n            height: 300px;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        .slide-image img {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n            transition: transform 0.3s ease;\r\n        }\r\n\r\n        .slide-image:hover img {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        .slide-text {\r\n            width: 100%;\r\n            padding: 20px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            text-align: center;\r\n        }\r\n\r\n        .slide-title {\r\n            font-size: clamp(1.3rem, 2.5vw, 2rem);\r\n            font-weight: 600;\r\n            color: #2c3e50;\r\n            margin-bottom: 20px;\r\n            text-align: center;\r\n        }\r\n\r\n        \/* Navigation buttons *\/\r\n        .carousel-nav {\r\n            position: absolute;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            width: 50px;\r\n            height: 50px;\r\n            background: white;\r\n            border: none;\r\n            border-radius: 50%;\r\n            box-shadow: 0 4px 20px rgba(0,0,0,0.15);\r\n            cursor: pointer;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 20px;\r\n            color: #2c3e50;\r\n            transition: all 0.3s ease;\r\n            z-index: 10;\r\n        }\r\n\r\n        .carousel-nav:hover {\r\n            background: #2c3e50;\r\n            color: white;\r\n            transform: translateY(-50%) scale(1.1);\r\n        }\r\n\r\n        .carousel-nav:focus {\r\n            outline: 2px solid #2c3e50;\r\n            outline-offset: 2px;\r\n        }\r\n\r\n        .carousel-nav.prev {\r\n            left: 10px;\r\n        }\r\n\r\n        .carousel-nav.next {\r\n            right: 10px;\r\n        }\r\n\r\n        \/* Dots indicator *\/\r\n        .carousel-dots {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 12px;\r\n            margin-top: 40px;\r\n        }\r\n\r\n        .dot {\r\n            width: 12px;\r\n            height: 12px;\r\n            border-radius: 50%;\r\n            background: #ddd;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            border: none;\r\n        }\r\n\r\n        .dot:focus {\r\n            outline: 2px solid #2c3e50;\r\n            outline-offset: 2px;\r\n        }\r\n\r\n        .dot.active {\r\n            background: #2c3e50;\r\n            transform: scale(1.2);\r\n        }\r\n\r\n        \/* Responsive design *\/\r\n        @media (max-width: 1200px) {\r\n            .carousel-slide {\r\n                min-width: calc(50% - 10px);\r\n                margin-right: 20px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 992px) {\r\n            .banner_img {\r\n                height: 50vh;\r\n                min-height: 350px;\r\n            }\r\n            \r\n            .product-top {\r\n                flex-direction: column;\r\n                gap: 3vh;\r\n                text-align: center;\r\n                min-height: 50vh;\r\n            }\r\n            \r\n            .carousel-slide {\r\n                min-width: calc(50% - 10px);\r\n                margin-right: 20px;\r\n            }\r\n            \r\n            .slide-content {\r\n                min-height: 380px;\r\n            }\r\n            \r\n            .slide-image {\r\n                height: 280px;\r\n            }\r\n            \r\n            .slide-text {\r\n                padding: 20px 15px;\r\n            }\r\n            \r\n            .carousel-container {\r\n                padding: 0 40px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .banner_img {\r\n                height: 40vh;\r\n                min-height: 280px;\r\n            }\r\n            \r\n            .product-top {\r\n                padding: 4vh 0;\r\n                min-height: 40vh;\r\n                text-align: center;\r\n            }\r\n            \r\n            .carousel-section {\r\n                padding: 4vh 0;\r\n            }\r\n            \r\n            .carousel-slide {\r\n                width: 100%;\r\n                min-width: 100%;\r\n                margin-right: 0;\r\n            }\r\n            \r\n            .carousel-container {\r\n                padding: 0 30px;\r\n            }\r\n            \r\n            .carousel-nav {\r\n                width: 40px;\r\n                height: 40px;\r\n                font-size: 16px;\r\n            }\r\n            \r\n            .slide-content {\r\n                min-height: 350px;\r\n            }\r\n            \r\n            .slide-image {\r\n                height: 250px;\r\n            }\r\n            \r\n            .slide-text {\r\n                padding: 20px 15px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 576px) {\r\n            .wrap {\r\n                padding: 0 3vw;\r\n            }\r\n            \r\n            .banner_img {\r\n                height: 35vh;\r\n                min-height: 220px;\r\n            }\r\n            \r\n            .product-top {\r\n                padding: 3vh 0;\r\n                min-height: 35vh;\r\n                text-align: center;\r\n            }\r\n            \r\n            .carousel-section {\r\n                padding: 3vh 0;\r\n            }\r\n            \r\n            .carousel-container {\r\n                padding: 0 20px;\r\n            }\r\n            \r\n            .carousel-slide {\r\n                width: 100%;\r\n                min-width: 100%;\r\n                margin-right: 0;\r\n            }\r\n            \r\n            .slide-content {\r\n                min-height: 320px;\r\n            }\r\n            \r\n            .slide-text {\r\n                padding: 18px 15px;\r\n            }\r\n            \r\n            .slide-image {\r\n                height: 220px;\r\n            }\r\n            \r\n            .slide-title {\r\n                font-size: 1.3rem;\r\n                margin-bottom: 15px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .banner_img {\r\n                height: 30vh;\r\n                min-height: 200px;\r\n            }\r\n            \r\n            .slide-content {\r\n                min-height: 300px;\r\n            }\r\n            \r\n            .slide-image {\r\n                height: 200px;\r\n            }\r\n            \r\n            .slide-title {\r\n                font-size: 1.2rem;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 360px) {\r\n            .wrap {\r\n                padding: 0 2vw;\r\n            }\r\n            \r\n            .banner_img {\r\n                height: 25vh;\r\n                min-height: 180px;\r\n            }\r\n            \r\n            .slide-content {\r\n                min-height: 280px;\r\n            }\r\n            \r\n            .slide-image {\r\n                height: 180px;\r\n            }\r\n            \r\n            .slide-title {\r\n                font-size: 1.1rem;\r\n                margin-bottom: 10px;\r\n            }\r\n            \r\n            .carousel-container {\r\n                padding: 0 15px;\r\n            }\r\n        }\r\n\r\n        \/* Animation classes *\/\r\n        .wow {\r\n            visibility: visible;\r\n            animation: fadeInUp 0.8s ease;\r\n        }\r\n\r\n        @keyframes fadeInUp {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(30px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        \/* Ensure content area fills screen *\/\r\n        main {\r\n            width: 100%;\r\n            min-height: 100vh;\r\n        }\r\n\r\n        \/* Remove any possible margins *\/\r\n        html {\r\n            scroll-behavior: smooth;\r\n        }\r\n\r\n        body {\r\n            margin: 0;\r\n            padding: 0;\r\n        }\r\n\r\n        \/* SEO and accessibility improvements *\/\r\n        .sr-only {\r\n            position: absolute;\r\n            width: 1px;\r\n            height: 1px;\r\n            padding: 0;\r\n            margin: -1px;\r\n            overflow: hidden;\r\n            clip: rect(0, 0, 0, 0);\r\n            white-space: nowrap;\r\n            border: 0;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <main role=\"main\">\r\n        <section class=\"banner_img\" aria-labelledby=\"banner-heading\">\r\n            <img decoding=\"async\" src=\"https:\/\/sing2sky.com\/wp-content\/uploads\/2025\/06\/Factory-front-view.avif\" alt=\"Modern wooden educational toy manufacturing facility - front view of our production facility specializing in preschool and kindergarten learning materials\" loading=\"eager\" title=\"\">\r\n            <h1 id=\"banner-heading\" class=\"sr-only\">Premium Wooden Educational Toys Manufacturing Excellence<\/h1>\r\n        <\/section>\r\n        \r\n        <section class=\"product-top wrap\" aria-labelledby=\"manufacturing-heading\">\r\n            <div class=\"left-content\">\r\n                <h2 id=\"manufacturing-heading\" class=\"tit2 wow fadeInUp\">Behind the Scenes:<br>\r\n                    Our Manufacturing<br>\r\n                    Excellence<\/h2>\r\n            <\/div>\r\n            <div class=\"right-content\">\r\n                <div class=\"vtxt wow fadeInUp\">\r\n                    <p>Take a journey through our state-of-the-art manufacturing facilities where innovation meets precision. Our modern production environments showcase the advanced technology and meticulous processes that bring premium wooden educational toys to life.<\/p>\r\n                    <p>From our expansive factory grounds to specialized production lines, every corner of our facility reflects our commitment to quality manufacturing and creating safe, durable educational materials for preschools, kindergartens, and childcare centers worldwide.<\/p>            \r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n        \r\n        <section class=\"carousel-section\" aria-labelledby=\"facilities-heading\">\r\n            <div class=\"wrap\">\r\n                <h3 id=\"facilities-heading\" class=\"sr-only\">Manufacturing Facilities Tour<\/h3>\r\n                <div class=\"carousel-container\">\r\n                    <div class=\"carousel-wrapper\" role=\"region\" aria-label=\"Manufacturing facility image carousel\">\r\n                        <div class=\"carousel-track\" id=\"carouselTrack\" role=\"group\" aria-live=\"polite\">\r\n                            <!-- Slide 1 -->\r\n                            <div class=\"carousel-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"1 of 4\">\r\n                                <div class=\"slide-content\">\r\n                                    <div class=\"slide-image\">\r\n                                        <img decoding=\"async\" src=\"https:\/\/sing2sky.com\/wp-content\/uploads\/2025\/06\/Factory-aerial-photography.avif\" alt=\"Aerial view of our wooden educational toy manufacturing complex showing the scale and organization of our production facility\" loading=\"lazy\" title=\"\">\r\n                                    <\/div>\r\n                                    <div class=\"slide-text\">\r\n                                        <h4 class=\"slide-title\">Factory Aerial View<\/h4>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            \r\n                            <!-- Slide 2 -->\r\n                            <div class=\"carousel-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"2 of 4\">\r\n                                <div class=\"slide-content\">\r\n                                    <div class=\"slide-image\">\r\n                                        <img decoding=\"async\" src=\"https:\/\/sing2sky.com\/wp-content\/uploads\/2025\/06\/Sample-room.avif\" alt=\"Product sample room displaying various wooden educational toys for preschool and kindergarten learning activities\" loading=\"lazy\" title=\"\">\r\n                                    <\/div>\r\n                                    <div class=\"slide-text\">\r\n                                        <h4 class=\"slide-title\">Product Sample Room<\/h4>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            \r\n                            <!-- Slide 3 -->\r\n                            <div class=\"carousel-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"3 of 4\">\r\n                                <div class=\"slide-content\">\r\n                                    <div class=\"slide-image\">\r\n                                        <img decoding=\"async\" src=\"https:\/\/sing2sky.com\/wp-content\/uploads\/2025\/06\/Use-scenarios.avif\" alt=\"Educational toys in use scenarios showing children learning with our wooden educational materials in classroom settings\" loading=\"lazy\" title=\"\">\r\n                                    <\/div>\r\n                                    <div class=\"slide-text\">\r\n                                        <h4 class=\"slide-title\">Learning Scenarios<\/h4>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            \r\n                            <!-- Slide 4 -->\r\n                            <div class=\"carousel-slide\" role=\"group\" aria-roledescription=\"slide\" aria-label=\"4 of 4\">\r\n                                <div class=\"slide-content\">\r\n                                    <div class=\"slide-image\">\r\n                                        <img decoding=\"async\" src=\"https:\/\/sing2sky.com\/wp-content\/uploads\/2025\/06\/warehouse.avif\" alt=\"Organized warehouse facility for storing and shipping wooden educational toys to preschools and educational institutions\" loading=\"lazy\" title=\"\">\r\n                                    <\/div>\r\n                                    <div class=\"slide-text\">\r\n                                        <h4 class=\"slide-title\">Storage & Distribution<\/h4>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <button class=\"carousel-nav prev\" id=\"prevBtn\" aria-label=\"Previous slide\">\r\n                        <span aria-hidden=\"true\">\u2039<\/span>\r\n                    <\/button>\r\n                    <button class=\"carousel-nav next\" id=\"nextBtn\" aria-label=\"Next slide\">\r\n                        <span aria-hidden=\"true\">\u203a<\/span>\r\n                    <\/button>\r\n                    \r\n                    <div class=\"carousel-dots\" id=\"carouselDots\" role=\"tablist\" aria-label=\"Slide navigation\">\r\n                        <button class=\"dot active\" data-slide=\"0\" role=\"tab\" aria-selected=\"true\" aria-label=\"Go to slide 1\"><\/button>\r\n                        <button class=\"dot\" data-slide=\"1\" role=\"tab\" aria-selected=\"false\" aria-label=\"Go to slide 2\"><\/button>\r\n                        <button class=\"dot\" data-slide=\"2\" role=\"tab\" aria-selected=\"false\" aria-label=\"Go to slide 3\"><\/button>\r\n                        <button class=\"dot\" data-slide=\"3\" role=\"tab\" aria-selected=\"false\" aria-label=\"Go to slide 4\"><\/button>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n    <\/main>\r\n\r\n    <script>\r\n        class Carousel {\r\n            constructor() {\r\n                this.track = document.getElementById('carouselTrack');\r\n                this.prevBtn = document.getElementById('prevBtn');\r\n                this.nextBtn = document.getElementById('nextBtn');\r\n                this.dots = document.querySelectorAll('.dot');\r\n                this.totalSlides = 4;\r\n                this.currentSlideIndex = 0;\r\n                this.slidesPerView = this.getSlidesPerView();\r\n                this.autoPlayInterval = null;\r\n                this.isTransitioning = false;\r\n                \r\n                this.init();\r\n                this.setupResponsive();\r\n            }\r\n            \r\n            getSlidesPerView() {\r\n                return window.innerWidth <= 768 ? 1 : 2;\r\n            }\r\n            \r\n            setupResponsive() {\r\n                window.addEventListener('resize', () => {\r\n                    const newSlidesPerView = this.getSlidesPerView();\r\n                    if (newSlidesPerView !== this.slidesPerView) {\r\n                        this.slidesPerView = newSlidesPerView;\r\n                        \/\/ Reset to safe position\r\n                        this.currentSlideIndex = Math.min(this.currentSlideIndex, this.getMaxSlideIndex());\r\n                        this.updateCarousel();\r\n                    }\r\n                });\r\n                \r\n                \/\/ Initial setup\r\n                setTimeout(() => {\r\n                    this.updateCarousel();\r\n                }, 100);\r\n            }\r\n            \r\n            getMaxSlideIndex() {\r\n                return Math.max(0, this.totalSlides - this.slidesPerView);\r\n            }\r\n            \r\n            init() {\r\n                \/\/ Event listeners\r\n                this.prevBtn.addEventListener('click', (e) => {\r\n                    e.preventDefault();\r\n                    this.previousSlide();\r\n                });\r\n                \r\n                this.nextBtn.addEventListener('click', (e) => {\r\n                    e.preventDefault();\r\n                    this.nextSlide();\r\n                });\r\n                \r\n                this.dots.forEach((dot, index) => {\r\n                    dot.addEventListener('click', (e) => {\r\n                        e.preventDefault();\r\n                        const slideIndex = parseInt(e.target.dataset.slide);\r\n                        this.goToSlide(slideIndex);\r\n                    });\r\n                });\r\n                \r\n                \/\/ Auto play\r\n                this.startAutoPlay();\r\n                \r\n                \/\/ Pause auto play on hover\r\n                const carouselContainer = document.querySelector('.carousel-container');\r\n                carouselContainer.addEventListener('mouseenter', () => this.stopAutoPlay());\r\n                carouselContainer.addEventListener('mouseleave', () => this.startAutoPlay());\r\n                \r\n                \/\/ Touch support for mobile\r\n                this.addTouchSupport();\r\n                \r\n                \/\/ Keyboard navigation for accessibility\r\n                this.addKeyboardSupport();\r\n            }\r\n            \r\n            addKeyboardSupport() {\r\n                this.prevBtn.addEventListener('keydown', (e) => {\r\n                    if (e.key === 'Enter' || e.key === ' ') {\r\n                        e.preventDefault();\r\n                        this.previousSlide();\r\n                    }\r\n                });\r\n                \r\n                this.nextBtn.addEventListener('keydown', (e) => {\r\n                    if (e.key === 'Enter' || e.key === ' ') {\r\n                        e.preventDefault();\r\n                        this.nextSlide();\r\n                    }\r\n                });\r\n                \r\n                this.dots.forEach((dot, index) => {\r\n                    dot.addEventListener('keydown', (e) => {\r\n                        if (e.key === 'Enter' || e.key === ' ') {\r\n                            e.preventDefault();\r\n                            this.goToSlide(index);\r\n                        }\r\n                    });\r\n                });\r\n            }\r\n            \r\n            updateCarousel() {\r\n                let translateX;\r\n                \r\n                if (this.slidesPerView === 1) {\r\n                    \/\/ Mobile: each slide takes 100% width\r\n                    translateX = -this.currentSlideIndex * 100;\r\n                } else {\r\n                    \/\/ Desktop: precise calculation for movement distance\r\n                    \/\/ Each slide width is 50%, plus 20px margin\r\n                    \/\/ For precise positioning, we use fixed 50% movement distance\r\n                    translateX = -this.currentSlideIndex * 50;\r\n                }\r\n                \r\n                this.track.style.transform = `translateX(${translateX}%)`;\r\n                \r\n                \/\/ Update dots - show current viewing first slide\r\n                this.dots.forEach((dot, index) => {\r\n                    const isActive = index === this.currentSlideIndex;\r\n                    dot.classList.toggle('active', isActive);\r\n                    dot.setAttribute('aria-selected', isActive.toString());\r\n                });\r\n                \r\n                \/\/ Update ARIA live region\r\n                this.track.setAttribute('aria-label', `Slide ${this.currentSlideIndex + 1} of ${this.totalSlides}`);\r\n            }\r\n            \r\n            nextSlide() {\r\n                if (this.isTransitioning) return;\r\n                \r\n                const maxIndex = this.getMaxSlideIndex();\r\n                \r\n                if (this.currentSlideIndex >= maxIndex) {\r\n                    \/\/ Loop to beginning\r\n                    this.currentSlideIndex = 0;\r\n                } else {\r\n                    this.currentSlideIndex++;\r\n                }\r\n                \r\n                this.isTransitioning = true;\r\n                this.updateCarousel();\r\n                \r\n                setTimeout(() => {\r\n                    this.isTransitioning = false;\r\n                }, 500);\r\n            }\r\n            \r\n            previousSlide() {\r\n                if (this.isTransitioning) return;\r\n                \r\n                if (this.currentSlideIndex <= 0) {\r\n                    \/\/ Loop to end\r\n                    this.currentSlideIndex = this.getMaxSlideIndex();\r\n                } else {\r\n                    this.currentSlideIndex--;\r\n                }\r\n                \r\n                this.isTransitioning = true;\r\n                this.updateCarousel();\r\n                \r\n                setTimeout(() => {\r\n                    this.isTransitioning = false;\r\n                }, 500);\r\n            }\r\n            \r\n            goToSlide(index) {\r\n                if (this.isTransitioning) return;\r\n                \r\n                const maxIndex = this.getMaxSlideIndex();\r\n                this.currentSlideIndex = Math.min(Math.max(0, index), maxIndex);\r\n                this.updateCarousel();\r\n            }\r\n            \r\n            startAutoPlay() {\r\n                this.autoPlayInterval = setInterval(() => {\r\n                    this.nextSlide();\r\n                }, 5000);\r\n            }\r\n            \r\n            stopAutoPlay() {\r\n                if (this.autoPlayInterval) {\r\n                    clearInterval(this.autoPlayInterval);\r\n                    this.autoPlayInterval = null;\r\n                }\r\n            }\r\n            \r\n            addTouchSupport() {\r\n                let startX = 0;\r\n                let endX = 0;\r\n                \r\n                this.track.addEventListener('touchstart', (e) => {\r\n                    startX = e.touches[0].clientX;\r\n                    this.stopAutoPlay();\r\n                }, { passive: true });\r\n                \r\n                this.track.addEventListener('touchend', (e) => {\r\n                    endX = e.changedTouches[0].clientX;\r\n                    const diffX = startX - endX;\r\n                    \r\n                    if (Math.abs(diffX) > 50) {\r\n                        if (diffX > 0) {\r\n                            this.nextSlide();\r\n                        } else {\r\n                            this.previousSlide();\r\n                        }\r\n                    }\r\n                    \r\n                    this.startAutoPlay();\r\n                }, { passive: true });\r\n            }\r\n        }\r\n        \r\n        \/\/ Initialize carousel when DOM is loaded\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            const carousel = new Carousel();\r\n        });\r\n        \r\n        \/\/ Add scroll animations with Intersection Observer\r\n        const observerOptions = {\r\n            threshold: 0.1,\r\n            rootMargin: '0px 0px -50px 0px'\r\n        };\r\n        \r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('wow');\r\n                }\r\n            });\r\n        }, observerOptions);\r\n        \r\n        \/\/ Observe elements for animation\r\n        document.addEventListener('DOMContentLoaded', () => {\r\n            document.querySelectorAll('.wow').forEach(el => {\r\n                observer.observe(el);\r\n            });\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Manufacturing Excellence &#8211; Premium Wooden Educational Toys Factory Premium Wooden Educational Toys Manufacturing Excellence Behind the Scenes: Our Manufacturing Excellence Take a journey through our state-of-the-art manufacturing facilities where innovation meets precision. Our modern production environments showcase the advanced technology and meticulous processes that bring premium wooden educational toys to life. From our expansive factory [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":166,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-5877","page","type-page","status-publish","hentry"],"blocksy_meta":[],"acf":[],"_links":{"self":[{"href":"https:\/\/sing2sky.com\/es\/wp-json\/wp\/v2\/pages\/5877","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sing2sky.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sing2sky.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sing2sky.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sing2sky.com\/es\/wp-json\/wp\/v2\/comments?post=5877"}],"version-history":[{"count":0,"href":"https:\/\/sing2sky.com\/es\/wp-json\/wp\/v2\/pages\/5877\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sing2sky.com\/es\/wp-json\/wp\/v2\/pages\/166"}],"wp:attachment":[{"href":"https:\/\/sing2sky.com\/es\/wp-json\/wp\/v2\/media?parent=5877"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}