Flex slider integration

  • Resolved nathanrobjohn

    (@nathanrobjohn)


    11 years, 9 months ago

    Hi Guys,

    I am creating a site for a client and running into a problem, client requires a different slider on multiple pages. so i have created a new post type called sliders with support for thumbnail and title. then created 4 categories Home, Residential, Commercial and Roof.

    i have called in my jquery files for flex slider.

    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/flexslider.css" type="text/css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script src="<?php echo get_template_directory_uri(); ?>/jquery.flexslider.js"></script>
		<script src="<?php echo get_template_directory_uri(); ?>/jquery.flexslider-min.js"></script>

    Before wp_head
    and jquery and files are linking fine.
    and my code in the template looks like this.

    <div class="flexslider">
	<ul class="slides">
	<?php
	query_posts(array('post_type'=>'Sliders', 'category_name' => 'Residential'));
	if(have_posts()) :
	    while(have_posts()) : the_post();
	?>
	  <li>
		<?php the_post_thumbnail(); ?>
		<p class="flex-caption"><?php the_title(); ?></p>
	  </li>
	<?php
	    endwhile;
	endif;
	wp_reset_query();
	?>
	</ul>
  </div>

    For some reason the slider is not working? its only showing the background of flex slider and i cannot figure out why any help would be great.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Are you using a browser developer tool like Firebug to see your browser’s console log? If so, any errors?

    Thread Starter nathanrobjohn

    (@nathanrobjohn)

    Yes i am and no their is no errors showing i am using googles

    Thread Starter nathanrobjohn

    (@nathanrobjohn)

    Sorry im getting one error

    Uncaught TypeError: Object [object Object] has no method ‘flexslider’ localhost/:49
    (anonymous function) localhost/:49
    x.event.dispatch jquery.min.js:5
    v.handle

    i have called in my jquery files for flex slider.

    Why aren’t you enqueueing these files?

    Thread Starter nathanrobjohn

    (@nathanrobjohn)

    i will be enqueueing them but i want to make sure it works properly first is that ok?

    Catch 22! If you do not enqueue them, then they may not work properly.

    Thread Starter nathanrobjohn

    (@nathanrobjohn)

    Thanks guys! got it working by enqueue them didn’t know it was necessary now.

    final code it anyone needs it.

    <?php wp_enqueue_script('flex_header'); ?>
    <script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
	directionNav: "true"
	});
  });
</script>
    function flex_header() {

    //wp_enqueue_script('jquery');

    wp_register_script( 'add-flex-js', get_template_directory_uri() . '/jquery.flexslider.js', array('jquery'),'',true  );
    wp_register_script( 'add-flex-custom-js', get_template_directory_uri() . '/jquery.flexslider-min.js', '', null,''  );
    wp_register_style( 'add-flex-css', get_template_directory_uri() . '/flexslider.css','','', 'screen' );

    wp_enqueue_script( 'add-flex-js' );
    wp_enqueue_script( 'add-flex-custom-js' );
    wp_enqueue_style( 'add-flex-css' );

}

add_action( 'wp_enqueue_scripts', 'flex_header' );
    <div class="flexslider">
	<ul class="slides">
	<?php
	query_posts(array('post_type'=>'Slider', 'category_name' => 'Residential'));
	if(have_posts()) :
	    while(have_posts()) : the_post();
	?>
	  <li>
		<?php the_post_thumbnail(); ?>
		<p class="flex-caption"><?php the_title(); ?></p>
	  </li>
	<?php
	    endwhile;
	endif;
	wp_reset_query();
	?>
	</ul>
  </div>

    Thank you so much for your help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Flex slider integration’ is closed to new replies.