swiper animate cdn

1、：

Swiper是一款功能强大的前端轮播图插件，而Swiper Animate是其配套的动画扩展插件，通过结合使用，可以方便地为轮播图添加各种精美的CSS3动画效果，提升网页的视觉吸引力和用户体验。

2、CDN引入方式

直接使用链接：可以通过CDN方式快速引入所需的文件，在HTML文件中使用以下代码引入Swiper的核心样式表、JavaScript文件以及Swiper Animate的相关文件（版本号需根据实际情况选择）：

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/js/swiper.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.x.x/addons/animate/animate.min.js"></script>

在Vue项目中使用：对于Vue项目，可以使用npm或yarn安装Swiper及相关依赖，然后在项目中引入和使用。

     npm install swiper --save
     yarn add swiper

在Vue组件中引入：

     import { Swiper, SwiperSlide } from 'swiper/vue';
     import 'swiper/css';
     import SwiperCore, { Autoplay, Pagination, Navigation } from 'swiper';
     import { EffectFade } from 'swiper/effects';
     SwiperCore.use([Autoplay, Pagination, Navigation, EffectFade]);

3、初始化与使用

创建容器：在HTML中创建一个具有类名swiper-container的容器元素，用于承载滑动内容。

     <div class="swiper-container">
         <div class="swiper-wrapper">
             <div class="swiper-slide">Slide 1</div>
             <div class="swiper-slide">Slide 2</div>
             <div class="swiper-slide">Slide 3</div>
         </div>
         <!-分页器 -->
         <div class="swiper-pagination"></div>
         <!-左右箭头 -->
         <div class="swiper-button-next"></div>
         <div class="swiper-button-prev"></div>
     </div>

初始化Swiper实例：在JavaScript中，使用Swiper的构造函数来初始化这个容器，并传入相应的配置参数。

     var mySwiper = new Swiper('.swiper-container', {
         autoplay: true, // 可选选项，自动滑动
         pagination: {
             el: '.swiper-pagination',
             clickable: true,
         },
         navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev',
         },
     });

添加动画效果：在需要设置动画的元素上添加类名ani，并设置动画相关的属性，如swiper-animate-effect（动画名称）、swiper-animate-duration（动画持续时间）、swiper-animate-delay（动画延迟时间）等。

     <div class="swiper-slide">
         <h1 class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">Hello World</h1>
         <p class="ani" swiper-animate-effect="fadeInUp">This is a paragraph with animation.</p>
     </div>

4、动画效果示例

淡入淡出效果：给滑动元素添加swiper-slide-fade类名可实现淡入淡出效果。

滑动效果：给滑动元素添加swiper-slide-coverflow类名可实现滑动效果。

翻转效果：给滑动元素添加swiper-slide-flip类名可实现翻转效果。

5、实践经验和建议

确保正确加载文件：在使用Swiper Animate之前，务必确保正确加载了swiper.animate.min.js和animate.min.css两个文件，否则动画效果将无法正常显示。

合理选择动画效果：根据实际需求和用户体验选择合适的动画效果，避免使用过于复杂或过于炫目的动画效果，以免分散用户的注意力。

注意性能优化：在使用动画效果时，要注意动画的流畅性和性能，尽量避免使用过多的动画效果和复杂的计算，以保证页面的加载速度和运行效率。