{"id":3960,"date":"2020-03-17T20:28:37","date_gmt":"2020-03-18T03:28:37","guid":{"rendered":"https:\/\/codedcommerce.com\/product\/import-placeholder-for-207\/"},"modified":"2024-04-10T20:50:13","modified_gmt":"2024-04-11T03:50:13","slug":"flexslider-animations","status":"publish","type":"woo-code","link":"https:\/\/codedcommerce.com\/woo\/flexslider-animations\/","title":{"rendered":"FlexSlider slider gallery HTML elements"},"content":{"rendered":"\n<pre class=\"wp-block-code language-php\"><code>add_action( 'wp_enqueue_scripts', function() {\n\n\twp_enqueue_style(\n\t\t'flexslider',\n\t\t'\/\/cdnjs.cloudflare.com\/ajax\/libs\/flexslider\/2.7.2\/flexslider.min.css'\n\t);\n\n\twp_enqueue_script( 'jquery' );\n\n\twp_enqueue_script(\n\t\t'flexslider',\n\t\t'\/\/cdnjs.cloudflare.com\/ajax\/libs\/flexslider\/2.7.2\/jquery.flexslider-min.js',\n\t\t&#91; 'jquery' ]\n\t);\n\n\twp_add_inline_script( 'jquery', '\n\n\t\tjQuery( document ).ready( function( $ ) {\n\n\t\t\tvar slider1 = $( \".flexslider\" );\n\n\t\t\tslider1.flexslider( {\n\t\t\t\tanimation: \"slide\",\n\t\t\t\tanimationLoop: false,\n\t\t\t\titemWidth: 300,\n\t\t\t\titemMargin: 36,\n\t\t\t\tminItems: 1,\n\t\t\t\tmaxItems: 3\n\t\t\t} );\n\n\t\t\t$( window ).resize( function() {\n\t\t\t\tslider1.resize();\n\t\t\t} );\n\n\t\t} );\n\n\t', 'after' );\n\n} );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">I also recommend placing a CSS rule inside WP Admin &gt; Appearance &gt; Customizer &gt; CSS to hide all but the first slide during page load:<\/p>\n\n\n\n<pre class=\"wp-block-code language-php\"><code>.flexslider .wp-block-cover:not( :first-child ) {\n\tdisplay: none;\n}<\/code><\/pre>\n","protected":false},"template":"","class_list":["post-3960","woo-code","type-woo-code","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/codedcommerce.com\/wp-json\/wp\/v2\/woo-code\/3960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codedcommerce.com\/wp-json\/wp\/v2\/woo-code"}],"about":[{"href":"https:\/\/codedcommerce.com\/wp-json\/wp\/v2\/types\/woo-code"}],"wp:attachment":[{"href":"https:\/\/codedcommerce.com\/wp-json\/wp\/v2\/media?parent=3960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}