How can I customize the arrow buttons below from swipers?
JavaScript
x
3
1
<div class="swiper-button-next"></div>2
<div class="swiper-button-prev"></div>3
I did it crudely but it does not seem to be the right way because I get some margin on the right of the button.
JavaScript
1
2
1
<div class="swiper-button-next hide-for-small-only hide-for-medium-only" style="border: 1px solid red; background-color: yellow; padding: 30px; ></div>2
The entire code:
JavaScript
1
87
87
1
.swiper-container {2
width: 100%;3
height: 450px;4
}5
6
.swiper-slide {7
/* Center slide text vertically */8
display: -webkit-box;9
display: -ms-flexbox;10
display: -webkit-flex;11
display: flex;12
-webkit-box-pack: center;13
-ms-flex-pack: center;14
-webkit-justify-content: center;15
justify-content: center;16
-webkit-box-align: center;17
-ms-flex-align: center;18
-webkit-align-items: center;19
align-items: center;20
}21
22
.swiper-slide {23
font-size: 18px;24
-webkit-box-sizing: border-box;25
box-sizing: border-box;26
}27
28
.swiper-banner-slide {29
-webkit-background-size: cover;30
background-size: cover;31
background-position: center;32
}33
34
.swiper-slide .title {35
font-family: 'Bellefair', serif;36
font-size: 41px;37
line-height: 40px;38
font-weight: 300;39
}40
41
.swiper-slide .subtitle {42
font-size: 21px;43
}44
45
.swiper-slide .text {46
font-size: 21px;47
letter-spacing: 1px;48
}49
50
.slide-info-container {51
color: #000;52
}53
54
.swiper-block {55
padding: 40px 0 40px;56
background: #eee;57
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;58
font-size: 14px;59
color: #000;60
margin: 0;61
/*padding: 0;*/62
}63
64
.swiper-block .swiper-container {65
width: 100%;66
height: 300px;67
margin: 20px auto;68
}69
70
.swiper-block .swiper-slide {71
text-align: center;72
font-size: 18px;73
background: #fff;74
/* Center slide text vertically */75
display: -webkit-box;76
display: -ms-flexbox;77
display: -webkit-flex;78
display: flex;79
-webkit-box-pack: center;80
-ms-flex-pack: center;81
-webkit-justify-content: center;82
justify-content: center;83
-webkit-box-align: center;84
-ms-flex-align: center;85
-webkit-align-items: center;86
align-items: center;87
}JavaScript
1
181
181
1
<!-- CDN -->2
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>3
4
<!-- Zurb - CDN -->5
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">6
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>7
8
<!-- Swiper - CDN -->9
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css">10
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">11
12
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>13
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>14
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.js"></script>15
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>16
17
<main>18
19
<div class="row" id="banner">20
21
<!-- Swiper -->22
<div class="swiper-container">23
<div class="swiper-wrapper">24
25
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/1.jpg')">26
27
<!-- grid container -->28
<div class="grid-container">29
<div class="grid-x grid-padding-x">30
<div class="small-12 medium-10 large-8 cell slide-info-container">31
<h3 class="title">Aliquam dictum mattis velit 1</h3>32
<div class="text">33
<p>Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. </p>34
</div>35
<a href="#features" class="hollow button button-details">More Details</a>36
</div>37
</div>38
</div>39
<!-- grid container -->40
41
</div>42
43
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/2.jpg')">44
45
<!-- grid container -->46
<div class="grid-container">47
<div class="grid-x grid-padding-x">48
<div class="small-12 medium-10 large-8 cell slide-info-container">49
<h3 class="title">Aliquam dictum mattis velit 2</h3>50
<div class="text">51
<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>52
</div>53
<a href="#features" class="hollow button button-details">More Details</a>54
</div>55
</div>56
</div>57
<!-- grid container -->58
59
</div>60
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/3.jpg')">61
62
<!-- grid container -->63
<div class="grid-container">64
<div class="grid-x grid-padding-x">65
<div class="small-12 medium-10 large-8 cell slide-info-container">66
<h3 class="title">Aliquam dictum mattis velit 3</h3>67
<div class="text">68
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. </p>69
</div>70
<a href="#features" class="hollow button button-details">More Details</a>71
</div>72
</div>73
</div>74
<!-- grid container -->75
76
</div>77
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/4.jpg')">78
79
<!-- grid container -->80
<div class="grid-container">81
<div class="grid-x grid-padding-x">82
<div class="small-12 medium-10 large-8 cell slide-info-container">83
<h3 class="title">Aliquam dictum mattis velit 4</h3>84
<div class="text">85
<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>86
</div>87
<a href="#features" class="hollow button button-details">More Details</a>88
</div>89
</div>90
</div>91
<!-- grid container -->92
93
</div>94
<div class="swiper-slide swiper-banner-slide" style="background-image: url('images/5.jpg')">95
96
<!-- grid container -->97
<div class="grid-container">98
<div class="grid-x grid-padding-x">99
<div class="small-12 medium-10 large-8 cell slide-info-container">100
<h3 class="title">Aliquam dictum mattis velit 5</h3>101
<div class="text">102
<p>Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.</p>103
</div>104
<a href="#features" class="hollow button button-details">More Details</a>105
</div>106
</div>107
</div>108
<!-- grid container -->109
110
</div>111
</div>112
<!-- Add Pagination -->113
<div class="swiper-pagination"></div>114
<!-- Add Arrows -->115
<div class="swiper-button-next hide-for-small-only hide-for-medium-only" style="border: 1px solid red; background-color: yellow; padding: 30px; ></div>116
<div class=" swiper-button-prev hide-for-small-only hide-for-medium-only "></div>117
</div>118
<!-- Swiper -->119
120
</div>121
122
<!-- row block -->123
<div class="row swiper-block ">124
125
<div class="grid-container ">126
<div class="grid-x grid-padding-x ">127
128
<div class="small-12 cell ">129
<!-- Swiper -->130
<div class="swiper-container ">131
<div class="swiper-wrapper ">132
<div class="swiper-slide ">Slide 1</div>133
<div class="swiper-slide ">Slide 2</div>134
<div class="swiper-slide ">Slide 3</div>135
<div class="swiper-slide ">Slide 4</div>136
<div class="swiper-slide ">Slide 5</div>137
<div class="swiper-slide ">Slide 6</div>138
<div class="swiper-slide ">Slide 7</div>139
<div class="swiper-slide ">Slide 8</div>140
<div class="swiper-slide ">Slide 9</div>141
<div class="swiper-slide ">Slide 10</div>142
</div>143
<!-- Add Pagination -->144
<div class="swiper-pagination "></div>145
</div>146
</div>147
148
</div>149
</div>150
151
</div>152
153
</main>154
155
<script>156
$(function() {157
$(document).foundation();158
159
var swiper = new Swiper('#banner .swiper-container', {160
pagination: '#banner .swiper-pagination',161
slidesPerView: 1,162
paginationClickable: true,163
centeredSlides: true,164
spaceBetween: 30,165
loop: true,166
keyboardControl: true,167
nextButton: '#banner .swiper-button-next',168
prevButton: '#banner .swiper-button-prev',169
});170
171
172
var swiper2 = new Swiper('.swiper-block .swiper-container', {173
pagination: '.swiper-block .swiper-pagination',174
slidesPerView: 5,175
paginationClickable: true,176
spaceBetween: 30,177
freeMode: true,178
keyboardControl: false,179
});180
});181
</script>I don’t want the margin.
Any ideas?
EDIT:
How do I change the colour blue on the arrow to black?
JavaScript
1
11
11
1
.swiper-button-next,2
.swiper-button-prev {3
background-color: white;4
background-color: rgba(255, 255, 255, 0.5);5
right:10px;6
padding: 30px;7
color: #000 !important;8
fill: black !important;9
stroke: black !important;10
}11
Does not work of course!
Advertisement
Answer
“I don’t want the margin. Any ideas?”
If the margin is really the margin, not the result of right property, try to overwrite default “swipers” styles using !important, like this:
JavaScript
1
4
1
.class {2
margin: 0 !important;3
}4
Otherwise set right property to 0:
JavaScript
1
4
1
.class {2
right: 0;3
}4
Or
JavaScript
1
4
1
.class {2
right: 0 !important;3
}4
If it doesn’t work without !important.
“How do I change the colour blue on the arrow to black?”
If you just want to make them black, you can simply use one of the built-in classes (swiper-button-black in your case) – thanks to this comment.