{"id":54,"date":"2025-05-05T13:05:17","date_gmt":"2025-05-05T13:05:17","guid":{"rendered":"http:\/\/localhost\/media-carousel-for-guten-blocks\/?page_id=54"},"modified":"2026-06-19T13:24:42","modified_gmt":"2026-06-19T13:24:42","slug":"media-carousel-for-guten-blocks","status":"publish","type":"page","link":"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/","title":{"rendered":"Media Carousel for Guten Blocks"},"content":{"rendered":"\n<div class=\"wp-block-group is-vertical is-content-justification-left is-nowrap is-layout-flex wp-container-core-group-is-layout-217b7ed3 wp-block-group-is-layout-flex\">\n<div class=\"side simpleType  undefined \"><div id=\"mcfgb-slider-simpleType-605\"><div><div class=\"mcfgb-gallery-single\"><div class=\"ratio-part\" style=\"aspect-ratio:16 \/ 9\"><img decoding=\"async\" src=\"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/wp-content\/uploads\/2025\/05\/NATURE.jpg\" alt=\"Gallery Image\"\/><\/div><\/div><\/div><div><div class=\"mcfgb-gallery-single\"><div class=\"ratio-part\" style=\"aspect-ratio:16 \/ 9\"><img decoding=\"async\" src=\"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/wp-content\/uploads\/2025\/05\/img.jpg\" alt=\"Gallery Image\"\/><\/div><\/div><\/div><div><div class=\"mcfgb-gallery-single\"><div class=\"ratio-part\" style=\"aspect-ratio:16 \/ 9\"><img decoding=\"async\" src=\"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/wp-content\/uploads\/2025\/05\/nature1.jpg\" alt=\"Gallery Image\"\/><\/div><\/div><\/div><div><div class=\"mcfgb-gallery-single\"><div class=\"ratio-part\" style=\"aspect-ratio:16 \/ 9\"><img decoding=\"async\" src=\"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/wp-content\/uploads\/2025\/05\/nature2.jpg\" alt=\"Gallery Image\"\/><\/div><\/div><\/div><div><div class=\"mcfgb-gallery-single\"><div class=\"ratio-part\" style=\"aspect-ratio:16 \/ 9\"><img decoding=\"async\" src=\"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/wp-content\/uploads\/2025\/05\/img2.jpg\" alt=\"Gallery Image\"\/><\/div><\/div><\/div><div><div class=\"mcfgb-gallery-single\"><div class=\"ratio-part\" style=\"aspect-ratio:16 \/ 9\"><img decoding=\"async\" src=\"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/wp-content\/uploads\/2025\/05\/flowers-276014_640.jpg\" alt=\"Gallery Image\"\/><\/div><\/div><\/div><\/div><div id=\"btn-wrap-mcfgb-slider-simpleType-605\" class=\"custom1 \"><div class=\"svg-arrow\"><div class=\"prev-btn\"><svg viewBox=\"0 0 30.725 30.725\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"><\/g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/g><g id=\"SVGRepo_iconCarrier\"> <g> <path d=\"M24.078,26.457c0.977,0.978,0.977,2.559,0,3.536c-0.488,0.488-1.128,0.731-1.77,0.731c-0.639,0-1.278-0.243-1.768-0.731 L5.914,15.362l14.629-14.63c0.977-0.977,2.559-0.976,3.535,0c0.977,0.977,0.977,2.56,0,3.536L12.984,15.362L24.078,26.457z\"><\/path> <\/g> <\/g><\/svg><\/div><div class=\"next-btn\"><svg viewBox=\"0 0 30.725 30.725\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"><\/g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/g><g id=\"SVGRepo_iconCarrier\"> <g> <path d=\"M24.078,26.457c0.977,0.978,0.977,2.559,0,3.536c-0.488,0.488-1.128,0.731-1.77,0.731c-0.639,0-1.278-0.243-1.768-0.731 L5.914,15.362l14.629-14.63c0.977-0.977,2.559-0.976,3.535,0c0.977,0.977,0.977,2.56,0,3.536L12.984,15.362L24.078,26.457z\"><\/path> <\/g> <\/g><\/svg><\/div><\/div><\/div><\/div><style>\n                    \/* CSS for arrows *\/\n                    #btn-wrap-mcfgb-slider-simpleType-605 .prev-btn svg,\n                    #btn-wrap-mcfgb-slider-simpleType-605 .next-btn svg {\n                        fill: #D8613C !important;\n                    }\n                    \n                    \/* CSS for caption colors *\/\n                    #mcfgb-slider-simpleType-605 .img-caption {\n                        color: inherit !important;\n                    }\n                    #mcfgb-slider-simpleType-605 .img-description {\n                        color: inherit !important;\n                    }\n                    \n                    \/* CSS for dots *\/\n                    #mcfgb-slider-simpleType-605 .slick-dots li {\n                        background: #000000 !important;\n                    }\n                    #mcfgb-slider-simpleType-605 .mcfgb-gallery-single iframe , #mcfgb-slider-simpleType-605 .mcfgb-gallery-single img ,#mcfgb-slider-simpleType-605 .mcfgb-gallery-single video {\n                        border-radius: 0px 0px 0px 0px;\n                        width:100% !important;\n                        height: 100% !important;\n                    }\n                    \n                    \/* Video thumbnail styling *\/\n                    #mcfgb-slider-simpleType-605 .video-thumbnail-wrapper {\n                        border-radius: 0px 0px 0px 0px;\n                        overflow: hidden;\n                    }\n                    \n                    #mcfgb-slider-simpleType-605 .video-thumbnail-wrapper img {\n                        transition: transform 0.3s ease;\n                    }\n                    \n                    #mcfgb-slider-simpleType-605 .video-thumbnail-wrapper .play-button-overlay {\n                        transition: all 0.3s ease;\n                    }\n                    \n                    #mcfgb-slider-simpleType-605 .video-thumbnail-wrapper:hover .play-button-overlay {\n                        background-color: rgba(0,0,0,0.8) !important;\n                        transform: translate(-50%, -50%) scale(1.1);\n                    }\n                    #btn-wrap-mcfgb-slider-simpleType-605 .custom-arrow-img{\n                        width: 30px !important;\n                        height: 30px !important;\n                        object-fit: contain !important;\n                        filter: brightness(0) saturate(100%) !important;\n                    }\n                    #mcfgb-slider-simpleType-605 .slick-dots li.number{\n                        background: #000000 !important;\n                        color: #fff !important;\n                    }\n\n                    #mcfgb-slider-simpleType-605 .slick-dots li.dot {\n                        background: #000000;\n                        border-radius: 50%;\n                        font-size: 0;\n                        border: 1px solid #000;\n                    }\n                     .mcfgb-slider-simpleType-605-fancy-custom .fancybox__backdrop {\n                        background: #000000 !important;\n                        opacity: 70% !important;\n                    }\n                                         .mcfgb-slider-simpleType-605-fancy-custom .fancybox__content {\n                        width: 800px !important;\n                        max-height:700px !important;\n                    }\n                     \n                     \/* Hide Fancybox caption completely *\/\n                     .mcfgb-slider-simpleType-605-fancy-custom .fancybox__caption,\n                     .fancybox__caption {\n                        display: none !important;\n                        visibility: hidden !important;\n                        opacity: 0 !important;\n                        height: 0 !important;\n                        overflow: hidden !important;\n                    }\n                \n                <\/style><script>              \n                        jQuery(document).ready(function($) {\n                            \n\n\n                            function removeGalleryHash() {\n                                if (window.location.hash.startsWith('#gallery-mcfgb-slider-simpleType-605-')) {\n                                    history.replaceState(\"\", document.title, window.location.pathname + window.location.search);\n                                    window.location.reload();\n                                }\n                            }\n                            function removeGalleryHash2() {\n                                if (window.location.hash) {\n                                    history.replaceState(\"\", document.title, window.location.pathname + window.location.search);\n                                    window.location.reload();\n                                }\n                            }\n                            removeGalleryHash();\n                            removeGalleryHash2();\n\n                            var sliderId = \"#mcfgb-slider-simpleType-605\";\n\n                                $('[data-fancybox=\"gallery-mcfgb-slider-simpleType-605\"]').each(function () {\n                                    var $this = $(this);\n                                    var $datafancyclass = $this.attr('data-fancy-class');\n                                    const isAutoplay = false;\n                                    const isInfinite = false;\n                                    var $slider = $(sliderId);\n                                    \n                                    Fancybox.bind('[data-fancybox=\"gallery-' + $datafancyclass + '\"]', {\n                                        mainClass: 'media-carousel-fancy-custom ' + $datafancyclass + '-fancy-custom',\n                                        on: {\n                                            reveal: (fancybox, slide) => {\n                                                if (isAutoplay) {\n                                                    $(sliderId).slick('slickPause');\n                                                } \n                                            },\n                                            close: (fancybox, slide) => {\n                                                var currentSlide = fancybox.getSlide().index;\n\n                                                if (\"simpleType\" === \"carouselType\") {\n                                                    let slickIndex = currentSlide ;\n                                                    if (isInfinite) {\n                                                        const slickSlidesCount = $(sliderId).slick('getSlick').slideCount;\n                                                        slickIndex = (currentSlide % slickSlidesCount) - 2;\n                                                    }\n                                                    $slider.slick('slickGoTo', slickIndex);\n                                                } else {\n                                                let slickIndex = currentSlide ;\n                                                    if (isInfinite) {\n                                                        const slickSlidesCount = $(sliderId).slick('getSlick').slideCount;\n                                                        slickIndex = (currentSlide % slickSlidesCount) - 1;\n                                                    }\n                                                    $slider.slick('slickGoTo', slickIndex);\n                                                }\n\n                                                if (isAutoplay) {\n                                                    setTimeout(() => {      \n                                                        $(sliderId).slick('slickPlay');\n                                                    }, 100);\n                                                }\n                                            },\n                                        },\n                                        Image: { \n                                            zoom: false,\n                                        },\n                                        Html: {\n                                            video: {\n                                                autoplay: false,\n                                                ratio: 16\/9\n                                            }\n                                        },\n                                        Carousel: {\n                                            infinite: false,\n                                            Navigation: false\n                                        },\n                                        Toolbar: {\n                                            display: false\n                                        },\n                                        Thumbs: {\n                                            autoStart: false\n                                        },\n                                        \/\/ Additional options to ensure footer and caption are hidden\n                                        hideScrollbar: true,\n                                        backdropClick: \"close\",\n                                        dragToClose: false,\n                                        \/\/ Explicitly hide footer and caption elements\n                                        on: {\n                                            initLayout: (fancybox) => {\n                                                \/\/ Hide footer after layout is initialized\n                                                const footer = fancybox.container.querySelector('.fancybox__footer');\n                                                if (footer) {\n                                                    footer.style.display = 'none';\n                                                }\n                                                \n                                                \/\/ Hide caption after layout is initialized\n                                                const caption = fancybox.container.querySelector('.fancybox__caption');\n                                                if (caption) {\n                                                    caption.style.display = 'none';\n                                                }\n                                            },\n                                            done: (fancybox, slide) => {\n                                                \/\/ Additional attempt to hide caption after slide is loaded\n                                                setTimeout(() => {\n                                                    const captions = document.querySelectorAll('.fancybox__caption');\n                                                    captions.forEach(caption => {\n                                                        caption.style.display = 'none';\n                                                        caption.style.visibility = 'hidden';\n                                                        caption.style.opacity = '0';\n                                                    });\n                                                }, 100);\n                                            },\n                                            reveal: (fancybox, slide) => {\n                                                \/\/ Hide caption when modal is revealed\n                                                setTimeout(() => {\n                                                    const captions = document.querySelectorAll('.fancybox__caption');\n                                                    captions.forEach(caption => {\n                                                        caption.style.display = 'none';\n                                                        caption.style.visibility = 'hidden';\n                                                        caption.style.opacity = '0';\n                                                    });\n                                                }, 50);\n                                            }\n                                        }\n                                    });\n                                });\n                            \n                            switch (\"simpleType\") {\n                                    case 'simpleType':\n                                        switch(\"simple\") {\n                                            case 'simple':\n                                            $(sliderId).slick({\n                                            slidesToShow: 2,\n                                            slidesToScroll: 1,\n                                            arrows: false,\n                                            speed: 1000,\n                                            autoplaySpeed: 1000,\n                                            autoplay: false,   \n                                            infinite: false,       \n                                            dots: false,\n                                            pauseOnHover: true,\n                                            customPaging: function(sliderId, i) {\n                                                if (\"ndots\" === \"number\") {\n                                                    return i + 1;\n                                                } else {\n                                                    return '.';\n                                                }\n                                            },\n                                            responsive: [\n                                                {\n                                                    breakpoint: 1024,\n                                                    settings: {\n                                                        slidesToShow: 2,\n                                                        slidesToScroll: 1,\n                                                        arrows: false\n                                                    }\n                                                },\n                                                {\n                                                    breakpoint: 768,\n                                                    settings: {\n                                                        slidesToShow: 1,\n                                                        slidesToScroll: 1,\n                                                        arrows: false\n                                                    }\n                                                }\n                                            ],\n                                            prevArrow: '#btn-wrap-mcfgb-slider-simpleType-605 .prev-btn',\n                                            nextArrow: '#btn-wrap-mcfgb-slider-simpleType-605 .next-btn',\n                                        });\n                                        $(sliderId + ' .slick-dots li').each(function(index) {\n                                            if (\"ndots\" === \"number\") {\n                                                $(this).addClass('number');\n                                            } else {\n                                                $(this).addClass('dot');\n                                            }\n                                        });\n                                            break;\n                                        case 'fade':\n                                            $(sliderId).slick({\n                                                slidesToShow: 2,\n                                                slidesToScroll: 1,\n                                                dots: false,\n                                                customPaging: function(sliderId, i) {\n                                                    if (\"ndots\" === \"number\") {\n                                                        return i + 1;\n                                                    } else {\n                                                        return '.';\n                                                    }\n                                                },\n                                                speed: 1000,\n                                                autoplay: false,\n                                                fade: true,\n                                                cssEase: 'linear',\n                                                arrows: false,\n                                                autoplaySpeed: 1000,\n                                                infinite: false,\n                                                pauseOnHover: true,\n                                                responsive: [\n                                                    {\n                                                        breakpoint: 1024,\n                                                        settings: {\n                                                            slidesToShow: 2,\n                                                            slidesToScroll: 1,\n                                                            arrows: false\n                                                        }\n                                                    },\n                                                    {\n                                                        breakpoint: 768,\n                                                        settings: {\n                                                            slidesToShow: 1,\n                                                            slidesToScroll: 1,\n                                                            arrows: false\n                                                        }\n                                                    }\n                                                ],\n                                                prevArrow: '#btn-wrap-mcfgb-slider-simpleType-605 .prev-btn',\n                                                nextArrow: '#btn-wrap-mcfgb-slider-simpleType-605 .next-btn',\n                                            });\n                                            $(sliderId + ' .slick-dots li').each(function(index) {\n                                                if (\"ndots\" === \"number\") {\n                                                    $(this).addClass('number');\n                                                } else {\n                                                    $(this).addClass('dot');\n                                                }\n                                            });\n                                            break;\n                                        case 'adaptiveheight':\n                                            $(sliderId).slick({\n                                                slidesToShow: 2,\n                                                slidesToScroll: 1,\n                                                dots: false,\n                                                customPaging: function(sliderId, i) {\n                                                    if (\"ndots\" === \"number\") {\n                                                        return i + 1;\n                                                    } else {\n                                                        return '.';\n                                                    }\n                                                },\n                                                speed: 1000,\n                                                autoplay: false,\n                                                adaptiveHeight: true,\n                                                arrows: false,\n                                                autoplaySpeed: 1000,\n                                                infinite: false,\n                                                pauseOnHover: true,\n                                                responsive: [\n                                                    {\n                                                        breakpoint: 1024,\n                                                        settings: {\n                                                            slidesToShow: 2,\n                                                            slidesToScroll: 1,\n                                                            arrows: false\n                                                        }\n                                                    },\n                                                    {\n                                                        breakpoint: 768,\n                                                        settings: {\n                                                            slidesToShow: 1,\n                                                            slidesToScroll: 1,\n                                                            arrows: false\n                                                        }\n                                                    }\n                                                ],\n                                                prevArrow: '#btn-wrap-mcfgb-slider-simpleType-605 .prev-btn',\n                                                nextArrow: '#btn-wrap-mcfgb-slider-simpleType-605 .next-btn',\n                                            });\n                                            $(sliderId + ' .slick-dots li').each(function(index) {\n                                                if (\"ndots\" === \"number\") {\n                                                    $(this).addClass('number');\n                                                } else {\n                                                    $(this).addClass('dot');\n                                                }\n                                            });\n                                            break;\n                                    }\n                                    break;\n                                case 'carouselType':\n                                    switch(\"carousel\") {\n                                        case 'carousel':\n                                            $(sliderId).slick({\n                                                slidesToShow: 2,\n                                                slidesToScroll: 1,\n                                                dots: false,\n                                                customPaging: function(sliderId, i) {\n                                                    if (\"ndots\" === \"number\") {\n                                                        return i + 1;\n                                                    } else {\n                                                        return '.';\n                                                    }\n                                                },\n                                                speed: 1000,\n                                                autoplay: false,\n                                                arrows: false,\n                                                autoplaySpeed: 1000,\n                                                infinite: false,\n                                                pauseOnHover: true,\n                                                responsive: [\n                                                    {\n                                                        breakpoint: 1024,\n                                                        settings: {\n                                                            slidesToShow: 2,\n                                                            slidesToScroll: 1,\n                                                            arrows: false\n                                                        }\n                                                    },\n                                                    {\n                                                        breakpoint: 768,\n                                                        settings: {\n                                                            slidesToShow: 1,\n                                                            slidesToScroll: 1,\n                                                            arrows: false\n                                                        }\n                                                    }\n                                                ],\n                                                prevArrow: '#btn-wrap-mcfgb-slider-simpleType-605 .prev-btn',\n                                                nextArrow: '#btn-wrap-mcfgb-slider-simpleType-605 .next-btn',\n                                            });\n                                            $(sliderId + ' .slick-dots li').each(function(index) {\n                                                if (\"ndots\" === \"number\") {\n                                                    $(this).addClass('number');\n                                                } else {\n                                                    $(this).addClass('dot');\n                                                }\n                                            });\n                                            break;\n                                        case 'centermode':\n                                            $(sliderId).slick({\n                                                centerMode: true,\n                                                centerPadding: '60px',\n                                                slidesToShow: 2,\n                                                speed: 1000,\n                                                autoplay: false,\n                                                infinite: false,\n                                                pauseOnHover: true,\n                                                responsive: [\n                                                    {\n                                                        breakpoint: 1024,\n                                                        settings: {\n                                                            arrows: false,\n                                                            centerMode: true,\n                                                            centerPadding: '40px',\n                                                            slidesToShow: 2\n                                                        }\n                                                    },\n                                                    {\n                                                        breakpoint: 768,\n                                                        settings: {\n                                                            arrows: false,\n                                                            centerMode: true,\n                                                            centerPadding: '40px',\n                                                            slidesToShow: 1\n                                                        }\n                                                    }\n                                                ],\n                                                arrows: false,\n                                                autoplaySpeed: 1000,\n                                                dots: false,\n                                                customPaging: function(sliderId, i) {\n                                                    if (\"ndots\" === \"number\") { \n                                                        return i + 1;\n                                                    } else {\n                                                        return '.';\n                                                    }\n                                                },\n                                                prevArrow: '#btn-wrap-mcfgb-slider-simpleType-605 .prev-btn',\n                                                nextArrow: '#btn-wrap-mcfgb-slider-simpleType-605 .next-btn',\n                                            });\n                                            $(sliderId + ' .slick-dots li').each(function(index) {\n                                                if (\"ndots\" === \"number\") {\n                                                    $(this).addClass('number');\n                                                } else {\n                                                    $(this).addClass('dot');\n                                                }\n                                            });\n                                            break;\n                                        }\n                                    break;\n                                default:\n                                    $(sliderId).slick({\n                                        slidesToShow: 2,\n                                        slidesToScroll: 1,\n                                        speed: 1000, \n                                        autoplay: false,\n                                        autoplaySpeed: 1000,\n                                        arrows: false,\n                                        infinite: false,\n                                        pauseOnHover: true,\n                                        responsive: [\n                                            {\n                                                breakpoint: 1024,\n                                                settings: {\n                                                    slidesToShow: 2,\n                                                    slidesToScroll: 1,\n                                                    arrows: false\n                                                }\n                                            },\n                                            {\n                                                breakpoint: 768,\n                                                settings: {\n                                                    slidesToShow: 1,\n                                                    slidesToScroll: 1,\n                                                    arrows: false\n                                                }\n                                            }\n                                        ],\n                                        prevArrow: '#btn-wrap-mcfgb-slider-simpleType-605 .prev-btn',\n                                        nextArrow: '#btn-wrap-mcfgb-slider-simpleType-605 .next-btn',\n                                    });\n                                    $(sliderId + ' .slick-dots li').each(function(index) {\n                                                if (\"ndots\" === \"number\") {\n                                                    $(this).addClass('number');\n                                                } else {\n                                                    $(this).addClass('dot');\n                                                }\n                                            });\n                                    break;\n                            }\n                        });\n                <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-plugin.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-54","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/index.php?rest_route=\/wp\/v2\/pages\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=54"}],"version-history":[{"count":14,"href":"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/index.php?rest_route=\/wp\/v2\/pages\/54\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/index.php?rest_route=\/wp\/v2\/pages\/54\/revisions\/117"}],"wp:attachment":[{"href":"https:\/\/demo.zealousweb.com\/wordpress-plugins\/media-carousel-for-guten-blocks\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}