Arrows in the center of swiper slider-CodePudding

Can anyone help me to write HTML and JS code for implementing arrows in the center of the slider like on the image below? I had a problem for some time doing this, so if anyone can come up with something, I would be very grateful. You can also visit https://xd.adobe.com/view/e9006d17-86b0-416d-b018-9c767c9cfc8f-bc53/ to see the arrows I'm talking about.

swiper slider arrows in the center

CodePudding user response：

The below code will help you in making the swiper arrows to the bottom center of the slider. You can adjust the left and right positions of the arrows by increasing or decreasing the 30px provided according to your wish.

.swiper-button-next, .swiper-button-prev {
    bottom: 0;
    top: auto;
    transform: translateX(-50%);
}

.swiper-button-prev {
    left: calc(50% - 30px);
}

.swiper-button-next {
    right: calc(50% - 30px);
}

CodePudding user response：

var swiper = new Swiper('.swiper-container', {
            nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 3,
        spaceBetween: 0,
        autoplay: 3500,
        autoplayDisableOnInteraction: false,
            loop: true
    });

.swiper_wrap{
  position:relative
}

.swiper-button-next, .swiper-button-prev {
    bottom: -50px !important;
    top: unset !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
}

.swiper-button-prev {
    left: -30px !important;
}

.swiper-button-next {
    left: 30px !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet"/>
        <div >

<div >
<div >
       <div ></div>
        <div >
            <div >
                <div >
                    <a href="#">
          <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
                    </a>
                </div>
        <div >
                    <a href="#">
          <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
                    </a>
                </div>
        <div >
                    <a href="#">
          <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
                    </a>
                </div>
        <div >
                    <a href="#">
          <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
                    </a>
                </div><div >
                    <a href="#">
          <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png">
                    </a>
                </div>
            </div>
        <!-- Add Pagination -->
        <div ></div>
        </div>
       <div ></div>
</div>   
</div>
</div>
<script src="http://www.jakse.si/test/jakse/taxi/js/swiper.min.js"></script>