{"id":2350,"date":"2021-12-06T04:30:22","date_gmt":"2021-12-06T04:30:22","guid":{"rendered":"https:\/\/mayfair.enpointe.com.vn\/?page_id=2350"},"modified":"2021-12-19T08:02:04","modified_gmt":"2021-12-19T08:02:04","slug":"page-demo","status":"publish","type":"page","link":"https:\/\/www.mayfair.wmctower.com\/en\/page-demo\/","title":{"rendered":"page demo"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2350\" class=\"elementor elementor-2350\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-64a49c7 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"64a49c7\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-42ffcaf\" data-id=\"42ffcaf\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7be34a0 elementor-section-full_width banner-slider-page elementor-section-height-default elementor-section-height-default\" data-id=\"7be34a0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-7de30e8\" data-id=\"7de30e8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e80c5fb elementor-widget elementor-widget-shortcode\" data-id=\"e80c5fb\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"banner-slider-all \">\n          <div class=\" banner-slider-list\">\n              <div class=\"banner-slide first active\" style=\"z-index: 0; transform: translateX(0%);\">\n          <div class=\"banner-slide-content\" >\n            <div class=\"overlay-banner-page\"><\/div>\n            <div class=\"banner-img-page\" style=\" background-image: url('');\">\n                <div class=\"content-banner-all\">\n                    <h2 class=\"title-banner-page\">\n                        Modern Interior                    <\/h2>\n                    <div class=\"description-banner-banner\">\n                        <p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pulvinar turpis proin porttitor vel, porta eu metus. Nisl, et, tempus, semper nec. Ante morbi dolor aenean id tortor pharetra.<\/p>\n<\/p>\n                    <\/div>\n                    <a href=\"\" class=\"button-banner-page\">contact us<\/a>\n                <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n                <div class=\"banner-slide\" style=\"z-index: 1; transform: translateX(100%);\">\n          <div class=\"banner-slide-content\" >\n            <div class=\"overlay-banner-page\"><\/div>\n            <div class=\"banner-img-page\" style=\" background-image: url('');\">\n                <div class=\"content-banner-all\">\n                    <h2 class=\"title-banner-page\">\n                        Modern Interior                    <\/h2>\n                    <div class=\"description-banner-banner\">\n                        <p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pulvinar turpis proin porttitor vel, porta eu metus. Nisl, et, tempus, semper nec. Ante morbi dolor aenean id tortor pharetra.<\/p>\n<\/p>\n                    <\/div>\n                    <a href=\"\" class=\"button-banner-page\">contact us<\/a>\n                <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n                <div class=\"banner-slide\" style=\"z-index: 2; transform: translateX(200%);\">\n          <div class=\"banner-slide-content\" >\n            <div class=\"overlay-banner-page\"><\/div>\n            <div class=\"banner-img-page\" style=\" background-image: url('https:\/\/www.mayfair.wmctower.com\/wp-content\/uploads\/2021\/12\/unsplash_GqbU78bdJFM.png');\">\n                <div class=\"content-banner-all\">\n                    <h2 class=\"title-banner-page\">\n                        Modern Interior                    <\/h2>\n                    <div class=\"description-banner-banner\">\n                        <p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pulvinar turpis proin porttitor vel, porta eu metus. Nisl, et, tempus, semper nec. Ante morbi dolor aenean id tortor pharetra.<\/p>\n<\/p>\n                    <\/div>\n                    <a href=\"\" class=\"button-banner-page\">contact us<\/a>\n                <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n                <div class=\"banner-slide\" style=\"z-index: 3; transform: translateX(300%);\">\n          <div class=\"banner-slide-content\" >\n            <div class=\"overlay-banner-page\"><\/div>\n            <div class=\"banner-img-page\" style=\" background-image: url('https:\/\/www.mayfair.wmctower.com\/wp-content\/uploads\/2021\/12\/unsplash_JIUjvqe2ZHg.png');\">\n                <div class=\"content-banner-all\">\n                    <h2 class=\"title-banner-page\">\n                        Modern Interior                    <\/h2>\n                    <div class=\"description-banner-banner\">\n                        <p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pulvinar turpis proin porttitor vel, porta eu metus. Nisl, et, tempus, semper nec. Ante morbi dolor aenean id tortor pharetra.<\/p>\n<\/p>\n                    <\/div>\n                    <a href=\"\" class=\"button-banner-page\">contact us<\/a>\n                <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n              <\/div>\n            <div class=\"button-next\"><\/div>\n      <div class=\"button-prev\"><\/div>\n      <div class=\"pagination\"><\/div>\n    <\/div>\n<style>\n  .banner-slider-all{\n    position: relative;\n  }\n  .button-next{\n    background-color: #000;\n    height: 0px;\n    width: 0px;\n    position: absolute;\n    right: 0;\n    bottom:0;\n    z-index: 9;\n}\n.button-prev {\n    background-color: #f30000;\n    height: 0px;\n    width: 0px;\n    position: absolute;\n    right: 101px;\n    bottom:0;\n    z-index: 9;\n}\n.banner-slider-list {\n  position: relative;\n  height: 640px;\n\n}\n.banner-slide{\n  position:absolute;\n  width:100%;\n  height:100%;\n  top: 0;\n  left:0;\n  transition:all 2000ms ease;\n  transform: translateX(-100%);\n}\n.banner-slide-content{\n  position: relative;\n  width:100%;\n  height:100%;\n  z-index: 999;\n}\n.banner-img-page,.overlay-banner-page{\n  position:absolute;\n  width:100%;\n  height:100%;\n  top: 0;\n  left:0;\n  background-size: cover;\n}\n.overlay-banner-page, .content-banner-all{\n  z-index: 1;\n}\n.banner-slide-content:hover .content-banner-all, .banner-slide-content:hover .overlay-banner-page {\n    opacity: 1 !important;\n    transition:all 0 ease !important;\n   transition-delay: none !important;\n}\n\n.banner-slide.active .overlay-banner-page, .banner-slide.active .content-banner-all{\n  opacity: 0;\n}\n.banner-img-page{\n  opacity: 1;\n  \/* transition: all 2000ms; *\/\n}\n.banner-slide.active .banner-img-page{\n  opacity: 1;\n  \n}\n.content-banner-all{\n  transition:all 1000ms ease;\n  \/* transition-delay: 2s; *\/\n  opacity: 1;\n}\n.overlay-banner-page{\n  transition:all 1000ms ease;\n  background:linear-gradient(81.21deg, rgba(86, 11, 87, 0.7) 0.49%, rgba(7, 102, 65, 0.7) 97.58%);\n  opacity: 1;\n}\n.banner-slide.active .overlay-banner-page{\n  transition-delay: 2s;\n  transition:all 1000ms ease;\n}\n.banner-slide:first-child{\n  transform: translateX(0);\n}\n\n.banner-img-page {\n    position: relative;\n}\n.content-banner-all {\n    text-align: center;\n    padding: 0 25%;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    font-family: Lato;\n    z-index: 9;\n}\n.title-banner-page {\n    font-weight: 500;\n    font-size: 64px;\n    line-height: 1.2;\n    color: #fff;\n}\n.description-banner-banner { \n    font-weight: normal;\n    font-size: 18px;\n    line-height: 1.4;\n    color:#fff;\n}\n.button-banner-page {\n    font-family: Lato;\n    font-style: normal;\n    font-weight: bold;\n    font-size: 16px;\n    line-height: 1.3;\n    color:#fff;\n    padding: 10px 20px;\n    background: #076641;\n}\n.button-next.disabled,\n.button-prev.disabled{\n    pointer-events: none;\n    display: block;\n    opacity: .3;\n}\n<\/style>\n<script>\n  jQuery(function($){\n    var wSlider = jQuery('.banner-slider-list');\n    var bannerSlider = wSlider.find('.banner-slide');\n    var currentSlider = wSlider.find('.active');  \n    var totalItemSlider = bannerSlider.length;\n    var flag = 0;\n    if( flag == 0 ){\n      jQuery('.button-prev').addClass('disabled');\n    }\n    jQuery('.button-next').on('click',function(e){\n      var temp = flag;\n      flag++;\n      \/\/ if( $(\".banner-slide.first.active\").length ){\n      \/\/   $(\".banner-slide.first.active\").css('z-index', totalItemSlider);\n      \/\/ }\n      var nextSldier = $(bannerSlider[flag]);                   \n          nextSldier.css({\n            'transform': 'translateX(0)',\n            'transition': 'all 2000ms ease'\n          });    \n      setTimeout(() => {        \n        wSlider.find('.active').removeClass('active');  \n        nextSldier.addClass('active');        \n        $(bannerSlider[temp]).css({\n          'transform': 'translateX('+(totalItemSlider - temp - 1 )*100+'%)',\n          'transition': 'none',\n          'z-index': (totalItemSlider - temp - 1 )\n        });   \n        $(this).removeClass('disabled');        \n      }, 2000);\n      if( flag == (totalItemSlider - 1) ){       \n        nextSldier.css({\n          'z-index': 0\n        });\n        $(this).addClass('disabled');   \n        jQuery('.button-prev').removeClass('disabled');\n      }else{\n        $('.button-prev').removeClass('disabled');\n        $('.button-next').removeClass('disabled');\n      }\n    });\n\n    jQuery('.button-prev').on('click',function(e){\n        var temp = flag - 1;\n        $(bannerSlider[temp]).css({\n            'transform': 'translateX(0)',\n            'transition': 'all 2000ms ease',\n            'z-index': temp\n        });\n        setTimeout(() => {        \n            wSlider.find('.active').removeClass('active');  \n            $(bannerSlider[temp]).addClass('active');\n            if( flag == 0 ){\n              $(bannerSlider[flag]).css({\n              'transform': 'translateX('+temp*100+'%)',\n              'transition': 'none',\n              'z-index': temp\n              });           \n              flag = totalItemSlider;\n              flag--;              \n            }else{\n              $(bannerSlider[flag]).css({\n              'transform': 'translateX('+flag*100+'%)',\n              'transition': 'none',\n              'z-index': flag\n              });  \n              flag--;            \n            }\n        }, 2000);  \n        if( flag == 0 ){       \n          $(this).addClass('disabled');\n          $('.button-next').removeClass('disabled');\n        }else{\n          $('.button-prev').removeClass('disabled');\n          $('.button-next').removeClass('disabled');\n        }          \n    });\n  });\n\n<\/script>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":[],"_links":{"self":[{"href":"https:\/\/www.mayfair.wmctower.com\/en\/wp-json\/wp\/v2\/pages\/2350"}],"collection":[{"href":"https:\/\/www.mayfair.wmctower.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mayfair.wmctower.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mayfair.wmctower.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mayfair.wmctower.com\/en\/wp-json\/wp\/v2\/comments?post=2350"}],"version-history":[{"count":0,"href":"https:\/\/www.mayfair.wmctower.com\/en\/wp-json\/wp\/v2\/pages\/2350\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.mayfair.wmctower.com\/en\/wp-json\/wp\/v2\/media?parent=2350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}