Next and previous button are not working in Swiper

橙三吉。 提交于 2021-01-04 10:36:12

问题


I'm currently working on Angular 8. I am using swiper slider. But it didn't show the previous and next buttons. Following is my code. Any help would be very much appreciated. Thank You

My HTML Code

   <section class="browse-cat u-line section-padding">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="category-slider swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide myreward-slider-item col-md-4" style="margin-right: 100px;" *ngFor="let reward of readableRewards">
                                <a href="javascript:void(0);">
                                    <div class="myreward-slider-img">
                                        <img
                                        src="{{reward?.Image}}"
                                        class=""
                                        alt="rewards">
                                    </div>
                                </a>
                                <div class="row">
                                    <div class="col-md-6 text-left padding-20">
                                        <span class="text-light-black cat-name"><b>{{reward?.Title}}</b></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

My CSS Code

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 14px;
  font-weight: 900;
  color: #ff0018;
  background: #ff0018;
}

.swiper-button-next {
  right: 10px;
}

.swiper-button-prev {
  left: 10px;
}

.swiper-button-disabled {
  display: none;
}

来源:https://stackoverflow.com/questions/63793878/next-and-previous-button-are-not-working-in-swiper

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!