Hi Andreas
I'm not sure exactly how much control that slider gives you over how many slides are shown on different sized screens, you'll have to refer to its documentation, but while testing their demos I can see that it changes the number of visible slides according to the screen size, so it should give you the basics of what you need.
So, this slider is to display fields from separate posts as slides then it should be fairly straightforward.
You will create a View to output the posts to be used for the slides.
Recall you need to reproduce markup that looks something like this:
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
i.e. you need one wrapper div with the required class, and then each slide (post) in its own div.
So use the Loop Wizard and choose unformatted for the output format, and group the fields together in a content template.
Add an inner wrapper div (such as surrounds each "Your Content" above) and then the fields for your slide.
No go back to the Loop Editor and add the outer wrapper div on either side of the wpv-loop tags, meaning this wrapper gets added just once, not for each iteration.
If you were to display this View on the front end you should see that it has output *all* of the slides, effectively in a list.
Then comes the part of using the slider library.
The first part is to add the required CSS and JS.
In the documentation it describes linking to the required files (hidden link), but you shouldn't add CSS and JS like that in WordPress, you should enqueue the files as described in the WordPress documentation (https://developer.wordpress.org/themes/basics/including-css-javascript/).
Then in a custom JS section of your View you can initialise the slider as described in hidden link
You shouldn't rely on jQuery being initialised already, you should add JS code like this instead:
( function( $ ) {
$( document ).ready( function(){
$(".owl-carousel").owlCarousel();
});
})( jQuery );
