[Resolved] Views Integration with OWL slider

[Author]

Posts

[AtefR7377]

Hi,
Referring to the solution presented in this topic:
https://toolset.com/forums/topic/we-need-to-create-a-carousel-slider-with-images-inserted-in-a-repeated-field/

I am trying to creat a post slider like this website.

hidden link

This is a website shown in the Toolset Showcase.

I added the owl slider and all its necessary files, and created a view to display 16 posts.

the result is corrupt:

hidden link

the posts show, and i can "swipe" on the mobile, but all the results show in the same slide.

I tried the following:
- unformatted
- grid consisting of 1 column,
- grid consisting of 3 columns.

my qustion is: how to integrate the owl slider into a view showing posts, as per the topic i am referring to?

this is my loop:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
		[wpv-post-body view_template="Loop item in owl 01"]
	</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]

this is the template:

<div class="owl-carousel owl-theme">
  <div class="item">
  [wpv-post-featured-image]
    [wpv-post-link]
  </div>
  </div>

this is the JS in the template:

$('.owl-carousel').owlCarousel({
    stagePadding: 50,
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

I got the code from the OWL carousel documentation:
hidden link

I tried multiple demos, but basically give similar results.
I can't "islolate" every (featured image + post title) into a different slide.

I also tried the view as a "slider" but did not work for me.

can you please give some directions?

thanks,

[AtefR7377]

Hi,
After extensive trials, ere is the solution that worked:

1- Javascript in the filter editor (can be in other parts of the view, but when put in the "Layout CSS and JS" part of the plugin, it didn't work).

$('.owl-carousel').owlCarousel({
  rtl:true,
    stagePadding: 50,
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

2- Loop output editor. here we have to put the owl carousel classes:

[wpv-layout-start]
<div class="owl-carousel owl-theme">
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
		[wpv-post-body view_template="Loop item in owl 01"]
	</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]
  </div>
[wpv-layout-end]

3- Loop template. Here we have to put the "item" class only:

<div class="item">
  	[wpv-post-featured-image]
	[wpv-post-link]
</div>

[NattapatP8602]

Is it still work ?