[Gelöst] Slider in Content Template

[Author]

Artikel

[ideabatchV]

I am trying to Add Slider into the content template & I have read below thread

https://toolset.com/forums/topic/inserting-slider/#post-278493
https://toolset.com/forums/topic/create-a-slider-with-multiple-images-from-image-fields/

I have done the above but the result of mine shown the images separately without slider function. Please assist.

[Nigel Supporter Languages: Englisch (English ) Spanisch (Español ) Timezone: Europe/London (GMT+01:00)]

Can you please try following the official documentation for setting up a slider, which should help you get it working.

See the following pages:

https://toolset.com/documentation/user-guides/views-pagination/
https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/

If you still have problems let me know and I will be happy to help.

[ideabatchV]

I let members upload multiple images into the single post by themselves via toolset form. I need to show the images as slider instead of separate images (something like woocommerce default single product page).

If not mistaken, the method you show me only able to show multiple post image into slider while what I need is there are multiple image (custom post field "image") in a single post. I found there is no post field option when create the slider.

[Nigel Supporter Languages: Englisch (English ) Spanisch (Español ) Timezone: Europe/London (GMT+01:00)]

Yes, now I understand.

You want a slider for multiple images from the same post, not from different posts as described in our documentation.

This is not a built-in feature of Views, although it is requested quite often.

To provide this functionality we have a module that uses the popular flex slider library.

Make sure you have Toolset Module Manager installed and activated, and then go to Toolset > Modules > Import and you should be able to install the flexslider module.

The source documentation for the flexslider is here: hidden link

The module was updated just this month and so should be working fine, but let me know if you have problems.

[ideabatchV]

Nigel, sorry I kinna lost now. I have follow your instruction & done install the flexslider module now. So what's next?

[Nigel Supporter Languages: Englisch (English ) Spanisch (Español ) Timezone: Europe/London (GMT+01:00)]

The flexslider module unfortunately doesn't come with any documentation, and looking at it myself it is not at all intuitive how you should use it, although I know it works because it was recently updated at the request of another client who does use it.

Before it was updated, i.e. when it wasn't working, I had another client who wanted to achieve the same thing and I suggested the set it up themselves using the flexslider library.

I described the steps involved in that thread.

Do you want to take a look and see if you can do that yourself? The thread is here:

https://toolset.com/forums/topic/create-a-slider-with-multiple-images-from-image-fields/

You need to

1. include the flexslider library on the page
2. use views shortcodes to output the images markup in the required format

If you can follow that, great, but if you have problems please let me know.

[ideabatchV]

I have follow the instruction, it successfully show the images from flexslider library however, it does not have slider feature.

PS:
1. Should I reinstall flexslider plugin? If yes, please provide the guide, the zip file download from the website cannot install directly into the plugin.
2. Where should I put the JS code? In to content template or View?

Or Did i miss something?

[Nigel Supporter Languages: Englisch (English ) Spanisch (Español ) Timezone: Europe/London (GMT+01:00)]

OK, I set up a test site myself where I have this working.

Please remove the flexslider module, we will set this up manually ourselves.

First, you need to download the current version of the flexslider library from https://woocommerce.com/flexslider/. (Ignore the WordPress plugin link.)

Extract that archive file into your theme folder. We will copy the files we need into the required locations from there.

- Copy jquery.flexslider.js into a /js sub-directory in your theme folder (e.g. themes/twentysixteen/js)
- Copy flexslider.css into a /css sub-directory in your theme folder
- Copy the fonts folder into the same /css sub-directory (e.g. to themes/twentysixteen/css/fonts)

Now, edit your theme's functions.php file to correctly enqueue the required files, like so:

/**
 * Enqueue files for flexslider
 */
add_action( 'wp_enqueue_scripts', 'flexslider_scripts' );
function flexslider_scripts() {
	// enqueue the flexslider CSS file
	wp_enqueue_style( 'flexslider-style', get_template_directory_uri() . '/css/flexslider.css', array(), '20161117' );
	wp_enqueue_script( 'flexslider-script', get_template_directory_uri() . '/js/jquery.flexslider.js', array( 'jquery' ), '20161117', true );

}

Note that I did not add any tests for which page I was enqueuing these on, so they will be added to all pages.

For my test site I created a custom post type called collections, and assigned a repeating image field to it with a slug of slide-images. I created a test collection post to which I added several sample images.

Now I created a content template for single collection posts. This needs to output the required markup for the flexslider plugin to work. My template looks like this:

[wpv-post-body view_template='None']

<h2>Here comes the slider</h2>
<div class="flexslider">
  <ul class="slides">
	[wpv-for-each field="wpcf-slide-images"]    
    <li>
      <img src="[wpv-post-field name='wpcf-slide-images']" />
    </li>
	[/wpv-for-each]
  </ul>
</div>

We still need to trigger the flexslider to run on that page, so in the custom JS section we need to add a code snippet to initialise flexslider.

Here is my code snippet. Note that this is where you would add the custom settings which are described in the flexslider documentation.

( function( $ ) {
	$( document ).ready( function(){
		$('.flexslider').flexslider();
	});
})( jQuery );

Now when you visit a relevant single post you should see the attached images in the slider.

[ideabatchV]

OMFG, please forgive my stupidness, i skip all the step of copy js/css folder & function.php part at all.

It works great now but i still got 2 last questions,

1. The picture does not fit completely into the slider. Please let know how to fixed the slider, let the image fit in the slider & put grey background if the image smaller than the slider
2. It show dots below, how to hide it?

Thanks again for your patience to teach Nigel.

[Nigel Supporter Languages: Englisch (English ) Spanisch (Español ) Timezone: Europe/London (GMT+01:00)]

I tested this on twentysixteen and it worked fine, I suspect it may be an issue with your theme.

Flexslider isn't a Toolset product, I don't really have any special knowledge about customising it once you have added it to the page.

I suggest you try reading through the documentation that I linked to above, where you can specify various options when you instantiate the flexslider.

You may need to apply the odd CSS tweak to get it looking how you want.

You can abstract away problems relating to the theme by setting up a simply static HTML test page where you hand code the markup and add the flexslider with its CSS, fonts, and JS using your chosen images. When you have it looking OK there, it should be reasonably straightforward to transfer it to your WordPress site.