0

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?

  • are you sure jquery.flipster.min.js include in your site after jquery.js? – Devendra Sharma Sep 12 '18 at 7:41
  • jquery.js include after jquery.flipster.min.js – Rakesh Patidar Sep 12 '18 at 8:13
  • You have to include fist jquery.js then jquery.flipster.min.js. – Devendra Sharma Sep 12 '18 at 8:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.