Issue
How can I customize the arrow buttons below from swipers?
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
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.
<div class="swiper-button-next hide-for-small-only hide-for-medium-only" style="border: 1px solid red; background-color: yellow; padding: 30px; ></div>
The entire code:
.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>
I don't want the margin.
Any ideas?
EDIT:
How do I change the colour blue on the arrow to 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;
}
Does not work of course!
Solution
"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:
.class {
margin: 0 !important;
}
Otherwise set right
property to 0
:
.class {
right: 0;
}
Or
.class {
right: 0 !important;
}
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.
Answered By - Commercial Suicide
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.