I’m using the Slick carousel featured template to show a series of images. How can I change the default SLIDING transition to a FADE transition?
Thanks!
Hi @maciejlabinski,
Welcome to builder.io forum.
With our carousel block, it doesn’t seem possible to change from slide to fade but you could create your own custom component using slick with fade. You could also build one from scratch. For creating the slick carousel, you can find help at slick - the last carousel you'll ever need
Let us know if you have any further questions. Thank you!
Thanks manish-sharma for the direction. I’m trying to build the custom slick carousel per your recommendation but it’s not loading. Here’s the custom code block:
<div class="slick-reels-slider">
<div>
<img
src="https://cdn.builder.io/api/v1/image/assets%2Fe7417059554e462db0236fef8a2c1fc1%2Fbb0eeeaff1a54e2c8ff41f9735c50555?format=webp&width=800"
/>
</div>
<div>
<img
src="https://cdn.builder.io/api/v1/image/assets%2Fe7417059554e462db0236fef8a2c1fc1%2F92f4cb89200844a180c43c1d9891e724?format=webp&width=800"
/>
</div>
<div>
<img
src="https://cdn.builder.io/api/v1/image/assets%2Fe7417059554e462db0236fef8a2c1fc1%2Fdcc526edbf6d48608ffbc542c87c6960?format=webp&width=800"
/>
</div>
</div>
And here’s the JS. Do you know what I’m doing wrong?
/*
* Global objects available:
*
* state - builder state object - learn about state https://www.builder.io/c/docs/guides/state-and-actions
* context - builder context object - learn about state https://github.com/BuilderIO/builder/tree/main/packages/react#passing-data-and-functions-down
* fetch - Fetch API - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API'
* Builder - Builder object - useful values include: Builder.isServer, Builder.isBrowser, Builder.isPreviewing, Builder.isEditing
*
* visit https://www.builder.io/c/docs/guides/custom-code
* for more information on writing custom code
*/
async function main () {
if (Builder.isServer) {
}
if (Builder.isBrowser) {
$('.slick-reels-slider').slick({
dots: false,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
}
}
export default main();
Hi @maciejlabinski,
Are you getting any errors in the browser JS console?
Hi @maciejlabinski,
Could you please share the builder content link?
I had to recreate the code on a test page: Karl's Bait & Tackle
Hi @maciejlabinski!
Jquery doesn’t seem to be executing using builder, will it be possible for you to declare the below code in your codebase before closing the </body> tag and let us know if that works?
<script>
$('.slick-reels-slider').slick({
speed: 500,
fade: true,
cssEase: 'linear'
});
</script>
I can’t without requesting dev support. Is there any other work around?
Hi @maciejlabinski,
Unfortunately, I’m not able to provide any other workaround at the moment from our end considering there is an error on the page TypeError: $(...).ready is not a function and might need your dev help
The “$(document).ready is not a function” error occurs for multiple reasons:
- Placing the second set of parenthesis after the call to the
ready()method. - Loading the jQuery library after running your JavaScript code.
- Forgetting to load the jQuery library.
- Loading the jQuery library more than once on the same page.
- Overriding the
$orjQueryvariables in your code.
You can read more about this error and solutions at TypeError: $(document).ready is not a function in jQuery
I can see there is javascript code declared before loading the jQuery CDN if you can ask your dev team to look into that once will be much appreciated. Thank you!
