[Gelöst] Slider not working

[Author]

Artikel

[Eric De Paep]

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: versteckter 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.

[Luo Yang]

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:
versteckter Link

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

For your reference.

[Eric De Paep]

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.

[Eric De Paep]

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: versteckter 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.

[Luo Yang]

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

[Luo Yang]

I tried the login URL you provided above, but it redirect me to another:
versteckter 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

[Eric De Paep]

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

[Luo Yang]

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:
versteckter 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>versteckter Link</u></em>', array( 'jquery' )); 
	wp_enqueue_style( 'flexslider-css', '<em><u>versteckter 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

[Eric De Paep]

Hi,

Great. This slider script works perfectly.

Thanks.