javascripthtmlcssswiper.js

How to customize arrow buttons in Swiper

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.