공식 홈페이지
npm 방식
# 공홈 : https://swiperjs.com/get-started#install-from-npm
# 9) npm i swiper
npm i swiper
npm i @types/swiper
# 9-1) js import : main.js : 자바스크립트 파일
import Swiper from 'swiper';
# 9-2) css import - App.tsx
// TODO : swiper css import
// TODO : 참조 : xxx.css -> (압축) xxx-min.css
// TODO : : xxx.js -> (압축) xxx-min.js
import "swiper/swiper-bundle.css"; 또는 import "swiper/swiper-bundle.min.css";
cdn 방식
<!-- TODO : SWIPER -->
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
<!-- TODO : swiper -->
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
< 예제 >
App.tsx 또는 js 위에 css import
// TODO : swiper css import
// TODO : 참조 : xxx.css -> (압축) xxx-min.css
// TODO : : xxx.js -> (압축) xxx-min.js
import "swiper/swiper-bundle.css";
js 파일 작성 예제
// TODO : Swiper import
import Swiper from 'swiper';
/* eslint-disable */
export default function initMain() {
/**
* Testimonials slider
*/
new Swiper('.testimonials-slider', {
speed: 600,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 20
},
1200: {
slidesPerView: 2,
spaceBetween: 20
}
}
});
}
html 작성 예제
{/* <!-- ======= Testimonials Section ======= --> */}
<section id="testimonials" className="testimonials">
<div className="container" data-aos="fade-up">
<div className="section-title">
<h2>Testimonials</h2>
<p>What are they saying</p>
</div>
<div className="testimonials-slider swiper" data-aos="fade-up" data-aos-delay="100">
<div className="swiper-wrapper">
<div className="swiper-slide">
<div className="testimonial-wrap">
<div className="testimonial-item">
<img src="assets/img/testimonials/testimonials-1.jpg" className="testimonial-img" alt=""/>
<h3>Saul Goodman</h3>
<h4>Ceo & Founder</h4>
<p>
<i className="bx bxs-quote-alt-left quote-icon-left"></i>
Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.
<i className="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
</div>
</div>
</div>
{/* <!-- End testimonial item --> */}
<div className="swiper-slide">
<div className="testimonial-wrap">
<div className="testimonial-item">
<img src="assets/img/testimonials/testimonials-2.jpg" className="testimonial-img" alt=""/>
<h3>Sara Wilsson</h3>
<h4>Designer</h4>
<p>
<i className="bx bxs-quote-alt-left quote-icon-left"></i>
Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.
<i className="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
</div>
</div>
</div>
{/* <!-- End testimonial item --> */}
<div className="swiper-slide">
<div className="testimonial-wrap">
<div className="testimonial-item">
<img src="assets/img/testimonials/testimonials-3.jpg" className="testimonial-img" alt=""/>
<h3>Jena Karlis</h3>
<h4>Store Owner</h4>
<p>
<i className="bx bxs-quote-alt-left quote-icon-left"></i>
Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.
<i className="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
</div>
</div>
</div>
{/* <!-- End testimonial item --> */}
<div className="swiper-slide">
<div className="testimonial-wrap">
<div className="testimonial-item">
<img src="assets/img/testimonials/testimonials-4.jpg" className="testimonial-img" alt=""/>
<h3>Matt Brandon</h3>
<h4>Freelancer</h4>
<p>
<i className="bx bxs-quote-alt-left quote-icon-left"></i>
Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.
<i className="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
</div>
</div>
</div>
{/* <!-- End testimonial item --> */}
<div className="swiper-slide">
<div className="testimonial-wrap">
<div className="testimonial-item">
<img src="assets/img/testimonials/testimonials-5.jpg" className="testimonial-img" alt=""/>
<h3>John Larson</h3>
<h4>Entrepreneur</h4>
<p>
<i className="bx bxs-quote-alt-left quote-icon-left"></i>
Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.
<i className="bx bxs-quote-alt-right quote-icon-right"></i>
</p>
</div>
</div>
</div>
{/* <!-- End testimonial item --> */}
</div>
<div className="swiper-pagination"></div>
</div>
</div>
</section>
{/* <!-- End Testimonials Section --> */}
'React > React - 외부라이브러리' 카테고리의 다른 글
외부 라이브러리 - 유효성 체크 lib (1) | 2023.11.14 |
---|---|
외부 라이브러리 - redux (0) | 2023.11.14 |
외부라이브러리 - DaterangePicker (1) | 2023.10.31 |
외부라이브러리 - Jquery-ui Calendar (0) | 2023.10.31 |
외부라이브러리 - Easing (0) | 2023.10.31 |