# Ionic Slide Animation Error

**URL:** <https://forum.ionicframework.com/t/ionic-slide-animation-error/230271>\
**Category:** Ionic Framework\
**Created:** [January 14, 2023, 7:03am UTC](https://forum.ionicframework.com/t/ionic-slide-animation-error/230271 "2023-01-14T07:03:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mahaveer08](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mahaveer08/32/115839_2.png) [@mahaveer08](https://forum.ionicframework.com/u/mahaveer08)\
**Post date:** [January 14, 2023, 7:03am UTC](https://forum.ionicframework.com/t/ionic-slide-animation-error/230271/1 "2023-01-14T07:03:09Z")

</div>

Hi,

I am adding Fade Animation to the slider, but I am getting error.

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/7/2/724053b7cabef5d5c03fdb34c3eb56e4051cd443.jpeg)  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/c/8/c8e97d55f9d078dfe24d08bf1e1cb786dd3bf444.png)  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/c/6/c647c54a3583575c2d79c0d48cea6c511245bc61.png)

Below is the code.  
**welcome.page.ts**  
import { Component, OnInit } from ‘@angular/core’;

@Component({  
selector: ‘app-welcome’,  
templateUrl: ‘./welcome.page.html’,  
styleUrls: [‘./welcome.page.scss’],  
})  
export class WelcomePage implements OnInit {

slideOpts: any = {};  
slideImages: any = ;

constructor() { }

ngOnInit() {  
this.slideImages = [  
‘assets/images/1.jpg’,  
‘assets/images/2.jpg’,  
];

```
this.slideOpts = {
  on: {
    beforeInit() {
      const swiper = this;
      swiper.classNames.push(`${swiper.params.containerModifierClass}fade`);
      const overwriteParams = {
        slidesPerView: 1,
        slidesPerColumn: 1,
        slidesPerGroup: 1,
        watchSlidesProgress: true,
        spaceBetween: 0,
        virtualTranslate: true,
      };
      swiper.params = Object.assign(swiper.params, overwriteParams);
      swiper.params = Object.assign(swiper.originalParams, overwriteParams);
    },
    setTranslate() {
      const swiper = this;
      const { slides } = swiper;
      for (let i = 0; i < slides.length; i += 1) {
        const $slideEl = swiper.slides.eq(i);
        const offset$$1 = $slideEl[0].swiperSlideOffset;
        let tx = -offset$$1;
        if (!swiper.params.virtualTranslate) tx -= swiper.translate;
        let ty = 0;
        if (!swiper.isHorizontal()) {
          ty = tx;
          tx = 0;
        }
        const slideOpacity = swiper.params.fadeEffect.crossFade
          ? Math.max(1 - Math.abs($slideEl[0].progress), 0)
          : 1 + Math.min(Math.max($slideEl[0].progress, -1), 0);
        $slideEl
          .css({
            opacity: slideOpacity,
          })
          .transform(`translate3d(${tx}px, ${ty}px, 0px)`);
      }
    },
    setTransition(duration) {
      const swiper = this;
      const { slides, $wrapperEl } = swiper;
      slides.transition(duration);
      if (swiper.params.virtualTranslate && duration !== 0) {
        let eventTriggered = false;
        slides.transitionEnd(() => {
          if (eventTriggered) return;
          if (!swiper || swiper.destroyed) return;
          eventTriggered = true;
          swiper.animating = false;
          const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
          for (let i = 0; i < triggerEvents.length; i += 1) {
            $wrapperEl.trigger(triggerEvents[i]);
          }
        });
      }
    },
  }
};

```

}

}

---

<div class="post-metadata">

**Author:** ![techbinomial](https://avatars.discourse-cdn.com/v4/letter/t/b4bc9f/32.png) [@techbinomial](https://forum.ionicframework.com/u/techbinomial)\
**Post date:** [January 14, 2023, 8:20am UTC](https://forum.ionicframework.com/t/ionic-slide-animation-error/230271/3 "2023-01-14T08:20:44Z")

</div>

import SwiperCore, { EffectFade } from ‘swiper’;

SwiperCore.use([EffectFade, IonicSlides]);

in html file

\<swiper effect=“fade”  
This is how you simply use the fade effect.

you may watch demo at

[![](https://global.discourse-cdn.com/ionicframework/original/3X/b/8/b8e94ac7923e9292268fbc3a5fcac6b36ada9e3c.jpeg "Ionic 6 Angular Swiper JS with Autoplay, Effects, Scrolls, Navigation and more") ](https://www.youtube.com/watch?v=rMmR1gXfarU)