{"id":255,"date":"2016-12-17T11:05:45","date_gmt":"2016-12-17T11:05:45","guid":{"rendered":"http:\/\/demo.awplife.com\/media-slider-premium\/?page_id=255"},"modified":"2023-12-15T11:09:40","modified_gmt":"2023-12-15T11:09:40","slug":"media-slider-with-video-slides","status":"publish","type":"page","link":"https:\/\/awplife.com\/demo\/media-slider-premium\/media-slider-with-video-slides\/","title":{"rendered":"Media Slider With Video Slides"},"content":{"rendered":"\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n<p style=\"text-align: center;\">Media Slider with the video supported slides.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">\t<div id=\"image_gallery_254\" class=\"row all-images\">\r\n\t\t<div class=\"slider-pro\" id=\"my-slider-254\">\r\n\t\t\t<div class=\"sp-slides\">\r\n\t\t\t\t\t\t\t\t\t\t<div class=\"sp-slide\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- Uploaded Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- YouTube Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sp-video\" href=\"https:\/\/youtu.be\/DK_0jXPuIr0\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"sp-image\" src=\"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-content\/uploads\/sites\/32\/2016\/12\/poster.jpg\">\r\n\t\t\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t\t\t\t <p class=\"sp-caption\"><span class=\"caption-css\">What Do You Mean<\/span><\/p> \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- Vimeo Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sp-slide\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- Uploaded Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- YouTube Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sp-video\" href=\"https:\/\/youtu.be\/sC2nElyx7Ds\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"sp-image\" src=\"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-content\/uploads\/sites\/32\/2016\/12\/poster3.jpg\">\r\n\t\t\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t\t\t\t <p class=\"sp-caption\"><span class=\"caption-css\">Heart Attack<\/span><\/p> \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- Vimeo Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sp-slide\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- Uploaded Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- YouTube Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sp-video\" href=\"https:\/\/youtu.be\/AJtDXIazrMo\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"sp-image\" src=\"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-content\/uploads\/sites\/32\/2016\/12\/poster4.jpg\">\r\n\t\t\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t\t\t\t <p class=\"sp-caption\"><span class=\"caption-css\">Love Me Like You Do<\/span><\/p> \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- Vimeo Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sp-slide\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- Uploaded Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- YouTube Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sp-video\" href=\"https:\/\/youtu.be\/lf_wVfwpfp8\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"sp-image\" src=\"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-content\/uploads\/sites\/32\/2016\/12\/poster5.jpg\">\r\n\t\t\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t\t\t\t <p class=\"sp-caption\"><span class=\"caption-css\">Focus<\/span><\/p> \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- Vimeo Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sp-slide\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- Uploaded Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- YouTube Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sp-video\" href=\"https:\/\/youtu.be\/n-D1EB74Ckg\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"sp-image\" src=\"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-content\/uploads\/sites\/32\/2016\/12\/poster6.jpg\">\r\n\t\t\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t\t\t\t <p class=\"sp-caption\"><span class=\"caption-css\">Come & Get It<\/span><\/p> \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- Vimeo Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"sp-slide\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- Uploaded Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- YouTube Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a class=\"sp-video\" href=\"https:\/\/youtu.be\/e-ORhEE9VVg\" target=\"_blank\" rel=\"noopener\">\r\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"sp-image\" src=\"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-content\/uploads\/sites\/32\/2016\/12\/poster7.jpg\">\r\n\t\t\t\t\t\t\t\t\t<\/a>\r\n\t\t\t\t\t\t\t\t\t <p class=\"sp-caption\"><span class=\"caption-css\">Blank Space<\/span><\/p> \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<!-- Vimeo Video-->\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t<\/div>\r\n\t<style>\r\n.sp-thumbnail-edited-both-254 {\r\n\twidth : 300px !important;\t\r\n}\r\n\r\n.sp-thumbnail-image-container-254 {\r\n\twidth: 40%;\r\n\theight: 100px !important;\r\n\toverflow: hidden;\r\n\tfloat: left !important;\r\n}\r\n\r\n.sp-thumbnail-image-254 {\r\n\theight: 100% !important;\r\n}\r\n\r\n.sp-thumbnail-text-254 {\r\n\twidth: 59%;\r\n    float: right;\r\n\ttext-align : left;\r\n\tpadding-left : 8px;\r\n\tpadding-right : 8px;\r\n\tpadding-bottom : 8px;\r\n\theight: 100px;\r\n\t \r\n\tpadding-top: 3px;\r\n\t    background-color: #F0F0F0;\r\n    -moz-box-sizing: border-box;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.sp-thumbnail-title {\r\n\tmargin-bottom: 2px;\r\n\ttext-transform: uppercase;\r\n\tcolor: #333;\r\n}\r\n\r\n.sp-thumbnail-description {\r\n\tfont-size: 13px;\r\n\tcolor: #333;\r\n}\r\n\r\n@media (max-width: 500px) {\r\n\t.sp-thumbnail {\r\n\t\ttext-align: center;\r\n\t}\r\n\r\n\t.sp-thumbnail-image-container {\r\n\t\tdisplay: none;\r\n\t}\r\n\r\n\t.sp-thumbnail-text {\r\n\t\twidth: 120px;\r\n\t}\r\n\r\n\t.sp-thumbnail-title {\r\n\t\tfont-size: 12px;\r\n\t\ttext-transform: uppercase;\r\n\t}\r\n\r\n\t.sp-thumbnail-description {\r\n\t\tdisplay: none;\r\n\t}\r\n}\r\n.title-css {\r\n\tfont-size : 18px;\r\n\tfont-weight: bolder;\r\n\ttext-transform: uppercase;\r\n}\r\n.desc-css {\r\n\tfont-size : 16px;\r\n}\r\n.link-css {\r\n\tfont-size : 16px;\r\n}\r\n.caption-css {\r\n\tfont-size : 16px;\r\n\tfont-weight: bolder;\r\n\ttext-transform: uppercase;\r\n}\r\n<\/style>\r\n<script type=\"application\/javascript\">\r\njQuery( document ).ready(function( jQuery ) {\r\n\tvar MS = jQuery( \"#my-slider-254\").sliderPro({\r\n\t\twidth : 960,\r\n\t\theight : 540,   \r\n\t\tsmallSize : 480,\r\n\t\tmediumSize : 768,\r\n\t\tlargeSize : 1024,\r\n\t\t\r\n\t\t\/\/Slide\r\n\t\timageScaleMode : 'cover',\r\n\t\tcenterImage : true,\r\n\t\tallowScaleUp : true,\r\n\t\tautoSlideSize : false,\r\n\t\tautoHeight:false,\r\n\t\tstartSlide : 0,\r\n\t\tshuffle : false,\r\n\t\torientation : 'horizontal',\r\n\t\tslideDistance : 10,\r\n\t\tforceSize : 'none',\r\n\t\tloop : true,\r\n\t\t\t\tslideAnimationDuration : 700,\r\n\t\theightAnimationDuration : 700,\r\n\t\tvisibleSize : 'auto',\r\n\t\trightToLeft : false,\r\n\t\twaitForLayers : false,\r\n\t\tautoScaleLayers : false,\r\n\t\t\/\/Fade \r\n\t\tfade: false,\r\n\t\tfadeOutPreviousSlide: false,\r\n\t\tfadeDuration : 1000,\r\n\t\tfadeCaption: true,\r\n\t\tcaptionFadeDuration: 1000,\r\n\t\t\/\/Auto\r\n\t\tautoplay : false,\r\n\t\tautoplayDelay : 5000,\r\n\t\tautoplayDirection : 'normal',\r\n\t\tautoplayOnHover : 'pause',\r\n\t\t\/\/Navigation\r\n\t\tarrows: true,\r\n\t\tfadeArrows: true,\r\n\t\tbuttons: true,\r\n\t\tkeyboard : true,\r\n\t\tkeyboardOnlyOnFocus : false,\r\n\t\ttouchSwipe : true,\r\n\t\ttouchSwipeThreshold : 50,\r\n\t\tfullScreen : true,\r\n\t\tfadeFullScreen : true,\r\n\t\t\/\/Video\r\n\t\t\t\r\n\t\t\/\/Thumbnails\r\n\t\tthumbnailWidth : 300,\r\n\t\tthumbnailHeight : 100,\r\n\t\tthumbnailsPosition : 'right',\r\n\t\tthumbnailPointer : true,\r\n\t\tthumbnailArrows : true,\r\n\t\tfadeThumbnailArrows : true,\r\n\t\tthumbnailTouchSwipe : true\t});\r\n\r\n\t\t\/\/ mousewheel slide show\r\n\tvar slider = jQuery( '#my-slider-254' ).data( 'sliderPro' );\r\n\tjQuery('#my-slider-254').bind('mousewheel', function(e) {\r\n\t\tif(e.originalEvent.wheelDelta \/ 120 > 0) {\r\n\t\t\t\/\/alert('up');\r\n\t\t\tslider.nextSlide();\r\n\t\t} else {\r\n\t\t\t\/\/alert('down');\r\n\t\t\tslider.previousSlide()\r\n\t\t}\r\n\t});\r\n\t});\r\n<\/script><\/p>\n<p style=\"text-align: center;\">","protected":false},"excerpt":{"rendered":"<p>Media Slider with the video supported slides. &nbsp;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-255","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-json\/wp\/v2\/pages\/255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-json\/wp\/v2\/comments?post=255"}],"version-history":[{"count":5,"href":"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-json\/wp\/v2\/pages\/255\/revisions"}],"predecessor-version":[{"id":508,"href":"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-json\/wp\/v2\/pages\/255\/revisions\/508"}],"wp:attachment":[{"href":"https:\/\/awplife.com\/demo\/media-slider-premium\/wp-json\/wp\/v2\/media?parent=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}