Multiple flexsliders on 1 page

• zarina

• November 23, 2022 at 12:54 pm

Hello, I created a Flexslider with thumbs carousel using repeater for custom single post, that should be shown with others posts on some category page. It works fine when its just 1 flexslider on the page, but when I add more posts with slider, just the last one appears, and others are not. Is there any hook to working all sliders on one page?

Here php:

<section class="portfolio-section">
    <div class="container">
		<h1><?php single_post_title() ?></h1>
        <?php $args = array('post_type' => 'work', 
                   'posts_per_page' => 50,);
        $property = new WP_Query( $args );
        if( $property->have_posts() ) : ?>
            <?php while( $property->have_posts() ) :
                $property->the_post();
                // тут выводим пост ?>
        <div class="portfolio-item">
           <div class="portfolio-image">
                <?php the_post_thumbnail('full'); ?>
			<div class="galery-work">
				<?php if (have_rows('grid_img')): ?>
				<div class="grid_img">
				<?php	while(have_rows('grid_img')) : the_row();
						
						$image = get_sub_field('image'); ?>
						<img />" alt="" />
				<?php endwhile; ?>
			  </div>
			  <?php endif; ?>
				
			</div>
            </div>

 
js

$(window).on('load', function() {
  // The slider being synced must be initialized first
  $('#carousel').flexslider({
    animation: "slide",
    direction: 'vertical',
    controlNav: false,
    animationLoop: true,
    slideshow: true,
    itemWidth: 150,
    itemMargin: 5,
    asNavFor: '#slider'
  });
 
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: true,
    slideshow: true,
    sync: "#carousel"
  });
});

Screenshot-a....png

• John Huebner

• December 5, 2022 at 1:02 pm

You are using an ID to target in jQuery. I’m guessing that you have multiple html elements with the same ID (#carousel, #slider). ID attribute values must be unique on a page. I would try to use a classes instead of IDs when using multiples on the same page.