如何从 swipers 自定义下方的箭头按钮?
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
我做的很粗暴,但似乎不是正确的方法,因为我在按钮右侧得到了一些余量。
<div class="swiper-button-next hide-for-small-only hide-for-medium-only" style="border: 1px solid red; background-color: yellow; padding: 30px; ></div>
完整代码:
.swiper-container {
width: 100%;
height: 450px;
}
.swiper-slide {
/* 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-slide {
font-size: 18px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.swiper-banner-slide {
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.swiper-slide .title {
font-family: 'Bellefair', serif;
font-size: 41px;
line-height: 40px;
font-weight: 300;
}
.swiper-slide .subtitle {
font-size: 21px;
}
.swiper-slide .text {
font-size: 21px;
letter-spacing: 1px;
}
.slide-info-container {
color: #000;
}
.swiper-block {
padding: 40px 0 40px;
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
/*padding: 0;*/
}
.swiper-block .swiper-container {
width: 100%;
height: 300px;
margin: 20px auto;
}
.swiper-block .swiper-slide {
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;
}
<!-- CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Zurb - CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<!-- Swiper - CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
<main>
<div class="row" id="banner">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/1.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 1</h3>
<div class="text">
<p>Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. </p>
</div>
<a href="#features" class="hollow button button-details">More Details</a>
</div>
</div>
</div>
<!-- grid container -->
</div>
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/2.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 2</h3>
<div class="text">
<p>Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.</p>
</div>
<a href="#features" class="hollow button button-details">More Details</a>
</div>
</div>
</div>
<!-- grid container -->
</div>
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/3.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 3</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. </p>
</div>
<a href="#features" class="hollow button button-details">More Details</a>
</div>
</div>
</div>
<!-- grid container -->
</div>
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/4.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 4</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. </p>
</div>
<a href="#features" class="hollow button button-details">More Details</a>
</div>
</div>
</div>
<!-- grid container -->
</div>
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/5.jpg')">
<!-- grid container -->
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="small-12 medium-10 large-8 cell slide-info-container">
<h3 class="title">Aliquam dictum mattis velit 5</h3>
<div class="text">
<p>Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.</p>
</div>
<a href="#features" class="hollow button button-details">More Details</a>
</div>
</div>
</div>
<!-- grid container -->
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next hide-for-small-only hide-for-medium-only" style="border: 1px solid red; background-color: yellow; padding: 30px; ></div>
<div class=" swiper-button-prev hide-for-small-only hide-for-medium-only "></div>
</div>
<!-- Swiper -->
</div>
<!-- row block -->
<div class="row swiper-block ">
<div class="grid-container ">
<div class="grid-x grid-padding-x ">
<div class="small-12 cell ">
<!-- Swiper -->
<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 class="swiper-slide ">Slide 4</div>
<div class="swiper-slide ">Slide 5</div>
<div class="swiper-slide ">Slide 6</div>
<div class="swiper-slide ">Slide 7</div>
<div class="swiper-slide ">Slide 8</div>
<div class="swiper-slide ">Slide 9</div>
<div class="swiper-slide ">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination "></div>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
$(function() {
$(document).foundation();
var swiper = new Swiper('#banner .swiper-container', {
pagination: '#banner .swiper-pagination',
slidesPerView: 1,
paginationClickable: true,
centeredSlides: true,
spaceBetween: 30,
loop: true,
keyboardControl: true,
nextButton: '#banner .swiper-button-next',
prevButton: '#banner .swiper-button-prev',
});
var swiper2 = new Swiper('.swiper-block .swiper-container', {
pagination: '.swiper-block .swiper-pagination',
slidesPerView: 5,
paginationClickable: true,
spaceBetween: 30,
freeMode: true,
keyboardControl: false,
});
});
</script>
我不要保证金。
有什么想法吗?
编辑:
如何将箭头上的蓝色更改为black?
.swiper-button-next,
.swiper-button-prev {
background-color: white;
background-color: rgba(255, 255, 255, 0.5);
right:10px;
padding: 30px;
color: #000 !important;
fill: black !important;
stroke: black !important;
}
当然不行!
添加这个来设置上一个/下一个箭头的样式:
.swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;
}
.swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;
}
“4c71ae”是您要在 HEX 中使用的颜色。
:root {
--swiper-theme-color: #000;
}
试试这个而不是!重要的是改变颜色。
使用当前版本的 SwiperJS (v.5.3.8),您可以毫无问题地更改 css 中箭头的颜色。只需定义颜色即可。
.swiper-button-prev {
color: red;
}
.swiper-button-next {
color: #000;
}
那些想要更改默认箭头的人只需在 HTML 元素中设置自定义 SVG 等;我的是下一个和上一个
<div class="swiper-button-next">Next</div>
<div class="swiper-button-prev">Prev</div>
并删除 CSS 中的默认图标
.swiper-button-next::after, .swiper-button-prev::after {
content: "";
}
对于任何想要为 Swiper 更改各种按钮等的颜色等的人,请务必检查您要更改的内容的 CSS,看看您要更改的属性是否正在使用 CSS 变量。
如果使用了 CSS 变量,您需要重新定义它才能更改它。
更改滑动器下一个/上一个按钮颜色的示例:
底层 CSS:
.swiper-button-next, .swiper-button-prev {
position: absolute;
top: 50%;
width: calc(var(--swiper-navigation-size)/ 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size)/ 2));
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color,var(--swiper-theme-color));
}
将此添加到 styles.css(或 NextJS 中的 globals.css)
:root {
--swiper-navigation-color: #E49A38;
}
“我不想要保证金。有什么想法吗?”
如果 margin 真的是 margin,而不是
right
属性的结果,尝试使用 !important
覆盖默认的“swipers”样式,像这样:
.class {
margin: 0 !important;
}
否则将
right
属性设置为0
:
.class {
right: 0;
}
或
.class {
right: 0 !important;
}
如果没有
!important
就不行。
“如何将箭头上的蓝色更改为黑色?”
如果你只是想让它们变黑,你可以简单地使用一个内置类(
swiper-button-black
在你的情况下) - 感谢this comment.
如果你使用JavaScript,你也可以在页面/组件中更改
--swiper-navigation-color
,而不是在CSS文件中更改:root
。我发现它在 React/Next.js 中更方便。只需将其添加到您的代码中即可。
document.documentElement.style.setProperty("--swiper-theme-color", "#000")
如果您正在使用此解决方案并且正在构建 React/Next.js 应用程序,请记住在 useEffect 中包含上面的代码以在适当的时刻加载
document
(更多信息在这里)。
useEffect(() => {
document.documentElement.style.setProperty("--swiper-theme-color", "#000")
}, [])
如果您使用的是 React,除了@Jakub 之外的另一种方法是像这样将
style
道具传递给 Swiper
<Swiper style={{"--swiper-navigation-color": "#FFF", "--swiper-pagination-color": "#FFF"}}>
.....
</Swiper>
除 Typescript(生产中)外,这非常有效。您收到一个错误,该错误在开发过程中是静默的,但会阻止应用程序成功部署(在我的例子中是在 Vercel 上)。解决方法是像上面那样删除样式道具,并在我们的 CSS 中以更具体的方式定位我们需要样式化的元素(分页指示器、下一个按钮、上一个按钮等),以便覆盖 Swiper 的默认样式。使用
!important
也会覆盖样式,但它被认为是一种不好的做法,除非使用非常重要(没有双关语 xD)
如果您正在使用Angular,您可以简单地使用
::ng-deep
来override颜色。
例如:
::ng-deep .swiper-button-prev,
::ng-deep .swiper-button-next {
color: white;
}
.swiper-button-next::after, .swiper-button-prev::after{
content: "";
}
.swiper-button-next {
--swiper-navigation-color:white;
}
.swiper-button-prev {
--swiper-navigation-color:white;
}
如果你只是想让它们变成白色或黑色,你可以使用内置类。
<div class="swiper-button-prev swiper-button-white"></div>
或
<div class="swiper-button-next swiper-button-black"></div>
很简单
.main__swiper_left {
background-image: url("../img_2/main__swiper_left.png");
width: 58px;
height: 58px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.main__swiper_left::after {
display: none;
}
对于颜色,编辑第 13 行的 swiper-bundle.min.css,将 :root 属性更改为:
:root {
--swiper-theme-color: #FFFFFF;
}
这个解决方案对我有用:
// use the `useState` hook instead of `useRef`
const [prevEl, setPrevEl] = useState<HTMLElement | null>(null)
const [nextEl, setPrevEl] = useState<HTMLElement | null>(null)
<Swiper navigation={{ prevEl, nextEl }}>
// some slides
</Swiper>
<div ref={(node) => setPrevEl(node)}>prev</div>
<div ref={(node) => setNextEl(node)}>next</div>
.swiper.swiper-button-next {color: black; --swiper-navigation-size: 30px;}
.swiper.swiper-button-prev{color: black; --swiper-navigation-size: 30px;}
试试这个!增加和减少尺寸和改变颜色。 不要忘记在颜色属性后使用
!important
。
有很多方法可以自定义这些箭头。您只需要在 CSS 文件的 :root 中指定适当的参数。
:root {
--swiper-navigation-size: 16px; /* To edit the size of the arrows */
--swiper-navigation-color: #000; /* To edit the color of the arrows */
}
在我的例子中,我所做的是从配置选项中删除“导航”,而是使用我自己的自定义样式创建新的 html btn 元素,之后我添加了 Swiper 实例的 slideNext() 和 slidePrev() 方法。
const swiper = new Swiper(".mySwiper", {
slidesPerView: 4,
spaceBetween: 10,
keyboardControl: true,
});
const nextButton = document.querySelector('.next-and-prev-buttons .next');
const prevButton = document.querySelector('.next-and-prev-buttons .prev');
nextButton.addEventListener('click', function () {
swiper.slideNext();
});
prevButton.addEventListener('click', function () {
swiper.slidePrev();
});
对于那些寻求用自定义 SVG 图标替换默认箭头的人,使用的 Swiper 版本是
8.3.2
.
这是一个演示示例项目。
将
<img>
标签放入两个元素中。
<!-- Navigation arrows -->
<div class="swiper-button-prev">
<img src="@/assets/icons/svg/right-arrow.svg" />
</div>
<div class="swiper-button-next">
<img src="@/assets/icons/svg/right-arrow.svg" />
</div>
然后,移除 CSS 中的默认图标。
.swiper-button-prev::after,
.swiper-button-next::after {
display: none;
}
.swiper-button-prev img {
transform: rotate(180deg);
}
.swiper-button-prev {
color: green !important;
}
.swiper-button-next {
color: green !important;
}
如果你想改变颜色,你可以简单地执行以下操作,它会将当前颜色覆盖为白色......希望这会有用! 注意:您可以指定要更改的任何颜色!谢谢
.swiper-button-prev,.swiper-button-next{
color:white !important;
}
这对我有用。
.swiper-button-prev {
color: red !important;
}
.swiper-button-next {
color: red !important;
}