swiper6.0 "페이지 넘기기 단추"개조: 스타일 스타일과position 사용자 정의 - 사례 편
31058 단어 swiper
문서 목록
swiper6.0 '페이지 넘기기 단추' 개조: 스타일 스타일과position 사용자 정의 (효과도, 코드, 사용 설명서 포함)
관리 주소: 코드 데모 주소
수요 장면·설명은 다음과 같다.
효과도·gif 애니메이션:
참고 사항:
사용 설명서·(주의사항)
코드의 위치를 설정해야 합니다.
모든 코드·표시:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demotitle>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="statics/plugin/swiper6.4.5/swiper-bundle.min.css">
<style>
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-div{
width: 1200px;margin: 100px auto;}
.swiper-box{
width: 1170px;margin:0 auto;border: red 1px solid;overflow: hidden;}/* ，1170px width （ ）*/
.swiper-container {
width: 1110px;/* 。 ： ，*/
height: 60px;/* */
overflow:visible;/*， ： ， 。*/
}
.swiper-slide {
width: 140px;height: 60px;/* img ，（ demo ， ）*/
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/* */
/* （ ）*/
.swiper-container-horizontal>.swiper-pagination-bullets{
bottom: 0;}
.swiper-pagination-bullet{
background-color: #ef1f1f;opacity: 0.1;}
.swiper-pagination-bullet-active{
background-color: #ef1f1f;opacity: 0.8;}
.swiper_btn{
width: 25px;height: 60px;top: 0;background-color: rgba(220,20,60,.2);margin-top: 0;}/* （ ， ）*/
.swiper-button-next:after, .swiper-button-prev:after{
display: none;}/* swiper ， */
.swiper-button-next{
right: -30px;}/* */
.swiper-button-prev{
left: -30px;}/* */
style>
head>
<body>
<section class="swiper-div">
<section class="swiper-box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1div>
<div class="swiper-slide">Slide 2div>
<div class="swiper-slide">Slide 3div>
<div class="swiper-slide">Slide 4div>
<div class="swiper-slide">Slide 5div>
<div class="swiper-slide">Slide 6div>
<div class="swiper-slide">Slide 7div>
<div class="swiper-slide">Slide 8div>
<div class="swiper-slide">Slide 9div>
<div class="swiper-slide">Slide 10div>
<div class="swiper-slide">Slide 11div>
<div class="swiper-slide">Slide 12div>
<div class="swiper-slide">Slide 13div>
<div class="swiper-slide">Slide 14div>
<div class="swiper-slide">Slide 15div>
<div class="swiper-slide">Slide 16div>
<div class="swiper-slide">Slide 17div>
<div class="swiper-slide">Slide 18div>
<div class="swiper-slide">Slide 19div>
<div class="swiper-slide">Slide 20div>
div>
<div class="swiper-pagination bottom0">div>
<script src="statics/plugin/swiper6.4.5/swiper-bundle.min.js">script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 7,
spaceBetween: 20,
slidesPerGroup: 7,
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
loopFillGroupWithBlank: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
script>
body>
html>
이상은'swiper6.0'페이지 넘기기 단추'개조: 사용자 정의 스타일 스타일과position-사례편'에 대한 내용입니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Nuxt.js】vue-awesome-swiper를 도입Nuxt.js에서 만들고있는 사이트에서 슬라이드 쇼를 도입하고 싶었기 때문에 vue-awesome-swiper를 도입 해 보았습니다. 1. 라이브러리 설치 문서 루트 (추기) Swiper의 버전을 6계라면 페지네이션...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
