Builder content link
Builder public api key
e7a9e62cc8fb4fedb5562850d5fbeb66
What are you trying to accomplish
I want to integrate a javascript carousel plugin on a page
Screenshots or video link
Page created in builder.io which is not working -
screenshot - Screenshot by Lightshot
URL - Test - My WordPress
A plain HTML page which is working fine -
screenshot - Screenshot by Lightshot
URL - Slick Playground
Code stack you are integrating Builder with
Wordpress
Reproducible code example
Here is the fiddle where you can see the code - Builder.io: Drag & Drop Headless CMS
I have tried toggling the Replace Nodes and Scripts Client Only options in the Advanced tab, but the code doesn’t work.
Basically it doesn’t load the plugin function.
I have tried using a different plugin, but that has the same issue.
I think I am missing some settings. Can you help me out?
Thanks
Ketan
Hello Ketan,
I would be happy to assist.
I’d like to request some more information before we move towards a solution.
Are you using Builder to create the carousel and then copying the code to Wordpress via the method in the video on this page, ensuring the Publish button has been pressed?
https://www.builder.io/c/docs/guides/wordpress
Please let me know if I am misunderstanding the issue.
Thanks Julius.
Actually I have created the carousel in an HTML file. Once it was working properly, I create a page in the Builder and copied the code to a Custom Code element in that page. After publishing the code, I used the “Pasting Builder HTML into WordPress” method to integrate the page in Wordpress.
I have built an entire landing page in Builder using its default components and using it in Wordpress without any issue. It is just that when I tried to use a 3rd party javascript plugin for carousel, I am facing this issue.
Let me know if you need more information.
Hello ketanshah66,
Thanks for clearing that up for me!
I’ve been attempting a few solutions and have some suggestions.
Builder has it’s own easily customizable carousel under the Layout tab that also utilizes the Slicker library.
If you’re still set on using this custom component, would it be feasible to include the <script> and <link> tags in your own codebase? I was able to get the component functioning unreliably, which leads me to believe the elements or tags are being loaded out of order.
Please let me know if you’d like to continue searching for an alternative solution.
Hi Julius,
Thanks for your suggestions.
- I noticed that Builder is using the Slicker library, but I couldn’t find the options to change some of the settings like enabling centerMode, initialSlide, etc. under the Layout tab. Actually I want to have the following settings:
$(“.center”).slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 1
});
Hi @ketanshah66
I believe the infinite, centerMode, slidesToShow, slidesToScroll, and initialSlide are default to those you’ve selected.
However, if you do wish to customize further, would you be able to by selected the carousel in the layers tab, and clicking on edit. If you’re not seeing the options you’d like to customize, in the initial menu, there is also the Advanced Options at the bottom of the initial menu. I was able to locate the infinite option there.
Please let me know if there is a customization option you’re not seeing, I would be happy to try and find another solution.
Hello @ketanshah66,
I just wanted to follow up with you and see which solution you ended up using or if I can continue exploring more options.
Hi Julius,
Sorry for the late reply. I got busy with some other project.
I saw the carousel settings, but they are very few. I cannot find the Centermode option (it is not there as default), slidetoscroll, slidetoshow, initialslide, etc. Basically all these options are related to the Centermode view.
Hello @ketanshah66
I believe I have a solution. If you right click on the Builder Carousel Component and select JSON view, you should be able to see and edit the options you’re looking for:
Please let me know if you’re unable to view.