我如何在我的Laravel 9项目上安装滑动滑块包?套件链接:swiperjs.com
egmofgnx1#
嗯,我想这是互联网上唯一的答案,正确安装swiperjs在laravel(v9. x)和工作。
swiperjs
注意:根据@ktscript的评论和提供的链接,以下方法是一种不良做法,建议不要使用swiper官方网站。
安装swiperjs:npm install swiper个然后在文件resources/sass/app.scss中:@import 'node_modules/swiper/swiper';
npm install swiper
resources/sass/app.scss
@import 'node_modules/swiper/swiper';
**注意:**您不能导入开头为~的样式。
~
在文件/resources/js/app.js中:const Swiper = require('swiper').default;.default在require()之后是必需的。
/resources/js/app.js
const Swiper = require('swiper').default;
.default
require()
**更新:**现在我发现我可以像下面这样导入swiper。
import {Swiper, Navigation, Pagination} from 'swiper';
使用Laravel v9.x和swiperjs v8.x进行测试。
Laravel v9.x
swiperjs v8.x
e3bfsja22#
使用webpack集成到Laravel 8/9的正确版本与swiper文档不矛盾,可能如下所示:安装swiperjs:
然后在文件resources/sass/app.scss中:
如果您需要导航/分页或其他模块,请添加行:
@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>
vaj7vani3#
使用Laravel 9搭配Vite和Tailwind。请按照以下步骤使用Swiper及其所有模块:1.安装雨刷器npm install swiper1.将Swiper样式添加到 app.css@import 'swiper/css/bundle';个注意:如果使用的是Tailwind,则应在导入Tailwind资源 * 之前 * 导入Swiper。1.将Swiper添加到您的 app.jsimport Swiper from 'swiper/bundle';
@import 'swiper/css/bundle';
import Swiper from 'swiper/bundle';
3条答案
按热度按时间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;
.default
在require()
之后是必需的。**更新:**现在我发现我可以像下面这样导入swiper。
使用
Laravel v9.x
和swiperjs v8.x
进行测试。e3bfsja22#
使用webpack集成到Laravel 8/9的正确版本与swiper文档不矛盾,可能如下所示:
安装swiperjs:
然后在文件resources/sass/app.scss中:
如果您需要导航/分页或其他模块,请添加行:
在文件/resources/js/app. js中:
(in上面的例子,我添加了自动播放属性)。然后在哪里添加代码(例如在刀片):
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';