- This topic has 46 replies, 4 voices, and was last updated 1 year, 5 months ago by David.
-
AuthorPosts
-
June 23, 2022 at 2:56 pm #2262723Jan
Hi David,
I followed this guide to integrate an owl carousel into the GP theme. This is what I have done:
1. Downloaded the OwnCarousel2.ZIP from Github
2. Created subfolder (generatepress_child/owlcarousel) and stored relevant css- and js-files from #3 and #4 therein
3. Created a hook element and added these links to the wp_head:<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css"> <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
4. Create another hook element and added this script to the wp_footer:
<script src="jquery.min.js"></script> <script src="owlcarousel/owl.carousel.min.js"></script>
5. Added the custom HTML to the relevant page (see URL link below)
6. Added this function call to a custom HTML block with <script>…</script> on the same page
$(document).ready(function(){ $(".owl-carousel").owlCarousel(); });
What am I missing to make the basic-carousel work?
Thanks,
JanPS: I found this threat from Mathieu but it was not much of help unfortunately.
June 23, 2022 at 3:42 pm #2262758YingStaffCustomer SupportHi Jan,
It looks like the CSS and JS are not loading, can you try updating the URLs in the hooks (step3 & step4) to the full URLs?
June 24, 2022 at 12:10 am #2262933JanHi Ying,
thanks for getting back.
I added the full path of the CSS and JS files to both Element hooks (see below) with no success unfortunately.
Any ideas on what else may be blocking the files from being loaded?
Best,
JanJune 24, 2022 at 12:43 am #2262946Fernando Customer SupportHi Jan,
Can you try a format like?:
https://www.yoursite.com/wp-content/themes/generatepress_child/owlcarousel/owl.carousel.min.js
Kindly replace
https://www.yoursite.com
with your site’s URL.Kindly let us know how it goes.
June 24, 2022 at 12:54 am #2262955JanHi Fernando,
we are making baby steps forward 😉 This had some effect indeed.
The carousel now disappeared altogether ;-/
Any thoughts?
Best,
JanJune 24, 2022 at 1:25 am #2262971Fernando Customer Supportjquery is not being loaded.
Can you try loading it this way?:
add_action( 'wp_enqueue_scripts', 'tu_load_jquery' ); function tu_load_jquery() { wp_enqueue_script( 'jquery' ); }
Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets
It also says that
owl.carousel.min.js
is missing. Can you check if the file is in your directory?Kindly let us know how it goes.
June 24, 2022 at 1:54 am #2262986JanHi Fernando,
thanks for getting back.
I added the action to the function.php of the child theme.
Does that make the Elements hook in the footer redundant?
<script src="jquery.min.js"></script> <script src="http://site.de/wp-content/themes/generatepress_child/owlcarousel/owl.carousel.min.js"></script> <script> $(document).ready(function(){ $(".owl-carousel").owlCarousel(); }); </script>
I also checked the subfolder of the child theme for the js-file. It was indeed missing ;-( Added it back in.
For your convenience I also added the screenshot of the HTML blocks for your review.
What is your view?
Jan
June 24, 2022 at 2:08 am #2262995Fernando Customer SupportYes, you can exclude this from your code if we’re enqueueing jquery:
<script src="jquery.min.js"></script>
Can you try turning this line
$(document).ready(function()
into:
jQuery(document).ready(function($)
Kindly let us know how it goes.
June 24, 2022 at 3:06 am #2263045JanThis did the trick ;-).
Many thanks Fernando!
PS: I’ll run some more tests and then give you a final thumbs up.
June 26, 2022 at 5:03 pm #2265213Fernando Customer SupportYou’re welcome Jan! Glad that did the trick!
June 28, 2022 at 12:36 am #2266539JanHi Fernando,
styling is next. You suggested me to modify the initializer function from…
$(document).ready(function()
tojQuery(document).ready(function($)
.I assume this is the reason why I cannot apply the suggested CSS.
$('.owl-carousel').owlCarousel({ loop:true, margin:10, nav:true, responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:5 } } })
FYI: I added the CSS to the Customizer.
How would you suggest me to modify this?
Thanks,
JanJune 28, 2022 at 12:54 am #2266557Fernando Customer SupportThat’s not CSS code. It’s jQuery.
Try adding it through a Hook Element. Adding that through the customizer wouldn’t work since it’s not CSS.
The format might need to be modified to something like this: https://stackoverflow.com/questions/70770112/owl-carousel-auto-play-for-screen#:~:text=want%20diferent%20settings%20for
This is out of our scope and expertise however. Kindly refer to this with regards to what our support includes: https://generatepress.com/what-support-includes/
Hope this clarifies!
June 28, 2022 at 1:41 am #2266591Jan…it does, Fernando. I should have noticed this myself ;-/
I’ll consult someone else regarding jQuery. No Problem.
Final question: I’d like to rebuild this basic html structure…
<div class="owl-carousel owl-theme"> <div class="item"><h4>1</h4></div> <div class="item"><h4>2</h4></div> <div class="item"><h4>3</h4></div> <div class="item"><h4>4</h4></div> <div class="item"><h4>5</h4></div> <div class="item"><h4>6</h4></div> <div class="item"><h4>7</h4></div> <div class="item"><h4>8</h4></div> <div class="item"><h4>9</h4></div> <div class="item"><h4>10</h4></div> <div class="item"><h4>11</h4></div> <div class="item"><h4>12</h4></div> </div>
…using Generate Blocks (Containers and Blocks). Know how to assign a class to an Headline block. Can I apply the same logic to Container blocks also (see screenshot)?
I guess what I am struggling with is that every Container comes with a predefined class
<div class="gb-container gb-container-0809265e owl-carousel owl-theme"
which is not being replaced with whatever I put into the Additional CSS classes field.Any advise is much appreciated.
Regards,
JanJune 28, 2022 at 2:03 am #2266607Fernando Customer SupportNot sure how the JS selects specific elements in that HTML structure.
Since the Container Block automatically adds an inner
gb-inside-container
div, I’m not sure if having a slightly different structure would make the JS not work.Example of a possible structure: https://share.getcloudapp.com/9ZuoQN7b
You could probably try. You may add classes through the Advanced section of a Block’s Block settings as such: https://share.getcloudapp.com/Jruox7rd
Otherwise, if it doesn’t work, you’ll need to modify the JS of the Owl carousel, or use a HTML Block which you’re currently using.
You could probably also try wrapping the Headline Blocks through PHP.
For instance, if you. add class
my-headline-block
to the Headline Blocks you wish to insert within a div with a class of item, and then add this PHP:function db_rerender_headline( $block_content, $block ) { if(!is_admin()){ if ( ! empty( $block['attrs']['className'] ) && 'my-headline-block' === $block['attrs']['className'] ) { $new_content = '<div class="item">' . $block_content . '</div>'; $block_content = $new_content; } } return $block_content; } add_filter( 'render_block', 'db_rerender_headline', 10, 2 );
all Headline Blocks with that class should be outputted with a div that has a class of item.
Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets
You can add the parent div
owl-carousel owl-theme
through two separate HTML blocks.That should work.
Hope this clarifies!
June 28, 2022 at 2:28 am #2266635JanCool. I’ll give this a try and let you know accordingly Fernando
Many thanks for sharing these options.
Best,
Jan -
AuthorPosts
- You must be logged in to reply to this topic.