Jump to content

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


sappel
 Share

Recommended Posts

<?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?

 

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

<?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!

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...