Skip Navigation

[Resolved] Slider not working

This support ticket is created 6 years, 8 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 8 replies, has 2 voices.

Last updated by Eric De Paep 6 years, 8 months ago.

Assisted by: Luo Yang.

Author
Posts
#552691
Screenshot_1.jpg

Hi,

I got one issue and one question.

My issue:

I am trying to: create a slider with images from a custom post type. I followed the instructions in the training course Part 5 – Sliders.

I expected to see: the next-previous navigation and one image at the same time

Instead, I got: no navigation and all images appear one after the other like on the attached screenshot.

My question:

I wonder if it is possible to create a layout for the images like this one: hidden link

As you can see, when you click on a thumbnail, the image in the main image frame changes. I didn't see this in the Toolset demos.

Thanks.

#552855

Dear Eric,

You are right, there isn't such a built-in feature within Views plugin, but it is possible with some JS codes, see the live demo:
hidden link

and similar thread:
https://toolset.com/forums/topic/custom-image-fields-child-type-create-slider/

For your reference.

#553022
slider-settings.jpg

Hi Luo,

Thanks for your help. I followed the thread you referred to in your reply but I still can't get it to work.

I added the jQuery Cycle Plugin to my child theme. That seems to work. But I have some problems with the view settings.

I tried to implement the settings from this thread: https://toolset.com/forums/topic/jquery-cycle-for-use-with-images-in-a-singe-post/. But no images appear when I use these settings. When I modify the query options and uncheck "Don't include current page in query results" I see my pictures but they still appear one after the other.

Could you take a look at my view settings in the attached image?

And here is my code:

For the filter editor:

[wpv-filter-start hide="false"]
[wpv-filter-controls][/wpv-filter-controls]
[wpv-pagination][wpv-pager-current-page style="link"][/wpv-pagination]
[wpv-filter-end]

For the Loop Output Editor:

 [wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
		[wpv-post-body view_template="Car slider - slide"]
	</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]

For the View template:

<div id="the_images">
[wpv-for-each field="wpcf-image"]
[types field="image" id=""][/types] 
[/wpv-for-each]
</div>

JS editor:

js jQuery('#the_images').cycle('fade');

Thanks.

#553073

I wonder if the thread you mentioned is still up to date. So I also tried to set up a simple slideshow like described here: hidden link

I added the jquery.min.js script that was missing in the header and modified the content template like this:

<div id="cycle-2" class="cycle-slideshow">
[wpv-for-each field="wpcf-image"]
[types field="image" id=""][/types] 
[/wpv-for-each]
</div>

I checked the source code of my webiste. It should work but it doesn't. The pictures are still one after the other.

#553281

Since it needs custom codes, please provide a test site with same problem, fill below private detail box with login details, also point out the problem page URL and view URL, I can setup a demo for you. thanks

#553510
#553715

I tried the login URL you provided above, but it redirect me to another:
hidden link

and I get this error message:

Welkom bij Car Selection
Car selection in Eppegem (Zemst) is gespecialiseerd in de verkoop van recente tweedehandswagens met garantie.

We werken aan een nieuwe website. Meer informatie en onze stocklijst vindt u ondertussen op onze oude website:

Please check it, make sure I can login your website with the credentials you provided, thanks

#553814

Hi,

Strange. I don't get redirected when I try to access the admin. Be sure to use the exact access url provided. Please note there's a maintenance page. You should login first, not to be redirected to the "error message".

Thanks

#553837

Thanks for the details, I can login your website, since there is a character problem with the Cycle2 JS codes, so I tried another JS frame work in your website:
https://woocommerce.com/flexslider/

See the result page:
hidden link

Here is the detail steps:
1) Edit the PHP codes in your theme/functions.php as below:

function add_cycle_slider_js() {
	wp_enqueue_script( 'flexslider-js', '<em><u>hidden link</u></em>', array( 'jquery' )); 
	wp_enqueue_style( 'flexslider-css', '<em><u>hidden link</u></em>');
}

add_action( 'wp_enqueue_scripts', 'add_cycle_slider_js' );

2) Edit the layout, replace the view cell with a content template cell, with below codes:

<!-- Place somewhere in the <body> of your page -->
<div id="slider" class="flexslider">
  <ul class="slides">
      	[wpv-for-each field="wpcf-image"]
			<li>[types field="image" id="" size="large"][/types]</li>
		[/wpv-for-each]
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
      	[wpv-for-each field="wpcf-image"]
			<li>[types field="image" id="" size="thumbnail"][/types]</li>
		[/wpv-for-each]
    <!-- items mirrored twice, total of 12 -->
  </ul>
</div>

And with below JS codes:

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

});

Please test again, check if it is fixed or not. thanks

#553928

Hi,

Great. This slider script works perfectly.

Thanks.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.