<script>
jQuery(document).ready(function() {
    var csss = [];
        
        csss.push({width: '100%',
            height: '400px',
            background: 'url(\'http://webzotech.com/awesomeslider/wp-content/uploads/2014/05/photodune-4179640-background-m.jpg\') no-repeat 0% 0%'});
        
        csss.push({width: '100%',
            height: '400px',
            background: 'url(\'http://webzotech.com/awesomeslider/wp-content/uploads/2014/05/photodune-2909614-background-m.jpg\') no-repeat 0% 0%'});
        
        csss.push({width: '100%',
            height: '400px',
            background: 'url(\'http://webzotech.com/awesomeslider/wp-content/uploads/2014/05/photodune-996336-background-m.jpg\') no-repeat 0% 0%'});
        
        csss.push({width: '100%',
            height: '400px',
            background: 'url(\'http://webzotech.com/awesomeslider/wp-content/uploads/2014/05/photodune-2909557-background-m.jpg\') no-repeat 0% 0%'});
        
        
        var awcurrent = 0;
        jQuery('#aw_bgcontainer').height(400);
        jQuery('.awesomebg').css(csss[awcurrent]);
        
        jQuery('.awapply_button').click(function() {
            awcurrent++;
            if(awcurrent>=csss.length) {
                awcurrent = 0;
            }
            jQuery('.awesomebg')['aw_'+jQuery('#aw_effects_box option:selected').attr('value')](csss[awcurrent], {});
        });
        
        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="aw_bgcontainer">
<div class="awesomebg"></div>
</div>
<div class="awbgactions">
    Transitions : 
    <select id="aw_effects_box">
                <option value="fade">Fade</option>
                <option value="slidein_left">Slidein_left</option>
                <option value="slidein_right">Slidein_right</option>
                <option value="slidein_top">Slidein_top</option>
                <option value="slidein_bottom">Slidein_bottom</option>
                <option value="slideout_bottom">Slideout_bottom</option>
                <option value="slideout_top">Slideout_top</option>
                <option value="slideout_left">Slideout_left</option>
                <option value="slideout_right">Slideout_right</option>
                <option value="cubefall">Cubefall</option>
                <option value="rowsfall_left">Rowsfall_left</option>
                <option value="rowsfall_right">Rowsfall_right</option>
                <option value="tworows">Tworows</option>
                <option value="rotatefall">Rotatefall</option>
                <option value="fallup">Fallup</option>
                <option value="scaleup">Scaleup</option>
                <option value="falldown">Falldown</option>
                <option value="fallbottom">Fallbottom</option>
                <option value="falltop">Falltop</option>
                <option value="rowbreak">Rowbreak</option>
                <option value="twocols">Twocols</option>
                <option value="colsfade">Colsfade</option>
                <option value="rowsfade">Rowsfade</option>
                <option value="downfade">Downfade</option>
                <option value="rowsfall">Rowsfall</option>
                <option value="tube">Tube</option>
                <option value="cubedissolve">Cubedissolve</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>
</div>
<br /><br />{"id":15,"date":"2014-05-13T17:35:25","date_gmt":"2014-05-13T12:05:25","guid":{"rendered":"http:\/\/webzotech.com\/awesomeslider\/?page_id=15"},"modified":"2014-05-13T18:22:11","modified_gmt":"2014-05-13T12:52:11","slug":"background-transitions","status":"publish","type":"page","link":"https:\/\/webzotech.com\/awesomeslider\/background-transitions\/","title":{"rendered":"Background Transitions"},"content":{"rendered":"\n<h1>3 Level Transitions for Multiple Devices &#8211; Desktop, Tablet &amp; Mobile<\/h1>\n<p><img loading=\"lazy\" class=\"alignleft size-full wp-image-71\" src=\"http:\/\/webzotech.com\/awesomeslider\/wp-content\/uploads\/2014\/05\/bgsettings.png\" alt=\"bgsettings\" width=\"400\" height=\"335\" srcset=\"https:\/\/webzotech.com\/awesomeslider\/wp-content\/uploads\/2014\/05\/bgsettings.png 400w, https:\/\/webzotech.com\/awesomeslider\/wp-content\/uploads\/2014\/05\/bgsettings-300x251.png 300w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><b>Awesome Slider<\/b> gives the freedom to apply different background transitions for three different devices. It&#8217;s truly responsive.<\/p>\n<p>For example you may want to show a 3D transition in Desktops with higher resolution and simple transitions effects like &#8216;Fade&#8217; or &#8216;Slide&#8217; in Tablets and Mobiles. It&#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 automatically applied.<\/p>\n<p>You can define different heights for different devices. Also you can disable the mobile or tablet layout. It will use the default desktop mode in all devices.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>3 Level Transitions for Multiple Devices &#8211; Desktop, Tablet &amp; Mobile Awesome Slider gives the freedom to apply different background transitions for three different devices. It&#8217;s truly responsive. For example you may want to show a 3D transition 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\/15"}],"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=15"}],"version-history":[{"count":3,"href":"https:\/\/webzotech.com\/awesomeslider\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":72,"href":"https:\/\/webzotech.com\/awesomeslider\/wp-json\/wp\/v2\/pages\/15\/revisions\/72"}],"wp:attachment":[{"href":"https:\/\/webzotech.com\/awesomeslider\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}