[Resolved] Display featured image with slider pagination

[Author]

Posts

[kelvinL-2]

Dear Sir/Madam,

I want to show every 3 images per slider. Below is the setting I did

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop wrap="3" pad="true">
		[wpv-item index=1]
		<div class="container ">
			<div class="col-4 col-narrow">[wpv-post-body view_template="Loop item in Merchant Brands Slider"]</div>
		[wpv-item index=other]
			<div class="col-4 col-narrow">[wpv-post-body view_template="Loop item in Merchant Brands Slider"]</div>
		[wpv-item index=3]
			<div class="col-4 col-narrow">[wpv-post-body view_template="Loop item in Merchant Brands Slider"]</div>
		</div>
		[wpv-item index=pad]
			<div class="col-4"></div>
		[wpv-item index=pad-last]
			<div class="col-4"></div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

CSS

.col-narrow {
  padding-right: 5px !important;
  padding-left: 5px !important;
}

Loop item in Merchant Brands Slider

[wpv-post-featured-image class="brand-img"]

CSS

.brand-img {
  max-width: 100%;
  height: auto;
}

Attached screenshots is the pagination setting and the result

The first 3 images are shown properly but don't know why the 4th and 5th images on 2nd sliders are moved up.

You can view the result from hidden link

[Shane]

Hi Kelvin,

Thank you for contacting our support forum.

I took a look at this for you and everything seems to be working normally.

Were you able to resolve this issue.

Please let me know.

Thanks,
Shane

[kelvinL-2]

Dear Shane,

Sorry, I can't solve the issue. You may need to visit the page hidden link to see the issue.

I also capture the issue and put it on Youtube hidden link

Please take a look at the slider from the bottom-right of the screen. You will see the 2nd slider, the logos were moved up.

I try adding the View in the post body but there is no such issue, is there any problem with the widget for a slider?

Best regards,

Kelvin

[Shane]

Hi Kelvin,

Could I get admin access to the site so that I can assist better with this ?

The private fields have been enabled for your next response.

Thanks,
Shane

[Shane]

Hi Kelvin,

It seems to be that an empty p tag is being added to the slider in the text widget so it might be a theme issue. However you can add this to your view and it will remove the empty p tag.

jQuery('p').each(function() {
    var $this = jQuery(this);
    if($this.html().replace(/\s| /g, '').length == 0)
        $this.remove();
});

Please let me know if this helps.
Thanks,
Shane

[kelvinL-2]

Dear Shane,

Where should I add the code, Filter Editor's JS Editor, Loop Output Editor's JS Editor, the Loop item in Merchant Brands Slider's JS Editor? I added to Loop Output Editor but no different to the issue.

best regards,

Kelvin.

[Shane]

Hi Kelvin,

The code is placed in the right position.

However if you look at the view that you did for the test you can see that the code works fine there.

What you can do is to use this view as the main slider view.

Thanks,
Shane