<script>
    function aw_disappear_callback() {
        jQuery('.awelement').removeAttr('style');
        jQuery('.awelement').css({
            position: 'absolute',
            left: '40%',
            top: '75px',
            width: '250px',
            height: 'auto'
        });
    }
jQuery(document).ready(function() {
    
    jQuery('#aw_bgcontainer').height(450);
    
    jQuery('.awelement').css({
        position: 'absolute',
        left: '40%',
        top: '75px',
        width: '250px',
        height: 'auto'
    });
    
    jQuery('.awapply_button').click(function() {
        jQuery('.awelement').removeAttr('style');
        jQuery('.awelement').css({
            position: 'absolute',
            left: '40%',
            top: '75px',
            width: '250px',
            height: 'auto'
        });
        if(jQuery('#aw_disappear_check').is(':checked')) {
            jQuery('.awelement')['aw_disappear'+jQuery('#aw_effects_box option:selected').attr('value')]({easingtime: 500, callback: aw_disappear_callback});
        }else {
            jQuery('.awelement')['aw_appear'+jQuery('#aw_effects_box option:selected').attr('value')]({easingtime: 500});
        }
    });

    jQuery('.awapply_next').click(function() {
        if(jQuery('#aw_effects_box option:selected').index() == jQuery('#aw_effects_box option').length-1) {
            jQuery('#aw_effects_box option:first').attr('selected', 'selected');
        }else {
            jQuery('#aw_effects_box option:selected').next().attr('selected', 'selected');
        }
        jQuery('.awapply_button').click();
    });

    jQuery('.awapply_prev').click(function() {
        if(jQuery('#aw_effects_box option:selected').index() == 0) {
            jQuery('#aw_effects_box option:last').attr('selected', 'selected');
        }else {
            jQuery('#aw_effects_box option:selected').prev().attr('selected', 'selected');
        }
        jQuery('.awapply_button').click();
    });
});  
</script>
<div id="aw_bgcontainer" class="awesomeslider">
    <div class="awelements">
        <div class="awelement">
            <img src="http://webzotech.com/awesomeslider/wp-content/uploads/2014/05/lady2.png" />
        </div>
    </div>
<div class="awesomebg"></div>
</div>
<div class="awbgactions">
    Effects : 
    <select id="aw_effects_box">
                <option value="fade">Fade</option>
                <option value="left">Left</option>
                <option value="right">Right</option>
                <option value="top">Top</option>
                <option value="bottom">Bottom</option>
                <option value="blind">Blind</option>
                <option value="bounce">Bounce</option>
                <option value="clip">Clip</option>
                <option value="explode">Explode</option>
                <option value="puff">Puff</option>
                <option value="scale">Scale</option>
                <option value="fliptopin">Fliptopin</option>
                <option value="fliptopout">Fliptopout</option>
                <option value="flipbottomout">Flipbottomout</option>
                <option value="flipbottomin">Flipbottomin</option>
                <option value="flipleftin">Flipleftin</option>
                <option value="flipleftout">Flipleftout</option>
                <option value="fliprightout">Fliprightout</option>
                <option value="fliprightin">Fliprightin</option>
                <option value="rotatetopright">Rotatetopright</option>
                <option value="rotatetopleft">Rotatetopleft</option>
                <option value="rotatebottomleft">Rotatebottomleft</option>
                <option value="rotatebottomright">Rotatebottomright</option>
                <option value="rotateleft">Rotateleft</option>
                <option value="rotateright">Rotateright</option>
                <option value="flytop">Flytop</option>
                <option value="flybottom">Flybottom</option>
            </select>
    <a href="javascript: void(0);" class="awbutton awapply_button">Apply</a>
    <a href="javascript: void(0);" class="awbutton awapply_prev">&lt;&lt;Prev</a>
    <a href="javascript: void(0);" class="awbutton awapply_next">Next &gt;&gt;</a>
    &nbsp;
    <input type="checkbox" id="aw_disappear_check" /> <label for="aw_disappear_check">Disappear</label>
</div>
<br /><br />{"id":13,"date":"2014-05-13T17:34:50","date_gmt":"2014-05-13T12:04:50","guid":{"rendered":"http:\/\/webzotech.com\/awesomeslider\/?page_id=13"},"modified":"2014-05-13T18:23:22","modified_gmt":"2014-05-13T12:53:22","slug":"cool-effects","status":"publish","type":"page","link":"https:\/\/webzotech.com\/awesomeslider\/cool-effects\/","title":{"rendered":"Cool Effects"},"content":{"rendered":"\n<h1>3 Level Layout Control for Multiple Devices &#8211; Desktop, Tablet &amp; Mobile<\/h1>\n<p><b><img loading=\"lazy\" class=\"alignright size-full wp-image-73\" src=\"http:\/\/webzotech.com\/awesomeslider\/wp-content\/uploads\/2014\/05\/elementsettings.png\" alt=\"elementsettings\" width=\"500\" height=\"283\" srcset=\"https:\/\/webzotech.com\/awesomeslider\/wp-content\/uploads\/2014\/05\/elementsettings.png 500w, https:\/\/webzotech.com\/awesomeslider\/wp-content\/uploads\/2014\/05\/elementsettings-300x169.png 300w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/>Awesome Slider<\/b> gives the freedom to apply different appearance \/ disappearance effect for three different devices.<\/p>\n<p>For example you may want to show a 3D effect in Desktops with higher resolution<br \/>\nand simple transitions effects like &#8216;Fade&#8217; or &#8216;Slide&#8217; in Tablets and Mobiles.<br \/>\nIt&#8217;s easily doable using <b>Awesome Slider<\/b>.<\/p>\n<p>It supports almost all popular browsers i,e IE8+, Mozilla, Chrome, Safari, Opera.<\/p>\n<p>IE8 &amp; IE9 does not support some 3D effects, in this case &#8216;Fade&#8217; effect is<br \/>\nautomatically applied.<\/p>\n<p>You can define different element properties for different devices. Also you can hide a particular element in a particular device. For example you want to show video in Desktop and Tablet, hide in Mobiles. You can do it. This is applicable for all elements.<\/p>\n<p>The slider is built with Drag and Resize events. The powerful backend and creative layer management minimizes the use of Keyboard \ud83d\ude09<\/p>\n<p><b>Awesome Slider<\/b> comes with inbuilt CSS editor. The parallax effect options makes the slider really awesome.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>3 Level Layout Control for Multiple Devices &#8211; Desktop, Tablet &amp; Mobile Awesome Slider gives the freedom to apply different appearance \/ disappearance effect for three different devices. For example you may want to show a 3D effect in Desktops with higher resolution and simple transitions effects like &#8216;Fade&#8217; or &#8216;Slide&#8217; in Tablets and Mobiles. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/page-full-width.php","meta":[],"_links":{"self":[{"href":"https:\/\/webzotech.com\/awesomeslider\/wp-json\/wp\/v2\/pages\/13"}],"collection":[{"href":"https:\/\/webzotech.com\/awesomeslider\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webzotech.com\/awesomeslider\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webzotech.com\/awesomeslider\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webzotech.com\/awesomeslider\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":3,"href":"https:\/\/webzotech.com\/awesomeslider\/wp-json\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":74,"href":"https:\/\/webzotech.com\/awesomeslider\/wp-json\/wp\/v2\/pages\/13\/revisions\/74"}],"wp:attachment":[{"href":"https:\/\/webzotech.com\/awesomeslider\/wp-json\/wp\/v2\/media?parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}