sappel Posted July 11, 2016 Share Posted July 11, 2016 <?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 More sharing options...
sappel Posted July 11, 2016 Author Share Posted July 11, 2016 oh, and before I forget: How can I call all the images from the site with PW methods for the different items of owlcarousel? Link to comment Share on other sites More sharing options...
pwired Posted July 11, 2016 Share Posted July 11, 2016 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. 2 Link to comment Share on other sites More sharing options...
sappel Posted July 11, 2016 Author Share Posted July 11, 2016 <?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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now