Owl-Carousel

Archive
1

I was wondering if I could get some insight on functionality for the owl-carousel within grav. I am having difficulty getting the slider to show up. I know the new Grav Homepage uses Owl, so I must be missing something. I have a test area set up on a site here: http://hagstrombuilder.com/error Any insights into what I may be missing would be great. Thank You!

2

Hmm… inspector states:

That means your scripts does not recognize objects. I would try moving all scripts (except jquery and modernizer) to the footer of your theme. Also

$.slidebars({
            hideControlClasses: true,
            scrollLock: true
          });

This calls for slidebars object. I don’t see it in your code. Maybe you changed class names ?

3

this would also be a great plugin :slight_smile:

4

@ameo, yes this would be a great plugin, might be something to work on in the future.
I have resolved the script error I was receiving before regarding the owlCarousel, however, now the css is telling the carousel to display:none; I am not sure why this is happening, I must be missing a step somewhere, I took a look at the carousels on the grav homepage and have attempted to replicate some of those setting to no success. Any insights?? Thanks. Screen Shot 2015-11-11 at 12

5

This script:

    <script>
    $(document).ready(function(){
      $(".carousel-1").owlCarousel({
          items: 1,
          nav: true,
          loop: true,
          lazyLoad: true,
});
})
</script>

Must be at the same bottom of your website. It can’t be at the top because carousel markup is loaded after that and script is not initialized.

6

actually hold on… I think it’s not a problem with script location… Problem might be caused by other scripts which are still causing errors.

7

Thanks, I have gotten the carousels working without any issue now. I do have a question about the pinterest pinit button, I have an example here: http://hagstrombuilder.com/newportfolio The top two carousels have dummy images in them for the time being, but I cant get the PinIt button to show up on hover the way it does on the bottom image which is just a regular tag. Can anyone assist with this?

8

@erikhanshagstrom could you maybe write some kind of tutorial on how you did it. you know - for the rest of us :stuck_out_tongue: