[Resolved] Integrating Owl carousel into GP Theme

Home Forums Support [Resolved] Integrating Owl carousel into GP Theme

Home Forums Support Integrating Owl carousel into GP Theme

Viewing 15 posts - 16 through 30 (of 47 total)
  • Author
    Posts
  • #2267449
    Fernando
    Customer Support

    You’re welcome Jan!

    #2267459
    Jan

    Hi Fernando,

    I did make it work ;-). Please check the page link below for the result.

    The final step is to move the next-/ prev.-buttons left and right from the items.

    First I assigned classes to both buttons in the jQuery (Elements hook):

    navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],

    Then I uploaded button-icons to the Media Library and then added the relevant CSS:

    /* Owl Carousell - Format navigation */
    
     .carousel-wrap {
        width: 1000px;
        margin: auto;
        position: relative;
      }
      .owl-carousel .owl-nav{
        overflow: hidden;
        height: 0px;
      }
    
      .owl-carousel .nav-btn{
          height: 47px;
          position: absolute;
          width: 26px;
          cursor: pointer;
          top: 100px !important;
      }
    
      .owl-carousel .owl-prev.disabled,
      .owl-carousel .owl-next.disabled{
        pointer-events: none;
        opacity: 0.2;
      }
    
      .owl-carousel .prev-slide{
          background: url('/wp-content/uploads/2022/06/nav-icon-next.png') no-repeat scroll 0 0;
          left: -33px;
      }
      .owl-carousel .next-slide{
          background: url('/wp-content/uploads/2022/06/nav-icon-prev.png') no-repeat scroll -24px 0px;
          right: -33px;
      }

    For some reason the buttons will not jump into place.

    Any ideas on what I may be missing?

    Thanks,
    Jan

    PS: This is the tutorial I used to get here.

    #2267476
    Fernando
    Customer Support

    Can you try removing the CSS code you added, and I’ll see how it looks like by default?

    In this link: http://b3qn4j.myraidbox.de/#carousel, if you add this CSS:

    .owl-nav {
        position: absolute;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    
    .owl-stage-outer {
        width: 90%;
        text-align: center;
    }

    It will position the nav buttons to the left and right accordingly.

    Let us know once you’ve removed the code.

    #2284273
    Jan

    Hi Fernando,

    this does help a lot already. Many thanks.

    The CSS I ended up using is this:

    /* Owl carousel - Position and style navigation icons */
    
    #leistungsmerkmale .owl-nav {
        position: absolute;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    
    #leistungsmerkmale .owl-stage-outer {
        width: 90%;
        text-align: center;
    }
    
    #leistungsmerkmale .owl-nav.disabled {
        margin-top: 130px;
    }
    
    #leistungsmerkmale .owl-carousel .owl-nav .owl-prev,
      .owl-carousel .owl-nav .owl-next,
      .owl-carousel .owl-dot {
        //width, height
        width:60px;
        height:90px;
    }
    
    #leistungsmerkmale .owl-carousel .owl-nav .owl-prev {
        background: url('Form_Pfeil_links.png') no-repeat;
    }
    
    #leistungsmerkmale .owl-carousel .owl-nav .owl-next {
    	background: url('Form_Pfeil_rechts.png') no-repeat;
    }

    For some reason, the left and right button icon will no show up.

    Any thoughts on what I may be missing?

    Thanks,
    Jan

    #2284330
    David
    Staff
    Customer Support

    Hi there,

    your URL in background: url('Form_Pfeil_rechts.png') no-repeat; need to be the Full Path to the image, not just the filename

    #2284584
    Jan

    Hi David,

    I added the Full Path as follows:

    /* Owl carousel - Position and style navigation icons */
    
    #leistungsmerkmale .owl-nav {
        position: absolute;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    
    #leistungsmerkmale .owl-stage-outer {
        width: 90%;
        text-align: center;
    }
    
    #leistungsmerkmale .owl-nav.disabled {
        margin-top: 130px;
    }
    
    #leistungsmerkmale .owl-carousel .owl-nav .owl-prev,
      .owl-carousel .owl-nav .owl-next,
      .owl-carousel .owl-dot {
        //width, height
        width:60px;
        height:90px;
    }
    #leistungsmerkmale .owl-carousel .owl-nav .owl-prev {
        background: url('https://b3qn4j.myraidbox.de/wp-content/uploads/Form_Pfeil_links.png') no-repeat;
    }
    
    #leistungsmerkmale .owl-carousel .owl-nav .owl-next {
        
    	background: url('https://b3qn4j.myraidbox.de/wp-content/uploads/Form_Pfeil_rechts.png') no-repeat;
    }

    The icons are still no showing ;-(

    This is the PHP that I added to the hook:

    <script> 
    	jQuery(document).ready(function() {   
      jQuery('#leistungsmerkmale').owlCarousel({
    		dots: false,
    		autoWidth: false,
    		center: false,
    		stagePadding: 40,
        margin: 48,
    		autoplay: true,
    		autoplayTimeout: 5000,
    		autoplayHoverPause: false,
    		responsiveClass:true,
    		nav: true,
    		responsive:{
            0:{
                items:1.1,
            },
            600:{
                items:1.1,
            },
            1000:{
                items:1.6,
            }
        }
      })
    })
    	
    </script>

    Any idea as to what I am missing?

    Best,
    Jan

    #2285106
    David
    Staff
    Customer Support

    It is there, you would need to resize the button ie. make it wider, and set the background-size to make the image visible.

    Alternatively, use the owlCarousel API – theres a navText argument for that function:

    https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

    And see the version 2 code here on how to use that:

    https://stackoverflow.com/a/31224798

    #2286049
    Jan

    Hi David,

    Thanks for getting back. Sounds like I’m on the right track 😉

    I’ll take a look into the alternative option and then let you know how it goes.

    Best,
    Jan

    #2286122
    David
    Staff
    Customer Support

    Glad we could be of help

    #2356774
    Jan

    Hi David,

    meanwhile, I went through the complete guide once again to find out why the custom navigation icons would not show left and right from the owl2 carousel.

    Following your advice, I added the navText argument to the JS function in the Elements Hook:

    <script> 
    	jQuery(document).ready(function() {   
      jQuery('#leistungsmerkmale').owlCarousel({
    		dots: false,
    		autoWidth: false,
    		center: false,
    		stagePadding: 40,
        margin: 48,
    		autoplay: true,
    		autoplayTimeout: 5000,
    		autoplayHoverPause: false,
    		responsiveClass:true,
    		nav: true,
    		navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
    		responsive:{
            0:{
                items:1.1,
            },
            600:{
                items:1.1,
            },
            1000:{
                items:1.6,
            }
        }
      })
    })
    	
    </script>

    I also compared each line of the CSS in the customizer:

    /* Owl carousel - Position and style navigation icons */
    
    #leistungsmerkmale .carousel-wrap {
        width: 1000px;
        margin: auto;
        position: relative;
      }
    #leistungsmerkmale .owl-carousel .owl-nav{
        overflow: hidden;
        height: 0px;
      }
    
    #leistungsmerkmale .owl-carousel .owl-prev.disabled,
      .owl-carousel .owl-next.disabled{
        pointer-events: none;
        opacity: 0.2;
      }
    
    #leistungsmerkmale .owl-carousel .prev-slide{
          background: url("https://bt3cqo2v.myraidbox.de/wp-content/uploads/Form_Pfeil_links.png") no-repeat scroll 0 0;
          left: -33px;
      }
    #leistungsmerkmale .owl-carousel .next-slide{
          background: url(https://bt3cqo2v.myraidbox.de/wp-content/uploads/Form_Pfeil_rechts.png) no-repeat scroll -24px 0px;
          right: -33px;
      }
    
    #leistungsmerkmale .owl-carousel .prev-slide:hover{
         background-position: 0px -53px;
      }
    #leistungsmerkmale .owl-carousel .next-slide:hover{
        background-position: -24px -53px;
      }

    Finally, I used the Chrome debugger to compared my version of the carousel to the demo version that came with the guide. All IDs and Classes seem correctly assigned to the relevant GP Container.

    The custom navigation icons are not moving to the left and right of the carousel ;-/

    What is the best way for us to finally tackle this? I’m more than happy to set up an admin-user for you to access the system.

    Any advice is much appreciated.

    Best,
    Jan

    #2358194
    Jan

    Hi David,

    Do you get a chance to look into this any time soon?

    I need to deliver the live version of the site this weekend ;-/

    Please let me know.

    Many thanks,
    Jan

    #2358640
    Fernando
    Customer Support

    Hi Jan,

    Sorry, David’s on leave right now. He’ll be back likely next week.

    Javascript is also out of our scope of support. See here to know what our support includes: https://generatepress.com/what-support-includes/

    For now, it might be best to reach out to a developer for assistance.

    Hope you understand.

    #2372071
    David
    Staff
    Customer Support

    so as the navText option supports HTML, then your simplest route maybe to include the Image in that HTML eg.

    navText:["<div class='nav-btn prev-slide'><img width=60 height=60 src="full_url_to_the_previous_icon.jpg" /></div>","<div class='nav-btn next-slide'><img width=60 height=60 src="full_url_to_the_next_icon.jpg" /></div>"],

    #2372112
    Jan

    Great idea, David. This could really simplify things.

    I added the navText option to the Elements Hook and adjusted the URL to the icon files.

    The // inside the full URL make the option appear in a strange color (like commentary in PHP or CSS – /* */)

    Am I missing anything?

    #2372115
    David
    Staff
    Customer Support

    What happens on the front end ?

Viewing 15 posts - 16 through 30 (of 47 total)
  • You must be logged in to reply to this topic.