###### tags:`Javascript套件`

# Swiper 幻燈片/跑馬燈 (RWD/滑鼠滑入滑動停止/改ICON)

[SWIPER](https://swiperjs.com/)

[完成品](https://corly74.github.io/F2eComponent/swiper/swiper.html)

/ html

  <div class="container d-flex justify-content-between my-5">
        <h4 class="text-secondary course-section-title">Let's start learning,<span>John Q.Public</span> </h4>
        <a href="" class="text-decoration-none text-body course-section-title go-to-study ">
            <h5 class=" ">My learning ></h5>
        </a>
    </div>

    <div class="container">

    <div class="swiper-container py-5 " style="">

        <div class="swiper-wrapper" style="height: auto;">
            <div class="swiper-slide d-flex   my-learning-cover shadow-sm">

                <div class="col-4 my-learning-cover-video" style="">

                    <div class="my-learning-cover-play-icon"></div>

                </div>


                <div class="col-8">
                    <p class=""><small>IELTS BEGINNER</small> </p>

                    <p>Grammar-Reported Speech</p>
                </div>



            </div>


            <div class="swiper-slide d-flex my-learning-cover shadow-sm">


                <div class="col-4 my-learning-cover-exercise" style="">

                    <div class="my-learning-cover-paper-icon"></div>

                </div>


                <div class="col-8">
                    <p class=""><small>IELTS BEGINNER</small> </p>

                    <p>Basic Vocabulary Listv.1-Exercise 1.4</p>
                </div>
            </div>

            <div class="swiper-slide d-flex my-learning-cover shadow-sm">

                <div class="col-4 my-learning-cover-book" style="">

                    <div class="my-learning-cover-book-icon"></div>

                </div>


                <div class="col-8">
                    <p class=""><small>IELTS BEGINNER</small> </p>

                    <p>Basic Grammar Past - was/were / Theory</p>
                </div>
            </div>


            <div class="swiper-slide d-flex my-learning-cover shadow-sm">


                <div class="col-4 my-learning-cover-exercise" style="">

                    <div class="my-learning-cover-paper-icon"></div>

                </div>


                <div class="col-8">
                    <p class=""><small>IELTS BEGINNER</small> </p>

                    <p>Basic Vocabulary Listv.1-Exercise 1.4</p>
                </div>
            </div>


            <div class="swiper-slide d-flex   my-learning-cover shadow-sm">

                <div class="col-4 my-learning-cover-video" style="">

                    <div class="my-learning-cover-play-icon"></div>

                </div>


                <div class="col-8">
                    <p class=""><small>IELTS BEGINNER</small> </p>

                    <p>Grammar-Reported Speech</p>
                </div>



            </div>

            <div class="swiper-slide d-flex my-learning-cover shadow-sm">

                <div class="col-4 my-learning-cover-book" style="">

                    <div class="my-learning-cover-book-icon"></div>

                </div>


                <div class="col-8">
                    <p class=""><small>IELTS BEGINNER</small> </p>

                    <p>Basic Grammar Past - was/were / Theory</p>
                </div>
            </div>



        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next button-next" style=""></div>
        <div class="swiper-button-prev button-prev"></div>
    </div>

### pre next BTN 客製化

/隱形掉原本的btn

.swiper-button-prev{

color: rgb(255, 255, 255,0)

}

.swiper-button-next{
    color: rgb(255, 255, 255,0)
}

/客製btn

.button-next{
    position: absolute;
  width: 50px;
  height: 50px;
  bottom: 50px;
  border-radius: 50%;
  text-align: center;
  display: block;
  cursor: pointer;
background-color: white;
  box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
  transition: 0.2s;
  -webkit-transition: 0.2s;

  /* 調整pre btn位置 */
  right: 409px;
    top: 370px;
}

.button-next:hover{
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.4);
  transition: 0.3s;
  -webkit-transition: 0.3s;
}




  .button-next:before{
    position: absolute;
  
    font-family: "Font Awesome 5 Free";
     font-weight: 900;
      content: "\f054";
      margin-left:7px;
      margin-top: 7px;
     font-size: 24px;
    color:#007aff;
    
  }


  .button-prev{

    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 50px;
    border-radius: 50%;
    text-align: center;
    display: block;
    cursor: pointer;
  
    background-color: white;
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.3);
    transition: 0.2s;
    -webkit-transition: 0.2s;

    /* 調整pre btn位置 */
    left: 415px;
    top: 370px;
  }

<script>
        $(function () {
            var swiper = new Swiper('.swiper-container', {
                autoplay: 90000,
                delay: 55000,
                speed: 55000,
                loop: true,
                slidesPerView: 3,
                spaceBetween: 20,

                breakpoints: {
                    320: {
                        slidesPerView: 1,
                        spaceBetween: 15,
                    },
                    768: {
                        slidesPerView: 3,
                        spaceBetween: 15,

                    }


                },


                freeMode: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },


                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },



            });

            $(".swiper-container").hover(function () {
                (this).swiper.autoplay.stop();
            }, function () {
                (this).swiper.autoplay.start();
            });
        });
    </script>