I have used jquery flister plugin in WordPress child theme. But getting Uncaught TypeError: jQuery(...).flipster is not a function.
I have added flister js and css file in function.php Like:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);
function theme_enqueue_styles() {
wp_enqueue_script( 'parent-style1', get_stylesheet_directory_uri() . '/slider/jquery.flipster.min.js', array('jquery') );
wp_enqueue_script( 'parent-style2', get_stylesheet_directory_uri() . '/slider/jquery.min.js', array('jquery') );
wp_enqueue_style( 'parent-style3', get_stylesheet_directory_uri() . '/slider/jquery.flipster.min.css' );
}
I have added html code in custom template page Like :
<h2>Flipster Flat</h2>
<div id="flat">
<ul>
<li data-flip-title="Red">
<img src="img/text1.gif">
</li>
<li data-flip-title="Razzmatazz" data-flip-category="Purples">
<img src="img/text2.gif">
</li>
<li data-flip-title="Deep Lilac" data-flip-category="Purples">
<img src="img/text3.gif">
</li>
<li data-flip-title="Daisy Bush" data-flip-category="Purples">
<img src="img/text4.gif">
</li>
<li data-flip-title="Cerulean Blue" data-flip-category="Blues">
<img src="img/text5.gif">
</li>
<li data-flip-title="Dodger Blue" data-flip-category="Blues">
<img src="img/text6.gif">
</li>
<li data-flip-title="Cyan" data-flip-category="Blues">
<img src="img/text7.gif">
</li>
<li data-flip-title="Robin's Egg" data-flip-category="Blues">
<img src="img/text8.gif">
</li>
<li data-flip-title="Deep Sea" data-flip-category="Greens">
<img src="img/text9.gif">
</li>
<li data-flip-title="Apple" data-flip-category="Greens">
<img src="img/text10.gif">
</li>
</ul>
</div>
<script>
var flat = jQuery("#flat").flipster({
style: 'flat',
spacing: -0.25
});
</script>
I have done all process but not a success.
How to fix this problem?