{"id":1927,"date":"2019-04-10T21:47:51","date_gmt":"2019-04-10T15:47:51","guid":{"rendered":"http:\/\/themestrace.com\/tracem\/?page_id=1927"},"modified":"2019-04-10T21:47:51","modified_gmt":"2019-04-10T15:47:51","slug":"home-fullwidth-slide","status":"publish","type":"page","link":"https:\/\/www.creativedial.in\/?page_id=1927","title":{"rendered":"Home Fullwidth Slide"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1927\" class=\"elementor elementor-1927\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-45bf686 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"45bf686\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-8c2b553\" data-id=\"8c2b553\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-df37fd8 elementor-widget elementor-widget-tracem-slider\" data-id=\"df37fd8\" data-element_type=\"widget\" data-widget_type=\"tracem-slider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div class=\"full-width-slideshow\">\n        <div class=\"full-width-slide\">\n        <div class=\"full_width_slide__wrap\">\n            <div class=\"full_width_slide__img\" style=\"background-image: url();\"><\/div>\n            <div class=\"container-fluid\">\n                <div class=\"row tracem-shrink\">\n                    <div class=\"col\">\n                        <div class=\"full_width_slide__title-wrap\">\n                            <h4 class=\"slide-cat\"><a href=\"https:\/\/www.creativedial.in\/?portfolio_category=design-intro\" rel=\"tag\">Design Intro<\/a><\/h4>\n                            <h3 class=\"full_width_slide__title\">Madcap coffee company<\/h3>\n                            <p class=\"full_width_slide__subtitle\">\n                                We publish a very broad range of fiction and non-fiction international and local books                            <\/p>\n\n                                                                <div class=\"btn-generic\">\n                                        <a href=\"https:\/\/www.creativedial.in\/?portfolio=madcap-coffee-company\">\n                                            <span class=\"animation-loaded\">\n                                                <span class=\"animation-loaded\">View Project<\/span>\n                                            <\/span>\n                                        <\/a>\n                                    <\/div><!-- .btn-generic -->\n                                                                                    <\/div>\n                    <\/div><!-- .col -->\n                <\/div><!-- .row.tracem-shrink -->\n            <\/div><!-- .container-fluid -->\n        <\/div>\n    <\/div>\n        <div class=\"full-width-slide\">\n        <div class=\"full_width_slide__wrap\">\n            <div class=\"full_width_slide__img\" style=\"background-image: url();\"><\/div>\n            <div class=\"container-fluid\">\n                <div class=\"row tracem-shrink\">\n                    <div class=\"col\">\n                        <div class=\"full_width_slide__title-wrap\">\n                            <h4 class=\"slide-cat\"><a href=\"https:\/\/www.creativedial.in\/?portfolio_category=design-scope\" rel=\"tag\">Design Scope<\/a><\/h4>\n                            <h3 class=\"full_width_slide__title\">Nutshell of design<\/h3>\n                            <p class=\"full_width_slide__subtitle\">\n                                I realized that it wasn\u2019t the amount of work that scares me, but it\u2019s\u00a0these factors instead                            <\/p>\n\n                                                                <div class=\"btn-generic\">\n                                        <a href=\"https:\/\/www.creativedial.in\/?portfolio=nutshell-of-design\">\n                                            <span class=\"animation-loaded\">\n                                                <span class=\"animation-loaded\">View Project<\/span>\n                                            <\/span>\n                                        <\/a>\n                                    <\/div><!-- .btn-generic -->\n                                                                                    <\/div>\n                    <\/div><!-- .col -->\n                <\/div><!-- .row.tracem-shrink -->\n            <\/div><!-- .container-fluid -->\n        <\/div>\n    <\/div>\n        <div class=\"full-width-slide\">\n        <div class=\"full_width_slide__wrap\">\n            <div class=\"full_width_slide__img\" style=\"background-image: url();\"><\/div>\n            <div class=\"container-fluid\">\n                <div class=\"row tracem-shrink\">\n                    <div class=\"col\">\n                        <div class=\"full_width_slide__title-wrap\">\n                            <h4 class=\"slide-cat\"><a href=\"https:\/\/www.creativedial.in\/?portfolio_category=design-factory\" rel=\"tag\">Design Factory<\/a><\/h4>\n                            <h3 class=\"full_width_slide__title\">Horses of skull<\/h3>\n                            <p class=\"full_width_slide__subtitle\">\n                                I get caught up in looking at other people\u2019s beautiful portfolios, and end up worrying about the aesthetics                            <\/p>\n\n                                                                <div class=\"btn-generic\">\n                                        <a href=\"https:\/\/www.creativedial.in\/?portfolio=horses-of-skull\">\n                                            <span class=\"animation-loaded\">\n                                                <span class=\"animation-loaded\">View Project<\/span>\n                                            <\/span>\n                                        <\/a>\n                                    <\/div><!-- .btn-generic -->\n                                                                                    <\/div>\n                    <\/div><!-- .col -->\n                <\/div><!-- .row.tracem-shrink -->\n            <\/div><!-- .container-fluid -->\n        <\/div>\n    <\/div>\n        <div class=\"full-width-slide\">\n        <div class=\"full_width_slide__wrap\">\n            <div class=\"full_width_slide__img\" style=\"background-image: url();\"><\/div>\n            <div class=\"container-fluid\">\n                <div class=\"row tracem-shrink\">\n                    <div class=\"col\">\n                        <div class=\"full_width_slide__title-wrap\">\n                            <h4 class=\"slide-cat\"><a href=\"https:\/\/www.creativedial.in\/?portfolio_category=creative-design\" rel=\"tag\">Creative Design<\/a><\/h4>\n                            <h3 class=\"full_width_slide__title\">Teethes of the adept<\/h3>\n                            <p class=\"full_width_slide__subtitle\">\n                                Beautiful portfolios and end up worrying about the aesthetics of the portfolio more than the story itself                            <\/p>\n\n                                                                <div class=\"btn-generic\">\n                                        <a href=\"https:\/\/www.creativedial.in\/?portfolio=teethes-of-the-adept\">\n                                            <span class=\"animation-loaded\">\n                                                <span class=\"animation-loaded\">View Project<\/span>\n                                            <\/span>\n                                        <\/a>\n                                    <\/div><!-- .btn-generic -->\n                                                                                    <\/div>\n                    <\/div><!-- .col -->\n                <\/div><!-- .row.tracem-shrink -->\n            <\/div><!-- .container-fluid -->\n        <\/div>\n    <\/div>\n    <\/div><!-- \/slideshow -->\n<nav class=\"boxnav\">\n    <button class=\"boxnav__item boxnav__item--prev\">\n        <i class=\"fas fa-angle-left\"><\/i>\n    <\/button>\n    <div class=\"boxnav__item boxnav__item--label\">\n        <span class=\"boxnav__label boxnav__label--current\">1<\/span>\n        <span class=\"boxnav__label boxnav__label--total\"><\/span>\n    <\/div>\n    <button class=\"boxnav__item boxnav__item--next\">\n        <i class=\"fas fa-angle-right\"><\/i>\n    <\/button>\n<\/nav>\t    <script>\n\t        ;(function($){\n\t            \"use strict\";\n\t            $(document).ready(function () {\n\t\t\t\t\tif( document.querySelector('.full-width-slideshow') !== null )\n\t\t\t\t\t{\n\t\t\t\t\t    \/\/ The Slide (Product) class.\n\t\t\t\t\t    class Slide {\n\t\t\t\t\t        constructor(el, settings) {\n\t\t\t\t\t            this.DOM = {el: el};\n\t\t\t\t\t            \n\t\t\t\t\t            this.settings = {\n\t\t\t\t\t                detailsEl: null,\n\t\t\t\t\t                onHideDetails: () => {return false;}\n\t\t\t\t\t            }\n\t\t\t\t\t            Object.assign(this.settings, settings);\n\n\t\t\t\t\t            \/\/ The slide\u00b4s container.\n\t\t\t\t\t            this.DOM.wrap = this.DOM.el.querySelector('.full_width_slide__wrap');\n\t\t\t\t\t            \/\/ The image element.\n\t\t\t\t\t            this.DOM.img = this.DOM.wrap.querySelector('.full_width_slide__img');\n\t\t\t\t\t            \/\/ The title container.\n\t\t\t\t\t            this.DOM.titleWrap = this.DOM.wrap.querySelector('.full_width_slide__title-wrap');\n\n\t\t\t\t\t            \/\/ Some config values.\n\t\t\t\t\t            this.config = {\n\t\t\t\t\t                animation: {\n\t\t\t\t\t                    duration: 1.2,\n\t\t\t\t\t                    ease: Expo.easeInOut\n\t\t\t\t\t                }\n\t\t\t\t\t            };\n\t\t\t\t\t        }\n\t\t\t\t\t        \/\/ Sets the current class.\n\t\t\t\t\t        setCurrent(isCurrent = true) {\n\t\t\t\t\t            this.DOM.el.classList[isCurrent ? 'add' : 'remove']('slide--current');\n\t\t\t\t\t        }\n\t\t\t\t\t        \/\/ Hide the slide.\n\t\t\t\t\t        hide(direction) {\n\t\t\t\t\t            return this.toggle('hide', direction);\n\t\t\t\t\t        }\n\t\t\t\t\t        \/\/ Show the slide.\n\t\t\t\t\t        show(direction) {\n\t\t\t\t\t            this.DOM.el.style.zIndex = 10;\n\t\t\t\t\t            return this.toggle('show', direction);\n\t\t\t\t\t        }\n\t\t\t\t\t        \/\/ Show\/Hide the slide.\n\t\t\t\t\t        toggle(action, direction) {\n\t\t\t\t\t            return new Promise((resolve, reject) => {\n\t\t\t\t\t                \/\/ When showing a slide, the slide\u00b4s container will move 100% from the right or left depending on the direction.\n\t\t\t\t\t                \/\/ At the same time, both title wrap and the image will move the other way around thus creating the unreveal effect.\n\t\t\t\t\t                \/\/ Also, when showing or hiding a slide, we scale it from or to a value of 1.1.\n\t\t\t\t\t                if ( action === 'show' ) {\n\t\t\t\t\t                    TweenMax.to(this.DOM.wrap, this.config.animation.duration, {\n\t\t\t\t\t                        ease: this.config.animation.ease,\n\t\t\t\t\t                        startAt: {x: direction === 'right' ? '100%' : '-100%'},\n\t\t\t\t\t                        x: '0%'\n\t\t\t\t\t                    });\n\t\t\t\t\t                    TweenMax.to(this.DOM.titleWrap, this.config.animation.duration, {\n\t\t\t\t\t                        ease: this.config.animation.ease,\n\t\t\t\t\t                        startAt: {x: direction === 'right' ? '-100%' : '100%'},\n\t\t\t\t\t                        x: '0%'\n\t\t\t\t\t                    });\n\t\t\t\t\t                }\n\n\t\t\t\t\t                TweenMax.to(this.DOM.img, this.config.animation.duration, {\n\t\t\t\t\t                    ease: this.config.animation.ease,\n\t\t\t\t\t                    startAt: action === 'hide' ? {} : {x: direction === 'right' ? '-100%' : '100%', scale: 1.1},\n\t\t\t\t\t                    x: '0%',\n\t\t\t\t\t                    scale: action === 'hide' ? 1.1 : 1,\n\t\t\t\t\t                    onStart: () => {\n\t\t\t\t\t                        this.DOM.img.style.transformOrigin = action === 'hide' ? \n\t\t\t\t\t                                                                direction === 'right' ? '100% 50%' : '0% 50%':\n\t\t\t\t\t                                                                direction === 'right' ? '0% 50%' : '100% 50%';\n\t\t\t\t\t                        this.DOM.el.style.opacity = 1;\n\t\t\t\t\t                    },\n\t\t\t\t\t                    onComplete: () => {\n\t\t\t\t\t                        this.DOM.el.style.zIndex = 1;\n\t\t\t\t\t                        this.DOM.el.style.opacity = action === 'hide' ? 0 : 1;\n\t\t\t\t\t                        resolve();\n\t\t\t\t\t                    }\n\t\t\t\t\t                });\n\t\t\t\t\t            });\n\t\t\t\t\t        }\n\t\t\t\t\t    }\n\n\t\t\t\t\t    \/\/ The navigation class. Controls the .boxnav animations (e.g. pagination animation).\n\t\t\t\t\t    class Navigation {\n\t\t\t\t\t        constructor(el, settings) {\n\t\t\t\t\t            this.DOM = {el: el};\n\n\t\t\t\t\t            this.settings = {\n\t\t\t\t\t                next: () => {return false;},\n\t\t\t\t\t                prev: () => {return false;}\n\t\t\t\t\t            }\n\t\t\t\t\t            Object.assign(this.settings, settings);\n\n\t\t\t\t\t            \/\/ Navigation controls (prev and next)\n\t\t\t\t\t            this.DOM.prevCtrl = this.DOM.el.querySelector('.boxnav__item--prev');\n\t\t\t\t\t            this.DOM.nextCtrl = this.DOM.el.querySelector('.boxnav__item--next');\n\t\t\t\t\t            \/\/ The current and total pages elements.\n\t\t\t\t\t            this.DOM.pagination = {\n\t\t\t\t\t                current: this.DOM.el.querySelector('.boxnav__label--current'),\n\t\t\t\t\t                total: this.DOM.el.querySelector('.boxnav__label--total')\n\t\t\t\t\t            };\n\t\t\t\t\t            this.initEvents();\n\t\t\t\t\t        }\n\t\t\t\t\t        \/\/ Updates the current page element value.\n\t\t\t\t\t        \/\/ Animate the element up, update the value and finally animate it in from bottom up.\n\t\t\t\t\t        setCurrent(val, direction) {\n\t\t\t\t\t            \/\/this.DOM.pagination.current.innerHTML = val;\n\t\t\t\t\t            TweenMax.to(this.DOM.pagination.current, 0.4, {\n\t\t\t\t\t                ease: 'Back.easeIn',\n\t\t\t\t\t                y: direction === 'right' ? '-100%' : '100%',\n\t\t\t\t\t                opacity: 0,\n\t\t\t\t\t                onComplete: () => {\n\t\t\t\t\t                    this.DOM.pagination.current.innerHTML = val;\n\t\t\t\t\t                    TweenMax.to(this.DOM.pagination.current, 0.8, {\n\t\t\t\t\t                        ease: 'Expo.easeOut',\n\t\t\t\t\t                        startAt: {y: direction === 'right' ? '50%' : '-50%', opacity: 0},\n\t\t\t\t\t                        y: '0%',\n\t\t\t\t\t                        opacity: 1\n\t\t\t\t\t                    });    \n\t\t\t\t\t                }\n\t\t\t\t\t            });\n\t\t\t\t\t        }\n\t\t\t\t\t        \/\/ Sets the total pages value.\n\t\t\t\t\t        setTotal(val) {\n\t\t\t\t\t            this.DOM.pagination.total.innerHTML = val;\n\t\t\t\t\t        }\n\t\t\t\t\t        \/\/ Initialize the events on the next\/prev controls.\n\t\t\t\t\t        initEvents() {\n\t\t\t\t\t            this.DOM.prevCtrl.addEventListener('click', () => this.settings.prev());\n\t\t\t\t\t            this.DOM.nextCtrl.addEventListener('click', () => this.settings.next());\n\t\t\t\t\t        }\n\t\t\t\t\t    }\n\n\t\t\t\t\t    \/\/ The Slideshow class.\n\t\t\t\t\t    class Slideshow {\n\t\t\t\t\t        constructor(el) {\n\t\t\t\t\t            this.DOM = {el: el};\n\t\t\t\t\t            \/\/ Initialize the navigation instance. When clicking the next or prev ctrl buttons, trigger the navigate function.\n\t\t\t\t\t            this.navigation = new Navigation(document.querySelector('.boxnav'), {\n\t\t\t\t\t                next: () => this.navigate('right'),\n\t\t\t\t\t                prev: () => this.navigate('left')\n\t\t\t\t\t            });\n\t\t\t\t\t            \/\/ The slides.\n\t\t\t\t\t            this.slides = [];\n\t\t\t\t\t            \/\/ Initialize\/Create the slides instances.\n\t\t\t\t\t            Array.from(this.DOM.el.querySelectorAll('.full-width-slide')).forEach((slideEl,pos) => this.slides.push(new Slide(slideEl, {\n\t\t\t\t\t                \/\/ When clicking the close details ctrl button call the closeDetailsBoxes function.\n\t\t\t\t\t                onHideDetails: () => {\n\t\t\t\t\t                    if ( this.isAnimating ) return;\n\t\t\t\t\t                    this.isAnimating = true;\n\t\t\t\t\t                    this.closeDetailsBoxes().then(() => this.isAnimating = false);\n\t\t\t\t\t                }\n\t\t\t\t\t            })));\n\t\t\t\t\t            \/\/ The total number of slides.\n\t\t\t\t\t            this.slidesTotal = this.slides.length;\n\t\t\t\t\t            \/\/ Set the total number of slides in the navigation box.\n\t\t\t\t\t            this.navigation.setTotal(this.slidesTotal);\n\t\t\t\t\t            \/\/ At least 2 slides to continue...\n\t\t\t\t\t            if ( this.slidesTotal < 2 ) {\n\t\t\t\t\t                return false;\n\t\t\t\t\t            }\n\t\t\t\t\t            \/\/ Current slide position.\n\t\t\t\t\t            this.current = 0;\n\t\t\t\t\t            \/\/ Initialize the slideshow.\n\t\t\t\t\t            this.init();\n\t\t\t\t\t        }\n\t\t\t\t\t        \/\/ Set the current slide and initialize some events.\n\t\t\t\t\t        init() {\n\t\t\t\t\t            this.slides[this.current].setCurrent();\n\t\t\t\t\t        }\n\n\t\t\t\t\t        closeDetailsBoxes() {\n\t\t\t\t\t            return new Promise((resolve, reject) => {\n\t\t\t\t\t                resolve()\n\t\t\t\t\t            });\n\t\t\t\t\t        }\n\t\t\t\t\t        \/\/ Navigate the slideshow.\n\t\t\t\t\t        navigate(direction) {\n\t\t\t\t\t            \/\/ If animating return.\n\t\t\t\t\t            if ( this.isAnimating ) return;\n\t\t\t\t\t            this.isAnimating = true;\n\n\t\t\t\t\t            \/\/ The next\/prev slide\u00b4s position.\n\t\t\t\t\t            const nextSlidePos = direction === 'right' ? \n\t\t\t\t\t                    this.current < this.slidesTotal-1 ? this.current+1 : 0 :\n\t\t\t\t\t                    this.current > 0 ? this.current-1 : this.slidesTotal-1;\n\n\t\t\t\t\t            \/\/ Close the details boxes (if open) and then hide the current slide and show the next\/previous one.\n\t\t\t\t\t            this.closeDetailsBoxes().then(() => {\n\t\t\t\t\t                \/\/ Update the current page element.\n\t\t\t\t\t                this.navigation.setCurrent(nextSlidePos+1, direction);\n\t\t\t\t\t                \n\t\t\t\t\t                Promise.all([this.slides[this.current].hide(direction), this.slides[nextSlidePos].show(direction)])\n\t\t\t\t\t                       .then(() => {\n\t\t\t\t\t                            \/\/ Update current.\n\t\t\t\t\t                            this.slides[this.current].setCurrent(false);\n\t\t\t\t\t                            this.current = nextSlidePos;\n\t\t\t\t\t                            this.slides[this.current].setCurrent();\n\t\t\t\t\t                            this.isAnimating = false;\n\t\t\t\t\t                       });\n\t\t\t\t\t            });\n\t\t\t\t\t        }\n\t\t\t\t\t    }\n\n\t\t\t\t\t    \/\/ Initialize the slideshow\n\t\t\t\t\t    const slideshow = new Slideshow(document.querySelector('.full-width-slideshow'));\n\t\t\t\t\t    \/\/ Preload all the images..\n\t\t\t\t\t    imagesLoaded(document.querySelectorAll('.full_width_slide__img'), {background: true}, () => document.body.classList.remove('loading'));\n\t\t\t\t\t}\n\t            });\n\t        })(jQuery)\n\t    <\/script>\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<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Design Intro Madcap coffee company We publish a very broad range of fiction and non-fiction international and local books View Project Design Scope Nutshell of design I realized that it wasn\u2019t the amount of work that scares me, but it\u2019s\u00a0these factors instead View Project Design Factory Horses of skull I get caught up in looking<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-1927","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativedial.in\/index.php?rest_route=\/wp\/v2\/pages\/1927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativedial.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.creativedial.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativedial.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativedial.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1927"}],"version-history":[{"count":0,"href":"https:\/\/www.creativedial.in\/index.php?rest_route=\/wp\/v2\/pages\/1927\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.creativedial.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}