npm 在Laravel项目上安装滑动器滑块

bhmjp9jg  于 2022-11-14  发布在  其他
关注(0)|答案(3)|浏览(165)

我如何在我的Laravel 9项目上安装滑动滑块包?
套件链接:swiperjs.com

egmofgnx

egmofgnx1#

嗯,我想这是互联网上唯一的答案,正确安装swiperjs在laravel(v9. x)和工作。

注意:根据@ktscript的评论和提供的链接,以下方法是一种不良做法,建议不要使用swiper官方网站。

  • 但我还是不会删除我的答案,以防你没有其他选择 *
    如果你觉得它没用,就在评论里告诉我,这样我就删除我的答案。

安装swiperjs:
npm install swiper
然后在文件resources/sass/app.scss中:
@import 'node_modules/swiper/swiper';

**注意:**您不能导入开头为~的样式。

在文件/resources/js/app.js中:
const Swiper = require('swiper').default;
.defaultrequire()之后是必需的。

**更新:**现在我发现我可以像下面这样导入swiper。

import {Swiper, Navigation, Pagination} from 'swiper';

使用Laravel v9.xswiperjs v8.x进行测试。

e3bfsja2

e3bfsja22#

使用webpack集成到Laravel 8/9的正确版本与swiper文档不矛盾,可能如下所示:
安装swiperjs:

npm install swiper

然后在文件resources/sass/app.scss中:

@import 'node_modules/swiper/swiper';

如果您需要导航/分页或其他模块,请添加行:

@import 'node_modules/swiper/modules/navigation/navigation';
@import 'node_modules/swiper/modules/pagination/pagination';

在文件/resources/js/app. js中:

import { Autoplay, Navigation, Pagination } from "swiper";
import Swiper from "swiper";
Swiper.use([Autoplay, Navigation, Pagination]);

(in上面的例子,我添加了自动播放属性)。然后在哪里添加代码(例如在刀片):

<div class="swiper mySwiperClass">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    <!-- If we need controls 
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    -->
</div>

<script>
    window.onload = function(){
        const swiper = new Swiper('.mySwiperClass', {
            spaceBetween: 15,
            slidesPerView: 3, 
            pagination: {
              el: ".swiper-pagination",
              clickable: true
            },
            speed: 1000,
            loop: true,
            autoplay: {
              delay: 2500,
              disableOnInteraction: false,
            }
        }
    }
</script>
vaj7vani

vaj7vani3#

使用Laravel 9搭配Vite和Tailwind。请按照以下步骤使用Swiper及其所有模块:
1.安装雨刷器
npm install swiper
1.将Swiper样式添加到 app.css
@import 'swiper/css/bundle';
注意:如果使用的是Tailwind,则应在导入Tailwind资源 * 之前 * 导入Swiper。
1.将Swiper添加到您的 app.js
import Swiper from 'swiper/bundle';

相关问题