{"id":5205,"date":"2025-05-08T10:40:47","date_gmt":"2025-05-08T10:40:47","guid":{"rendered":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/?page_id=5205"},"modified":"2025-05-12T09:01:50","modified_gmt":"2025-05-12T09:01:50","slug":"layout-22","status":"publish","type":"page","link":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/layout-22\/","title":{"rendered":"Layout 22"},"content":{"rendered":"<p>[vc_row][vc_column][vc_column_text]<\/p>\n<h2 style=\"text-align: center;\">Images Slider &#8211; Example 1<\/h2>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><script>\r\njQuery(document).ready(function() {\r\n    var sliderSelector = \".sf-22-slider-container-188\";\r\n    var youtubePlayers = [];\r\n    var vimeoPlayers = [];\r\n\r\n    \/\/ Initialize YouTube players\r\n    function onYouTubeIframeAPIReady() {\r\n        jQuery(sliderSelector).find('.sf-22-slide-yt iframe').each(function(index) {\r\n            var player = new YT.Player(jQuery(this)[0], {\r\n                events: {\r\n                    'onStateChange': function(event) {\r\n                        if (event.data === YT.PlayerState.PLAYING) {\r\n                            jQuery(sliderSelector).slick('slickPause');\r\n                        } else if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {\r\n                            jQuery(sliderSelector).slick('slickPlay');\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n            youtubePlayers.push(player);\r\n        });\r\n    }\r\n    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;\r\n\r\n    \/\/ Initialize Vimeo players with retry mechanism\r\n    function initializeVimeoPlayers(attempts = 5, delay = 500) {\r\n        if (typeof Vimeo !== 'undefined') {\r\n            jQuery(sliderSelector).find('.sf-22-slide-vimeo iframe').each(function(index) {\r\n                var player = new Vimeo.Player(jQuery(this)[0]);\r\n                vimeoPlayers.push(player);\r\n                player.on('play', function() {\r\n                    jQuery(sliderSelector).slick('slickPause');\r\n                });\r\n                player.on('pause', function() {\r\n                    jQuery(sliderSelector).slick('slickPlay');\r\n                });\r\n                player.on('ended', function() {\r\n                    jQuery(sliderSelector).slick('slickPlay');\r\n                });\r\n            });\r\n        } else if (attempts > 0) {\r\n            setTimeout(function() {\r\n                initializeVimeoPlayers(attempts - 1, delay);\r\n            }, delay);\r\n        } else {\r\n            console.warn('Vimeo Player API failed to load after multiple attempts.');\r\n        }\r\n    }\r\n    initializeVimeoPlayers();\r\n\r\n    \/\/ Initialize MP4 video event listeners\r\n    jQuery(sliderSelector).find('.sf-22-slide-internal video').each(function() {\r\n        jQuery(this).on('play', function() {\r\n            jQuery(sliderSelector).slick('slickPause');\r\n        });\r\n        jQuery(this).on('pause ended', function() {\r\n            jQuery(sliderSelector).slick('slickPlay');\r\n        });\r\n    });\r\n\r\n    \/\/ Initialize Slick Slider\r\n    jQuery(sliderSelector).slick({\r\n        autoplay: true,\r\n        autoplaySpeed: 3000,\r\n        pauseOnHover: true,\r\n        pauseOnDotsHover: true,\r\n        infinite: true,\r\n        speed: 2000,\r\n        fade: false,\r\n        slidesToShow: 2,\r\n        slidesToScroll: 2,\r\n        centerMode: false,\r\n        centerPadding: '100px',\r\n        adaptiveHeight: false,\r\n        variableWidth: false,\r\n        arrows: true,\r\n        dots: true,\r\n        swipe: true,\r\n        rtl: false,\r\n    });\r\n\r\n    \/\/ Pause videos on slide change\r\n    jQuery(sliderSelector).on('beforeChange', function(event, slick, currentSlide, nextSlide) {\r\n        \/\/ Pause YouTube video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-yt iframe').length) {\r\n            var ytIndex = jQuery(sliderSelector).find('.sf-22-slide-yt iframe').index(jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-yt iframe'));\r\n            if (youtubePlayers[ytIndex]) {\r\n                youtubePlayers[ytIndex].pauseVideo();\r\n            }\r\n        }\r\n\r\n        \/\/ Pause Vimeo video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-vimeo iframe').length) {\r\n            var vimeoIndex = jQuery(sliderSelector).find('.sf-22-slide-vimeo iframe').index(jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-vimeo iframe'));\r\n            if (vimeoPlayers[vimeoIndex]) {\r\n                vimeoPlayers[vimeoIndex].pause();\r\n            }\r\n        }\r\n\r\n        \/\/ Pause MP4 video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-internal video').length) {\r\n            var mp4Video = jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-internal video')[0];\r\n            if (mp4Video) {\r\n                mp4Video.pause();\r\n            }\r\n        }\r\n    });\r\n});\r\n<\/script>\r\n<!-- slider start-->\r\n<div class=\"sf-22-slider-container-188\">\r\n                \r\n            <div class=\"mixed-slider-188\">\r\n                            <!-- Image Slides -->\r\n                <div class=\"sf-22-slide-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2025\/05\/nj3nhryozzurcs0dhegh.webp\" alt=\"\">\r\n                                                            \r\n                    <div class=\"sf-22-slide-buttons\">\r\n                                        \r\n                                        <\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n                        \r\n            <div class=\"mixed-slider-188\">\r\n                            <!-- Image Slides -->\r\n                <div class=\"sf-22-slide-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2025\/05\/ncpvujkflx9wwl7ukvss.webp\" alt=\"\">\r\n                                                            \r\n                    <div class=\"sf-22-slide-buttons\">\r\n                                        \r\n                                        <\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n                        \r\n            <div class=\"mixed-slider-188\">\r\n                            <!-- Image Slides -->\r\n                <div class=\"sf-22-slide-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2025\/05\/jbljhzqrdscoja32dtxz.webp\" alt=\"\">\r\n                                                            \r\n                    <div class=\"sf-22-slide-buttons\">\r\n                                        \r\n                                        <\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n                        \r\n            <div class=\"mixed-slider-188\">\r\n                            <!-- Image Slides -->\r\n                <div class=\"sf-22-slide-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2025\/05\/vmm9ywewfxam6lybjjhh.webp\" alt=\"\">\r\n                                                            \r\n                    <div class=\"sf-22-slide-buttons\">\r\n                                        \r\n                                        <\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n                        \r\n            <div class=\"mixed-slider-188\">\r\n                            <!-- Image Slides -->\r\n                <div class=\"sf-22-slide-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2025\/05\/jfm5qwk3hmmwozeiim1p.webp\" alt=\"\">\r\n                                                            \r\n                    <div class=\"sf-22-slide-buttons\">\r\n                                        \r\n                                        <\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n                        \r\n            <div class=\"mixed-slider-188\">\r\n                            <!-- Image Slides -->\r\n                <div class=\"sf-22-slide-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2025\/05\/jh8lbg7hsrbfv5q0e8st.webp\" alt=\"\">\r\n                                                            \r\n                    <div class=\"sf-22-slide-buttons\">\r\n                                        \r\n                                        <\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n                        \r\n            <div class=\"mixed-slider-188\">\r\n                            <!-- Image Slides -->\r\n                <div class=\"sf-22-slide-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2025\/05\/su0sgof5zcnaq6yqk3bh.webp\" alt=\"\">\r\n                                                            \r\n                    <div class=\"sf-22-slide-buttons\">\r\n                                        \r\n                                        <\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n            <\/div>\r\n<!-- slider end-->\r\n<style>\r\n.sf-22-slide-title {\r\n    text-align: center;\r\n    padding-top: 15px !important;\r\n}\r\n.sf-22-slide-desc {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n}\r\n.sf-22-slider-container-188 {\r\n    max-width: 100%;\r\n    max-height: 370px;\r\n}\r\n.mixed-slider-188 img,\r\n.mixed-slider-188 iframe,\r\n.mixed-slider-188 video {\r\n    width: 100%;\r\n    height: 370px;\r\n    object-fit: contain;\r\n    border: none;\r\n}\r\n.sf-22-slide-buttons {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n    padding-bottom: 5px !important;\r\n}\r\n.slick-prev, .slick-next {\r\n    z-index: 1;\r\n}\r\n.slick-dots {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n}\r\n.slick-arrow {\r\n    color: #ffffff !important;\r\n    background-color: #000000 !important;\r\n    border-radius: 50%;\r\n}\r\n<\/style><\/p>\n<p>[\/vc_column_text][vc_column_text]<strong data-start=\"138\" data-end=\"162\">\ud83c\udfaf Used Slider Settings \u2192<\/strong> <code data-start=\"163\" data-end=\"176\">Width: 100%<\/code> | <code data-start=\"179\" data-end=\"194\">Height: 370px<\/code> | <code data-start=\"197\" data-end=\"220\">Autoplay: ON (3000ms)<\/code> | <code data-start=\"223\" data-end=\"243\" data-is-only-node=\"\">Pause on Hover: ON<\/code> | <code data-start=\"246\" data-end=\"270\">Pause on Dot Hover: ON<\/code> | <code data-start=\"273\" data-end=\"294\">Infinite Scroll: ON<\/code> | <code data-start=\"297\" data-end=\"323\">Transition Speed: 2000ms<\/code> | <code data-start=\"326\" data-end=\"344\">Fade Effect: OFF<\/code> | <code data-start=\"347\" data-end=\"366\">Slides To Show: 2<\/code> | <code data-start=\"369\" data-end=\"390\">Slides To Scroll: 2<\/code> | <code data-start=\"393\" data-end=\"411\">Center Mode: OFF<\/code> | <code data-start=\"414\" data-end=\"436\">Adaptive Height: OFF<\/code> | <code data-start=\"439\" data-end=\"460\">Variable Width: OFF<\/code> | <code data-start=\"463\" data-end=\"475\">Arrows: ON<\/code> | <code data-start=\"478\" data-end=\"488\">Dots: ON<\/code> | <code data-start=\"491\" data-end=\"510\">Swipe Support: ON<\/code> | <code data-start=\"513\" data-end=\"523\">RTL: OFF<\/code> | <code data-start=\"526\" data-end=\"545\">Slide Order: NONE<\/code> | <code data-start=\"548\" data-end=\"573\">Custom CSS: Not Applied<\/code>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;100px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 style=\"text-align: center;\">Youtube Video Slider &#8211; Example 2<\/h2>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><script>\r\njQuery(document).ready(function() {\r\n    var sliderSelector = \".sf-22-slider-container-189\";\r\n    var youtubePlayers = [];\r\n    var vimeoPlayers = [];\r\n\r\n    \/\/ Initialize YouTube players\r\n    function onYouTubeIframeAPIReady() {\r\n        jQuery(sliderSelector).find('.sf-22-slide-yt iframe').each(function(index) {\r\n            var player = new YT.Player(jQuery(this)[0], {\r\n                events: {\r\n                    'onStateChange': function(event) {\r\n                        if (event.data === YT.PlayerState.PLAYING) {\r\n                            jQuery(sliderSelector).slick('slickPause');\r\n                        } else if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {\r\n                            jQuery(sliderSelector).slick('slickPlay');\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n            youtubePlayers.push(player);\r\n        });\r\n    }\r\n    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;\r\n\r\n    \/\/ Initialize Vimeo players with retry mechanism\r\n    function initializeVimeoPlayers(attempts = 5, delay = 500) {\r\n        if (typeof Vimeo !== 'undefined') {\r\n            jQuery(sliderSelector).find('.sf-22-slide-vimeo iframe').each(function(index) {\r\n                var player = new Vimeo.Player(jQuery(this)[0]);\r\n                vimeoPlayers.push(player);\r\n                player.on('play', function() {\r\n                    jQuery(sliderSelector).slick('slickPause');\r\n                });\r\n                player.on('pause', function() {\r\n                    jQuery(sliderSelector).slick('slickPlay');\r\n                });\r\n                player.on('ended', function() {\r\n                    jQuery(sliderSelector).slick('slickPlay');\r\n                });\r\n            });\r\n        } else if (attempts > 0) {\r\n            setTimeout(function() {\r\n                initializeVimeoPlayers(attempts - 1, delay);\r\n            }, delay);\r\n        } else {\r\n            console.warn('Vimeo Player API failed to load after multiple attempts.');\r\n        }\r\n    }\r\n    initializeVimeoPlayers();\r\n\r\n    \/\/ Initialize MP4 video event listeners\r\n    jQuery(sliderSelector).find('.sf-22-slide-internal video').each(function() {\r\n        jQuery(this).on('play', function() {\r\n            jQuery(sliderSelector).slick('slickPause');\r\n        });\r\n        jQuery(this).on('pause ended', function() {\r\n            jQuery(sliderSelector).slick('slickPlay');\r\n        });\r\n    });\r\n\r\n    \/\/ Initialize Slick Slider\r\n    jQuery(sliderSelector).slick({\r\n        autoplay: true,\r\n        autoplaySpeed: 3000,\r\n        pauseOnHover: true,\r\n        pauseOnDotsHover: true,\r\n        infinite: true,\r\n        speed: 1000,\r\n        fade: false,\r\n        slidesToShow: 1,\r\n        slidesToScroll: 1,\r\n        centerMode: true,\r\n        centerPadding: '200px',\r\n        adaptiveHeight: false,\r\n        variableWidth: false,\r\n        arrows: true,\r\n        dots: true,\r\n        swipe: true,\r\n        rtl: false,\r\n    });\r\n\r\n    \/\/ Pause videos on slide change\r\n    jQuery(sliderSelector).on('beforeChange', function(event, slick, currentSlide, nextSlide) {\r\n        \/\/ Pause YouTube video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-yt iframe').length) {\r\n            var ytIndex = jQuery(sliderSelector).find('.sf-22-slide-yt iframe').index(jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-yt iframe'));\r\n            if (youtubePlayers[ytIndex]) {\r\n                youtubePlayers[ytIndex].pauseVideo();\r\n            }\r\n        }\r\n\r\n        \/\/ Pause Vimeo video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-vimeo iframe').length) {\r\n            var vimeoIndex = jQuery(sliderSelector).find('.sf-22-slide-vimeo iframe').index(jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-vimeo iframe'));\r\n            if (vimeoPlayers[vimeoIndex]) {\r\n                vimeoPlayers[vimeoIndex].pause();\r\n            }\r\n        }\r\n\r\n        \/\/ Pause MP4 video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-internal video').length) {\r\n            var mp4Video = jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-internal video')[0];\r\n            if (mp4Video) {\r\n                mp4Video.pause();\r\n            }\r\n        }\r\n    });\r\n});\r\n<\/script>\r\n<!-- slider start-->\r\n<div class=\"sf-22-slider-container-189\">\r\n                \r\n            <div class=\"mixed-slider-189\">\r\n                                            <!-- YouTube Slides -->\r\n                    <div class=\"sf-22-slide-yt\">\r\n                        <iframe src=\"https:\/\/www.youtube.com\/embed\/YRyLAR6A1Wc?enablejsapi=1&wmode=opaque\" frameborder=\"0\" allowfullscreen><\/iframe>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n                        \r\n            <div class=\"mixed-slider-189\">\r\n                                            <!-- YouTube Slides -->\r\n                    <div class=\"sf-22-slide-yt\">\r\n                        <iframe src=\"https:\/\/www.youtube.com\/embed\/HRjfYCPuN4w?enablejsapi=1&wmode=opaque\" frameborder=\"0\" allowfullscreen><\/iframe>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n                        \r\n            <div class=\"mixed-slider-189\">\r\n                                            <!-- YouTube Slides -->\r\n                    <div class=\"sf-22-slide-yt\">\r\n                        <iframe src=\"https:\/\/www.youtube.com\/embed\/T7SIxJOoQd8?enablejsapi=1&wmode=opaque\" frameborder=\"0\" allowfullscreen><\/iframe>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n                        \r\n            <div class=\"mixed-slider-189\">\r\n                                            <!-- YouTube Slides -->\r\n                    <div class=\"sf-22-slide-yt\">\r\n                        <iframe src=\"https:\/\/www.youtube.com\/embed\/SMKPKGW083c?enablejsapi=1&wmode=opaque\" frameborder=\"0\" allowfullscreen><\/iframe>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n            <\/div>\r\n<!-- slider end-->\r\n<style>\r\n.sf-22-slide-title {\r\n    text-align: center;\r\n    padding-top: 15px !important;\r\n}\r\n.sf-22-slide-desc {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n}\r\n.sf-22-slider-container-189 {\r\n    max-width: 100%;\r\n    max-height: 400px;\r\n}\r\n.mixed-slider-189 img,\r\n.mixed-slider-189 iframe,\r\n.mixed-slider-189 video {\r\n    width: 100%;\r\n    height: 400px;\r\n    object-fit: contain;\r\n    border: none;\r\n}\r\n.sf-22-slide-buttons {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n    padding-bottom: 5px !important;\r\n}\r\n.slick-prev, .slick-next {\r\n    z-index: 1;\r\n}\r\n.slick-dots {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n}\r\n.slick-arrow {\r\n    color: #ffffff !important;\r\n    background-color: #000000 !important;\r\n    border-radius: 50%;\r\n}\r\n<\/style><\/p>\n<p>[\/vc_column_text][vc_column_text]<strong data-start=\"138\" data-end=\"162\">\ud83c\udfaf Used Slider Settings \u2192<\/strong> <code data-start=\"163\" data-end=\"176\">Width: 100%<\/code> | <code data-start=\"179\" data-end=\"194\">Height: 400px<\/code> | <code data-start=\"197\" data-end=\"220\">Autoplay: ON (3000ms)<\/code> | <code data-start=\"223\" data-end=\"243\" data-is-only-node=\"\">Pause on Hover: ON<\/code> | <code data-start=\"246\" data-end=\"270\">Pause on Dot Hover: ON<\/code> | <code data-start=\"273\" data-end=\"294\">Infinite Scroll: ON<\/code> | <code data-start=\"297\" data-end=\"323\">Transition Speed: 1000ms<\/code> | <code data-start=\"326\" data-end=\"344\">Fade Effect: OFF<\/code>| <code data-start=\"347\" data-end=\"366\">Slides To Show: 1<\/code> | <code data-start=\"369\" data-end=\"390\">Slides To Scroll: 1<\/code> | <code data-start=\"393\" data-end=\"411\">Center Mode: ON<\/code> |\u00a0<code data-start=\"393\" data-end=\"411\">Center Padding: 200px<\/code> |\u00a0<code data-start=\"414\" data-end=\"436\">Adaptive Height: OFF<\/code> | <code data-start=\"439\" data-end=\"460\">Variable Width: OFF<\/code> | <code data-start=\"463\" data-end=\"475\">Arrows: ON<\/code> | <code data-start=\"478\" data-end=\"488\">Dots: ON<\/code> | <code data-start=\"491\" data-end=\"510\">Swipe Support: ON<\/code> | <code data-start=\"513\" data-end=\"523\">RTL: OFF<\/code> | <code data-start=\"526\" data-end=\"545\">Slide Order: NONE<\/code> | <code data-start=\"548\" data-end=\"573\">Custom CSS: Not Applied<\/code>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;100px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 style=\"text-align: center;\">Vimeo Video Slider &#8211; Example 3<\/h2>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><script>\r\njQuery(document).ready(function() {\r\n    var sliderSelector = \".sf-22-slider-container-190\";\r\n    var youtubePlayers = [];\r\n    var vimeoPlayers = [];\r\n\r\n    \/\/ Initialize YouTube players\r\n    function onYouTubeIframeAPIReady() {\r\n        jQuery(sliderSelector).find('.sf-22-slide-yt iframe').each(function(index) {\r\n            var player = new YT.Player(jQuery(this)[0], {\r\n                events: {\r\n                    'onStateChange': function(event) {\r\n                        if (event.data === YT.PlayerState.PLAYING) {\r\n                            jQuery(sliderSelector).slick('slickPause');\r\n                        } else if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {\r\n                            jQuery(sliderSelector).slick('slickPlay');\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n            youtubePlayers.push(player);\r\n        });\r\n    }\r\n    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;\r\n\r\n    \/\/ Initialize Vimeo players with retry mechanism\r\n    function initializeVimeoPlayers(attempts = 5, delay = 500) {\r\n        if (typeof Vimeo !== 'undefined') {\r\n            jQuery(sliderSelector).find('.sf-22-slide-vimeo iframe').each(function(index) {\r\n                var player = new Vimeo.Player(jQuery(this)[0]);\r\n                vimeoPlayers.push(player);\r\n                player.on('play', function() {\r\n                    jQuery(sliderSelector).slick('slickPause');\r\n                });\r\n                player.on('pause', function() {\r\n                    jQuery(sliderSelector).slick('slickPlay');\r\n                });\r\n                player.on('ended', function() {\r\n                    jQuery(sliderSelector).slick('slickPlay');\r\n                });\r\n            });\r\n        } else if (attempts > 0) {\r\n            setTimeout(function() {\r\n                initializeVimeoPlayers(attempts - 1, delay);\r\n            }, delay);\r\n        } else {\r\n            console.warn('Vimeo Player API failed to load after multiple attempts.');\r\n        }\r\n    }\r\n    initializeVimeoPlayers();\r\n\r\n    \/\/ Initialize MP4 video event listeners\r\n    jQuery(sliderSelector).find('.sf-22-slide-internal video').each(function() {\r\n        jQuery(this).on('play', function() {\r\n            jQuery(sliderSelector).slick('slickPause');\r\n        });\r\n        jQuery(this).on('pause ended', function() {\r\n            jQuery(sliderSelector).slick('slickPlay');\r\n        });\r\n    });\r\n\r\n    \/\/ Initialize Slick Slider\r\n    jQuery(sliderSelector).slick({\r\n        autoplay: true,\r\n        autoplaySpeed: 5000,\r\n        pauseOnHover: true,\r\n        pauseOnDotsHover: true,\r\n        infinite: true,\r\n        speed: 2000,\r\n        fade: true,\r\n        slidesToShow: 1,\r\n        slidesToScroll: 1,\r\n        centerMode: false,\r\n        centerPadding: '100px',\r\n        adaptiveHeight: false,\r\n        variableWidth: false,\r\n        arrows: true,\r\n        dots: true,\r\n        swipe: true,\r\n        rtl: false,\r\n    });\r\n\r\n    \/\/ Pause videos on slide change\r\n    jQuery(sliderSelector).on('beforeChange', function(event, slick, currentSlide, nextSlide) {\r\n        \/\/ Pause YouTube video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-yt iframe').length) {\r\n            var ytIndex = jQuery(sliderSelector).find('.sf-22-slide-yt iframe').index(jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-yt iframe'));\r\n            if (youtubePlayers[ytIndex]) {\r\n                youtubePlayers[ytIndex].pauseVideo();\r\n            }\r\n        }\r\n\r\n        \/\/ Pause Vimeo video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-vimeo iframe').length) {\r\n            var vimeoIndex = jQuery(sliderSelector).find('.sf-22-slide-vimeo iframe').index(jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-vimeo iframe'));\r\n            if (vimeoPlayers[vimeoIndex]) {\r\n                vimeoPlayers[vimeoIndex].pause();\r\n            }\r\n        }\r\n\r\n        \/\/ Pause MP4 video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-internal video').length) {\r\n            var mp4Video = jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-internal video')[0];\r\n            if (mp4Video) {\r\n                mp4Video.pause();\r\n            }\r\n        }\r\n    });\r\n});\r\n<\/script>\r\n<!-- slider start-->\r\n<div class=\"sf-22-slider-container-190\">\r\n                \r\n            <div class=\"mixed-slider-190\">\r\n                                            <!-- Vimeo Slides -->\r\n                    <div class=\"sf-22-slide-vimeo\">\r\n                        <iframe src=\"https:\/\/player.vimeo.com\/video\/570531995?api=1&transparent=0\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n                        \r\n            <div class=\"mixed-slider-190\">\r\n                                            <!-- Vimeo Slides -->\r\n                    <div class=\"sf-22-slide-vimeo\">\r\n                        <iframe src=\"https:\/\/player.vimeo.com\/video\/571163817?api=1&transparent=0\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n                        \r\n            <div class=\"mixed-slider-190\">\r\n                                            <!-- Vimeo Slides -->\r\n                    <div class=\"sf-22-slide-vimeo\">\r\n                        <iframe src=\"https:\/\/player.vimeo.com\/video\/568861735?api=1&transparent=0\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n            <\/div>\r\n<!-- slider end-->\r\n<style>\r\n.sf-22-slide-title {\r\n    text-align: center;\r\n    padding-top: 15px !important;\r\n}\r\n.sf-22-slide-desc {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n}\r\n.sf-22-slider-container-190 {\r\n    max-width: 100%;\r\n    max-height: 700px;\r\n}\r\n.mixed-slider-190 img,\r\n.mixed-slider-190 iframe,\r\n.mixed-slider-190 video {\r\n    width: 100%;\r\n    height: 700px;\r\n    object-fit: contain;\r\n    border: none;\r\n}\r\n.sf-22-slide-buttons {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n    padding-bottom: 5px !important;\r\n}\r\n.slick-prev, .slick-next {\r\n    z-index: 1;\r\n}\r\n.slick-dots {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n}\r\n.slick-arrow {\r\n    color: #ffffff !important;\r\n    background-color: #000000 !important;\r\n    border-radius: 50%;\r\n}\r\n<\/style><\/p>\n<p>[\/vc_column_text][vc_column_text]<strong data-start=\"138\" data-end=\"162\">\ud83c\udfaf Used Slider Settings \u2192<\/strong> <code data-start=\"163\" data-end=\"176\">Width: 100%<\/code> | <code data-start=\"179\" data-end=\"194\">Height: 700px<\/code> | <code data-start=\"197\" data-end=\"220\">Autoplay: ON (5000ms)<\/code> | <code data-start=\"223\" data-end=\"243\" data-is-only-node=\"\">Pause on Hover: ON<\/code> | <code data-start=\"246\" data-end=\"270\">Pause on Dot Hover: ON<\/code> | <code data-start=\"273\" data-end=\"294\">Infinite Scroll: ON<\/code> | <code data-start=\"297\" data-end=\"323\">Transition Speed: 2000ms<\/code> | <code data-start=\"326\" data-end=\"344\">Fade Effect: ON<\/code> | <code data-start=\"347\" data-end=\"366\">Slides To Show: 1<\/code> | <code data-start=\"369\" data-end=\"390\">Slides To Scroll: 1<\/code> | <code data-start=\"393\" data-end=\"411\">Center Mode: OFF<\/code> | <code data-start=\"414\" data-end=\"436\">Adaptive Height: OFF<\/code> | <code data-start=\"439\" data-end=\"460\">Variable Width: OFF<\/code> | <code data-start=\"463\" data-end=\"475\">Arrows: ON<\/code> | <code data-start=\"478\" data-end=\"488\">Dots: ON<\/code> | <code data-start=\"491\" data-end=\"510\">Swipe Support: ON<\/code> | <code data-start=\"513\" data-end=\"523\">RTL: OFF<\/code> | <code data-start=\"526\" data-end=\"545\">Slide Order: NONE<\/code> | <code data-start=\"548\" data-end=\"573\">Custom CSS: Not Applied<\/code>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;125px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 style=\"text-align: center;\"><strong>MP4 Video Slider &#8211; Example 4<\/strong><\/h2>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><script>\r\njQuery(document).ready(function() {\r\n    var sliderSelector = \".sf-22-slider-container-191\";\r\n    var youtubePlayers = [];\r\n    var vimeoPlayers = [];\r\n\r\n    \/\/ Initialize YouTube players\r\n    function onYouTubeIframeAPIReady() {\r\n        jQuery(sliderSelector).find('.sf-22-slide-yt iframe').each(function(index) {\r\n            var player = new YT.Player(jQuery(this)[0], {\r\n                events: {\r\n                    'onStateChange': function(event) {\r\n                        if (event.data === YT.PlayerState.PLAYING) {\r\n                            jQuery(sliderSelector).slick('slickPause');\r\n                        } else if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {\r\n                            jQuery(sliderSelector).slick('slickPlay');\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n            youtubePlayers.push(player);\r\n        });\r\n    }\r\n    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;\r\n\r\n    \/\/ Initialize Vimeo players with retry mechanism\r\n    function initializeVimeoPlayers(attempts = 5, delay = 500) {\r\n        if (typeof Vimeo !== 'undefined') {\r\n            jQuery(sliderSelector).find('.sf-22-slide-vimeo iframe').each(function(index) {\r\n                var player = new Vimeo.Player(jQuery(this)[0]);\r\n                vimeoPlayers.push(player);\r\n                player.on('play', function() {\r\n                    jQuery(sliderSelector).slick('slickPause');\r\n                });\r\n                player.on('pause', function() {\r\n                    jQuery(sliderSelector).slick('slickPlay');\r\n                });\r\n                player.on('ended', function() {\r\n                    jQuery(sliderSelector).slick('slickPlay');\r\n                });\r\n            });\r\n        } else if (attempts > 0) {\r\n            setTimeout(function() {\r\n                initializeVimeoPlayers(attempts - 1, delay);\r\n            }, delay);\r\n        } else {\r\n            console.warn('Vimeo Player API failed to load after multiple attempts.');\r\n        }\r\n    }\r\n    initializeVimeoPlayers();\r\n\r\n    \/\/ Initialize MP4 video event listeners\r\n    jQuery(sliderSelector).find('.sf-22-slide-internal video').each(function() {\r\n        jQuery(this).on('play', function() {\r\n            jQuery(sliderSelector).slick('slickPause');\r\n        });\r\n        jQuery(this).on('pause ended', function() {\r\n            jQuery(sliderSelector).slick('slickPlay');\r\n        });\r\n    });\r\n\r\n    \/\/ Initialize Slick Slider\r\n    jQuery(sliderSelector).slick({\r\n        autoplay: false,\r\n        autoplaySpeed: 3000,\r\n        pauseOnHover: false,\r\n        pauseOnDotsHover: false,\r\n        infinite: true,\r\n        speed: 2000,\r\n        fade: true,\r\n        slidesToShow: 1,\r\n        slidesToScroll: 1,\r\n        centerMode: false,\r\n        centerPadding: '100px',\r\n        adaptiveHeight: false,\r\n        variableWidth: false,\r\n        arrows: true,\r\n        dots: true,\r\n        swipe: true,\r\n        rtl: false,\r\n    });\r\n\r\n    \/\/ Pause videos on slide change\r\n    jQuery(sliderSelector).on('beforeChange', function(event, slick, currentSlide, nextSlide) {\r\n        \/\/ Pause YouTube video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-yt iframe').length) {\r\n            var ytIndex = jQuery(sliderSelector).find('.sf-22-slide-yt iframe').index(jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-yt iframe'));\r\n            if (youtubePlayers[ytIndex]) {\r\n                youtubePlayers[ytIndex].pauseVideo();\r\n            }\r\n        }\r\n\r\n        \/\/ Pause Vimeo video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-vimeo iframe').length) {\r\n            var vimeoIndex = jQuery(sliderSelector).find('.sf-22-slide-vimeo iframe').index(jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-vimeo iframe'));\r\n            if (vimeoPlayers[vimeoIndex]) {\r\n                vimeoPlayers[vimeoIndex].pause();\r\n            }\r\n        }\r\n\r\n        \/\/ Pause MP4 video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-internal video').length) {\r\n            var mp4Video = jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-internal video')[0];\r\n            if (mp4Video) {\r\n                mp4Video.pause();\r\n            }\r\n        }\r\n    });\r\n});\r\n<\/script>\r\n<!-- slider start-->\r\n<div class=\"sf-22-slider-container-191\">\r\n                \r\n            <div class=\"mixed-slider-191\">\r\n                                            <!-- MP4 Video Slides -->\r\n                    <div class=\"sf-22-slide-internal\">\r\n                        <video controls=\"controls\" preload=\"none\" poster=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/A-Couple-Waking-Hand-In-Hand-On-A-Beach-Shore.jpg\" style=\"background-color:black;\">\r\n                            <source src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/A-Couple-Waking-Hand-In-Hand-On-A-Beach-Shore.mp4\" type=\"video\/mp4\">\r\n                        <\/video>\r\n                                                <div class=\"sf-22-slide-title\">A Beach Shore<\/div>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n                        \r\n            <div class=\"mixed-slider-191\">\r\n                                            <!-- MP4 Video Slides -->\r\n                    <div class=\"sf-22-slide-internal\">\r\n                        <video controls=\"controls\" preload=\"none\" poster=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/A-Woman-in-Forest.jpg\" style=\"background-color:black;\">\r\n                            <source src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/A-Woman-in-Forest.mp4\" type=\"video\/mp4\">\r\n                        <\/video>\r\n                                                <div class=\"sf-22-slide-title\">In The Forest<\/div>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n                        \r\n            <div class=\"mixed-slider-191\">\r\n                                            <!-- MP4 Video Slides -->\r\n                    <div class=\"sf-22-slide-internal\">\r\n                        <video controls=\"controls\" preload=\"none\" poster=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/A-Woman-Leaning-Out-From-A-Vehicle-Window-Enjoying-The-Surroundings-And-Fresh-Air.jpg\" style=\"background-color:black;\">\r\n                            <source src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/A-Woman-Leaning-Out-From-A-Vehicle-Window-Enjoying-The-Surroundings-And-Fresh-Air.mp4\" type=\"video\/mp4\">\r\n                        <\/video>\r\n                                                <div class=\"sf-22-slide-title\">Fresh Air<\/div>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n                        \r\n            <div class=\"mixed-slider-191\">\r\n                                            <!-- MP4 Video Slides -->\r\n                    <div class=\"sf-22-slide-internal\">\r\n                        <video controls=\"controls\" preload=\"none\" poster=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/A-Woman-Standing-On-A-Mountain-Top-Enjoying-The-Group-Of-Islands-View.jpg\" style=\"background-color:black;\">\r\n                            <source src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/A-Woman-Standing-On-A-Mountain-Top-Enjoying-The-Group-Of-Islands-View.mp4\" type=\"video\/mp4\">\r\n                        <\/video>\r\n                                                <div class=\"sf-22-slide-title\">Islands View<\/div>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n                        \r\n            <div class=\"mixed-slider-191\">\r\n                                            <!-- MP4 Video Slides -->\r\n                    <div class=\"sf-22-slide-internal\">\r\n                        <video controls=\"controls\" preload=\"none\" poster=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/Couple-Relaxing-while-on-the-Seashore-During-Sunrise.jpg\" style=\"background-color:black;\">\r\n                            <source src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/Couple-Relaxing-while-on-the-Seashore-During-Sunrise.mp4\" type=\"video\/mp4\">\r\n                        <\/video>\r\n                                                <div class=\"sf-22-slide-title\">Sunrise On Seashore<\/div>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n                        \r\n            <div class=\"mixed-slider-191\">\r\n                                            <!-- MP4 Video Slides -->\r\n                    <div class=\"sf-22-slide-internal\">\r\n                        <video controls=\"controls\" preload=\"none\" poster=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/Girl-Walking-Between-Red-Poppy-Flowers.jpg\" style=\"background-color:black;\">\r\n                            <source src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/07\/Girl-Walking-Between-Red-Poppy-Flowers.mp4\" type=\"video\/mp4\">\r\n                        <\/video>\r\n                                                <div class=\"sf-22-slide-title\">Red Poppy Flowers<\/div>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n            <\/div>\r\n<!-- slider end-->\r\n<style>\r\n.sf-22-slide-title {\r\n    text-align: center;\r\n    padding-top: 15px !important;\r\n}\r\n.sf-22-slide-desc {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n}\r\n.sf-22-slider-container-191 {\r\n    max-width: 100%;\r\n    max-height: 700px;\r\n}\r\n.mixed-slider-191 img,\r\n.mixed-slider-191 iframe,\r\n.mixed-slider-191 video {\r\n    width: 100%;\r\n    height: 700px;\r\n    object-fit: contain;\r\n    border: none;\r\n}\r\n.sf-22-slide-buttons {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n    padding-bottom: 5px !important;\r\n}\r\n.slick-prev, .slick-next {\r\n    z-index: 1;\r\n}\r\n.slick-dots {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n}\r\n.slick-arrow {\r\n    color: #ffffff !important;\r\n    background-color: #000000 !important;\r\n    border-radius: 50%;\r\n}\r\n<\/style><\/p>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;15px&#8221;][vc_column_text]<strong data-start=\"138\" data-end=\"162\">\ud83c\udfaf Used Slider Settings \u2192<\/strong> <code data-start=\"163\" data-end=\"176\">Width: 100%<\/code> | <code data-start=\"179\" data-end=\"194\">Height: 700px<\/code> | <code data-start=\"197\" data-end=\"220\">Autoplay: OFF<\/code> | <code data-start=\"273\" data-end=\"294\">Infinite Scroll: ON<\/code> | <code data-start=\"297\" data-end=\"323\">Transition Speed: 2000ms<\/code> | <code data-start=\"326\" data-end=\"344\">Fade Effect: ON<\/code> | <code data-start=\"347\" data-end=\"366\">Slides To Show: 1<\/code> | <code data-start=\"369\" data-end=\"390\">Slides To Scroll: 1<\/code> | <code data-start=\"393\" data-end=\"411\">Center Mode: OFF<\/code> | <code data-start=\"414\" data-end=\"436\">Adaptive Height: OFF<\/code> | <code data-start=\"439\" data-end=\"460\">Variable Width: OFF<\/code> | <code data-start=\"463\" data-end=\"475\">Arrows: ON<\/code> | <code data-start=\"478\" data-end=\"488\">Dots: ON<\/code> | <code data-start=\"491\" data-end=\"510\">Swipe Support: ON<\/code> | <code data-start=\"513\" data-end=\"523\">RTL: OFF<\/code> | <code data-start=\"526\" data-end=\"545\">Slide Order: NONE<\/code> | <code data-start=\"548\" data-end=\"573\">Custom CSS: Not Applied<\/code>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;100px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 style=\"text-align: center;\"><strong>Mix Images\/Video Slider &#8211; Example 5<\/strong><\/h2>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><script>\r\njQuery(document).ready(function() {\r\n    var sliderSelector = \".sf-22-slider-container-192\";\r\n    var youtubePlayers = [];\r\n    var vimeoPlayers = [];\r\n\r\n    \/\/ Initialize YouTube players\r\n    function onYouTubeIframeAPIReady() {\r\n        jQuery(sliderSelector).find('.sf-22-slide-yt iframe').each(function(index) {\r\n            var player = new YT.Player(jQuery(this)[0], {\r\n                events: {\r\n                    'onStateChange': function(event) {\r\n                        if (event.data === YT.PlayerState.PLAYING) {\r\n                            jQuery(sliderSelector).slick('slickPause');\r\n                        } else if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {\r\n                            jQuery(sliderSelector).slick('slickPlay');\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n            youtubePlayers.push(player);\r\n        });\r\n    }\r\n    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;\r\n\r\n    \/\/ Initialize Vimeo players with retry mechanism\r\n    function initializeVimeoPlayers(attempts = 5, delay = 500) {\r\n        if (typeof Vimeo !== 'undefined') {\r\n            jQuery(sliderSelector).find('.sf-22-slide-vimeo iframe').each(function(index) {\r\n                var player = new Vimeo.Player(jQuery(this)[0]);\r\n                vimeoPlayers.push(player);\r\n                player.on('play', function() {\r\n                    jQuery(sliderSelector).slick('slickPause');\r\n                });\r\n                player.on('pause', function() {\r\n                    jQuery(sliderSelector).slick('slickPlay');\r\n                });\r\n                player.on('ended', function() {\r\n                    jQuery(sliderSelector).slick('slickPlay');\r\n                });\r\n            });\r\n        } else if (attempts > 0) {\r\n            setTimeout(function() {\r\n                initializeVimeoPlayers(attempts - 1, delay);\r\n            }, delay);\r\n        } else {\r\n            console.warn('Vimeo Player API failed to load after multiple attempts.');\r\n        }\r\n    }\r\n    initializeVimeoPlayers();\r\n\r\n    \/\/ Initialize MP4 video event listeners\r\n    jQuery(sliderSelector).find('.sf-22-slide-internal video').each(function() {\r\n        jQuery(this).on('play', function() {\r\n            jQuery(sliderSelector).slick('slickPause');\r\n        });\r\n        jQuery(this).on('pause ended', function() {\r\n            jQuery(sliderSelector).slick('slickPlay');\r\n        });\r\n    });\r\n\r\n    \/\/ Initialize Slick Slider\r\n    jQuery(sliderSelector).slick({\r\n        autoplay: true,\r\n        autoplaySpeed: 3000,\r\n        pauseOnHover: false,\r\n        pauseOnDotsHover: false,\r\n        infinite: true,\r\n        speed: 1000,\r\n        fade: false,\r\n        slidesToShow: 2,\r\n        slidesToScroll: 2,\r\n        centerMode: false,\r\n        centerPadding: '100px',\r\n        adaptiveHeight: false,\r\n        variableWidth: false,\r\n        arrows: true,\r\n        dots: true,\r\n        swipe: true,\r\n        rtl: false,\r\n    });\r\n\r\n    \/\/ Pause videos on slide change\r\n    jQuery(sliderSelector).on('beforeChange', function(event, slick, currentSlide, nextSlide) {\r\n        \/\/ Pause YouTube video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-yt iframe').length) {\r\n            var ytIndex = jQuery(sliderSelector).find('.sf-22-slide-yt iframe').index(jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-yt iframe'));\r\n            if (youtubePlayers[ytIndex]) {\r\n                youtubePlayers[ytIndex].pauseVideo();\r\n            }\r\n        }\r\n\r\n        \/\/ Pause Vimeo video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-vimeo iframe').length) {\r\n            var vimeoIndex = jQuery(sliderSelector).find('.sf-22-slide-vimeo iframe').index(jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-vimeo iframe'));\r\n            if (vimeoPlayers[vimeoIndex]) {\r\n                vimeoPlayers[vimeoIndex].pause();\r\n            }\r\n        }\r\n\r\n        \/\/ Pause MP4 video\r\n        if (jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-internal video').length) {\r\n            var mp4Video = jQuery('.slick-slide').eq(currentSlide).find('.sf-22-slide-internal video')[0];\r\n            if (mp4Video) {\r\n                mp4Video.pause();\r\n            }\r\n        }\r\n    });\r\n});\r\n<\/script>\r\n<!-- slider start-->\r\n<div class=\"sf-22-slider-container-192\">\r\n                \r\n            <div class=\"mixed-slider-192\">\r\n                            <!-- Image Slides -->\r\n                <div class=\"sf-22-slide-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2025\/05\/nj3nhryozzurcs0dhegh.webp\" alt=\"\">\r\n                                                            \r\n                    <div class=\"sf-22-slide-buttons\">\r\n                                        \r\n                                        <\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n                        \r\n            <div class=\"mixed-slider-192\">\r\n                                            <!-- YouTube Slides -->\r\n                    <div class=\"sf-22-slide-yt\">\r\n                        <iframe src=\"https:\/\/www.youtube.com\/embed\/HRjfYCPuN4w?enablejsapi=1&wmode=opaque\" frameborder=\"0\" allowfullscreen><\/iframe>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n                        \r\n            <div class=\"mixed-slider-192\">\r\n                                            <!-- Vimeo Slides -->\r\n                    <div class=\"sf-22-slide-vimeo\">\r\n                        <iframe src=\"https:\/\/player.vimeo.com\/video\/570531995?api=1&transparent=0\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n                        \r\n            <div class=\"mixed-slider-192\">\r\n                            <!-- Image Slides -->\r\n                <div class=\"sf-22-slide-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2025\/05\/jbljhzqrdscoja32dtxz.webp\" alt=\"\">\r\n                                                            \r\n                    <div class=\"sf-22-slide-buttons\">\r\n                                        \r\n                                        <\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n                        \r\n            <div class=\"mixed-slider-192\">\r\n                            <!-- Image Slides -->\r\n                <div class=\"sf-22-slide-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2025\/05\/jh8lbg7hsrbfv5q0e8st.webp\" alt=\"\">\r\n                                                            \r\n                    <div class=\"sf-22-slide-buttons\">\r\n                                        \r\n                                        <\/div>\r\n                <\/div>\r\n                                    <\/div>\r\n                        \r\n            <div class=\"mixed-slider-192\">\r\n                                            <!-- MP4 Video Slides -->\r\n                    <div class=\"sf-22-slide-internal\">\r\n                        <video controls=\"controls\" preload=\"none\" poster=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2025\/05\/jfm5qwk3hmmwozeiim1p.webp\" style=\"background-color:black;\">\r\n                            <source src=\"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-content\/uploads\/sites\/8\/2021\/08\/Video-Of-Turtle-Under-Water.mp4\" type=\"video\/mp4\">\r\n                        <\/video>\r\n                                                                        <div class=\"sf-22-slide-buttons\">\r\n                                                                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n            <\/div>\r\n<!-- slider end-->\r\n<style>\r\n.sf-22-slide-title {\r\n    text-align: center;\r\n    padding-top: 15px !important;\r\n}\r\n.sf-22-slide-desc {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n}\r\n.sf-22-slider-container-192 {\r\n    max-width: 100%;\r\n    max-height: 360px;\r\n}\r\n.mixed-slider-192 img,\r\n.mixed-slider-192 iframe,\r\n.mixed-slider-192 video {\r\n    width: 100%;\r\n    height: 360px;\r\n    object-fit: contain;\r\n    border: none;\r\n}\r\n.sf-22-slide-buttons {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n    padding-bottom: 5px !important;\r\n}\r\n.slick-prev, .slick-next {\r\n    z-index: 1;\r\n}\r\n.slick-dots {\r\n    text-align: center;\r\n    padding-top: 10px !important;\r\n}\r\n.slick-arrow {\r\n    color: #ffffff !important;\r\n    background-color: #000000 !important;\r\n    border-radius: 50%;\r\n}\r\n<\/style><\/p>\n<p>[\/vc_column_text][vc_column_text]<strong data-start=\"138\" data-end=\"162\">\ud83c\udfaf Used Slider Settings \u2192<\/strong> <code data-start=\"163\" data-end=\"176\">Width: 100%<\/code> | <code data-start=\"179\" data-end=\"194\">Height: 360px<\/code> | <code data-start=\"197\" data-end=\"220\">Autoplay: OFF<\/code>| <code data-start=\"273\" data-end=\"294\">Infinite Scroll: ON<\/code> | <code data-start=\"297\" data-end=\"323\">Transition Speed: 1000ms<\/code> | <code data-start=\"326\" data-end=\"344\">Fade Effect: OFF<\/code> | <code data-start=\"347\" data-end=\"366\">Slides To Show: 2<\/code> | <code data-start=\"369\" data-end=\"390\">Slides To Scroll: 2<\/code> | <code data-start=\"393\" data-end=\"411\">Center Mode: OFF<\/code> | <code data-start=\"414\" data-end=\"436\">Adaptive Height: OFF<\/code> | <code data-start=\"439\" data-end=\"460\">Variable Width: OFF<\/code> | <code data-start=\"463\" data-end=\"475\">Arrows: ON<\/code> | <code data-start=\"478\" data-end=\"488\">Dots: ON<\/code> | <code data-start=\"491\" data-end=\"510\">Swipe Support: ON<\/code> | <code data-start=\"513\" data-end=\"523\">RTL: OFF<\/code> | <code data-start=\"526\" data-end=\"545\">Slide Order: NONE<\/code> | <code data-start=\"548\" data-end=\"573\">Custom CSS: Not Applied<\/code>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row][vc_column][vc_column_text] Images Slider &#8211; Example 1 [\/vc_column_text][vc_column_text] [\/vc_column_text][vc_column_text]\ud83c\udfaf Used Slider Settings \u2192 Width: 100% | Height: 370px | Autoplay: ON (3000ms) | Pause on Hover: ON | Pause on Dot Hover: ON | Infinite Scroll: ON | Transition Speed: 2000ms | Fade Effect: OFF | Slides To Show: 2 | Slides To Scroll: 2 | [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":6,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5205","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/5205","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/comments?post=5205"}],"version-history":[{"count":23,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/5205\/revisions"}],"predecessor-version":[{"id":5237,"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/pages\/5205\/revisions\/5237"}],"wp:attachment":[{"href":"https:\/\/wpfrank.com\/demo\/slider-factory-pro\/wp-json\/wp\/v2\/media?parent=5205"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}