Beginners Question: How to get owl carousel (or similar) working?

[sappel]

<?php include('./_head.php'); // include header markup ?>
<!-- Basic stylesheet -->
<link rel="stylesheet" href="site/owlcarousel/owl.carousel.min.css">
 <!-- Default Theme -->
<link rel="stylesheet" href="site/owlcarousel/owl.theme.default.min.css">
<!-- Include js plugin -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="site/owlcarousel/owl.carousel.js"></script> 
	<div id='content'><?php 
	
		// output 'headline' if available, otherwise 'title'
		echo "<h1>" . $page->get('headline|title') . "</h1>";
			
		// output bodycopy
		echo $page->body; 
		?>
	</div>
          <div class="owl-carousel">
            <div class="item">
              <h2>Swipe</h2>
            </div>
            <div class="item">
              <h2>Drag</h2>
            </div>
            <div class="item">
              <h2>Responsive</h2>
            </div>
            <div class="item">
              <h2>CSS3</h2>
            </div>
            <div class="item">
              <h2>Fast</h2>
            </div>
            <div class="item">
              <h2>Easy</h2>
            </div>
            <div class="item">
              <h2>Free</h2>
            </div>
            <div class="item">
              <h2>Upgradable</h2>
            </div>
            <div class="item">
              <h2>Tons of options</h2>
            </div>
            <div class="item">
              <h2>Infinity</h2>
            </div>
            <div class="item">
              <h2>Auto Width</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      var owl = $('.owl-carousel');
      owl.owlCarousel({
        margin: 10,
        loop: true,
        responsive: {
          0: {
            items: 1
          },
          600: {
            items: 2
          },
          1000: {
            items: 3
          }
        }
      })
    </script>
<!-- end content -->

Hello everyone,

I'm currenty trying to add a nice shiny image slider working on my vineyard site.
I have an overview site with all offered/available vines and I have a bunch of images in that site. Now I want to view those images on the frontend in a nice little slider.

I found owl-carousel here on the forums to look pretty good and I'm trying to follow this how to: http://www.owlcarousel.owlgraphic.com/docs/started-installation.html

It's the new 2.0.0 beta and I like the demo slider with 3 images at a time, and the dots...

So what I tried so far, I see the divs/items, but nothing close to a slider appears...so I guess I do something wrong in the beginning and/or I'm way to stupid...
 

Can anyone point me in the right direction?

 

[sappel]

oh, and before I forget: How can I call all the images from the site with PW methods for the different items of owlcarousel?

[pwired]

Quote

so I guess I do something wrong in the beginning

First set it up with plane html, css and js. Use the examples on the owl carousel website. Once you have that part working you can import it into processwire.

[sappel]

<?php include('./_head.php'); // include header markup ?>
<!-- Basic stylesheet -->
<link rel="stylesheet" href="/site/owlcarousel/assets/owl.carousel.css">
 <!-- Default Theme -->
<link rel="stylesheet" href="/site/owlcarousel/owl.theme.default.min.css">
<!-- Include js plugin -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/site/owlcarousel/owl.carousel.js"></script> 
	<div id='content'><?php 
	
		// output 'headline' if available, otherwise 'title'
		echo "<h1>" . $page->get('headline|title') . "</h1>";
			
		// output bodycopy
		echo $page->body; 
		
		?><div class='owl-carousel'><?php
		foreach($page->images as $image)
		echo "<img src='$image->url' alt='$image->description' />\n";
		?>
		</div>
    <script>
var owl = $('.owl-carousel');
owl.owlCarousel({
    items:4,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:3000,
    autoplayHoverPause:true
});
$('.play').on('click',function(){
    owl.trigger('autoplay.play.owl',[1000])
})
$('.stop').on('click',function(){
    owl.trigger('autoplay.stop.owl')
})
    </script>

	</div>
<!-- end content -->

hm k. I got it more or less running!
Looks good so far, the only thing I'm thinking about is the dots below won't show up (haven't looked into that yet) and the transition speed might be a little fast...

But thanks for now!