# Change carousel from slide to FADE?

**URL:** <https://forum.builder.io/t/change-carousel-from-slide-to-fade/2608>\
**Category:** Visual Editor Help\
**Tags:** visual-editor\
**Created:** [September 15, 2022, 1:12pm UTC](https://forum.builder.io/t/change-carousel-from-slide-to-fade/2608 "2022-09-15T13:12:26Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![maciejlabinski](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@maciejlabinski](https://forum.builder.io/u/maciejlabinski)\
**Post date:** [September 15, 2022, 1:12pm UTC](https://forum.builder.io/t/change-carousel-from-slide-to-fade/2608/1 "2022-09-15T13:12:26Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 15, 2022, 4:16pm UTC](https://forum.builder.io/t/change-carousel-from-slide-to-fade/2608/2 "2022-09-15T16:16:30Z")

</div>

Hi @maciejlabinski,

Welcome to [builder.io](http://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](https://kenwheeler.github.io/slick/)

Let us know if you have any further questions. Thank you!

---

<div class="post-metadata">

**Author:** ![maciejlabinski](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@maciejlabinski](https://forum.builder.io/u/maciejlabinski)\
**Post date:** [September 19, 2022, 1:09am UTC](https://forum.builder.io/t/change-carousel-from-slide-to-fade/2608/3 "2022-09-19T01:09:18Z")

</div>

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:

```auto
<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?

```auto
/*
  * 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();

```

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 20, 2022, 11:56am UTC](https://forum.builder.io/t/change-carousel-from-slide-to-fade/2608/4 "2022-09-20T11:56:48Z")

</div>

Hi @maciejlabinski,

Are you getting any errors in the browser JS console?

---

<div class="post-metadata">

**Author:** ![maciejlabinski](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@maciejlabinski](https://forum.builder.io/u/maciejlabinski)\
**Post date:** [September 20, 2022, 1:49pm UTC](https://forum.builder.io/t/change-carousel-from-slide-to-fade/2608/5 "2022-09-20T13:49:32Z")

</div>

Yes - see attached screenshot.

 ![Screen Shot 2022-09-20 at 9.49.01 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/eedf7b3161163a8ce90732645d98a18fe323bb01.png)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 20, 2022, 8:32pm UTC](https://forum.builder.io/t/change-carousel-from-slide-to-fade/2608/6 "2022-09-20T20:32:38Z")

</div>

Hi @maciejlabinski,

Could you please share the builder content link?

---

<div class="post-metadata">

**Author:** ![maciejlabinski](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@maciejlabinski](https://forum.builder.io/u/maciejlabinski)\
**Post date:** [September 21, 2022, 12:57pm UTC](https://forum.builder.io/t/change-carousel-from-slide-to-fade/2608/7 "2022-09-21T12:57:39Z")

</div>

I had to recreate the code on a test page: [Karl's Bait & Tackle](https://shopkarls.com/test-slick-slider?builder.cachebuster=l8bmplah&builder.proxyPreview.includeSW=true&builder.useProxyBase=true&apiKey=e7417059554e462db0236fef8a2c1fc1&builder.space=e7417059554e462db0236fef8a2c1fc1&builder.cachebust=true&builder.preview=page&builder.noCache=true& __builder_editing__ =true&builder.overrides.page=60d88846904541249acabf5a5025fecd&builder.overrides.60d88846904541249acabf5a5025fecd=60d88846904541249acabf5a5025fecd&builder.overrides.page:/test-slick-slider=60d88846904541249acabf5a5025fecd)

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 23, 2022, 3:20pm UTC](https://forum.builder.io/t/change-carousel-from-slide-to-fade/2608/8 "2022-09-23T15:20:50Z")

</div>

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?

```auto
<script>
    $('.slick-reels-slider').slick({
        speed: 500,
        fade: true,
        cssEase: 'linear'
   });
</script>

```

---

<div class="post-metadata">

**Author:** ![maciejlabinski](https://avatars.discourse-cdn.com/v4/letter/m/8dc957/32.png) [@maciejlabinski](https://forum.builder.io/u/maciejlabinski)\
**Post date:** [September 23, 2022, 4:30pm UTC](https://forum.builder.io/t/change-carousel-from-slide-to-fade/2608/9 "2022-09-23T16:30:53Z")

</div>

I can’t without requesting dev support. Is there any other work around?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [September 26, 2022, 5:25pm UTC](https://forum.builder.io/t/change-carousel-from-slide-to-fade/2608/10 "2022-09-26T17:25:19Z")

</div>

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 `$` or `jQuery` variables in your code.

You can read more about this error and solutions at [TypeError: $(document).ready is not a function in jQuery](https://bobbyhadz.com/blog/javascript-typeerror-jquery-document-ready-is-not-a-function#:~:text=ready%20is%20not%20a%20function%22%20error%20occurs%20for%20multiple%20reasons,to%20load%20the%20jQuery%20library.)

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!

 ![Screenshot 2022-09-26 at 10.46.21 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/640e48cde45ff787675b4ee22c6fd76f5ab2eec7.jpeg)