技術標籤：Javaweb心得bootstrap

程式碼：

<link rel="stylesheet" href="dist/css/swiper.min.css">
    <script src="dist/js/swiper.min.js"></script>
      <script src="dist/js/jquery.min.js"></script>

    <style type="text/css">
        /*關於電影圖片滾動效果*/
      .swiper-container {
        width: 75%;
        height: 58%;
        margin-top: 20px;
        image-rendering: auto;
      }
      .swiper-slide {                // 預設設定slide寬度為螢幕的80%
      text-align: center;
        font-size: 18px;
        background: #fff;
        width: 20%;
      }
<style >
 

<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><a href="movie1.jsp"/><image src="img/OneDay.jpg" alt=""/> </div>

      <div class="swiper-slide"><a href="movie2.jsp"/><image src="img/功夫.jpg" alt=""/></div>

      <div class="swiper-slide"><a href="movie4.jsp"/><image src="img/尋夢環遊記.jpg" alt=""/></div>

      <div class="swiper-slide"><a href="movie3.jsp"/><image src="img/唐伯虎點秋香.jpg" alt=""/></div>

      <div class="swiper-slide"><a href="movie5.jsp"/><image src="img/怦然心動.jpg" alt=""/></div>

      <div class="swiper-slide"><a href="movie6.jsp"/><image src="img/無間道.png" alt=""/></div>

      <div class="swiper-slide"><a href="movie7.jsp"/><image src="img/暖暖內含光.jpg" alt=""/></div>

      <div class="swiper-slide"><a href="movie8.jsp"/><image src="img/愛樂之城.jpg" alt=""/></div>

      <div class="swiper-slide"><a href="movie9.jsp"/><image src="img/縱橫四海.jpg" alt=""/></div>

      <div class="swiper-slide"><a href="movie10.jsp"/><image src="img/這個殺手不太冷.jpg" alt=""/></div>

      <div class="swiper-slide"><a href="movie11.jsp"/><image src="img/長江七號.jpg" alt=""/></div>

      <div class="swiper-slide"><a href="movie12.jsp"/><image src="img/霸王別姬.jpg" alt=""/></div>
       </div>

    <!-- 如果需要分頁器 -->
         <div class="swiper-pagination"></div>

         <!-- 如果需要導航按鈕 -->
         <div class="swiper-button-prev"></div>
         <div class="swiper-button-next"></div>

         <!-- 如果需要滾動條 -->
         <div class="swiper-scrollbar"></div>
     </div>

<script>
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal', // 垂直切換選項
    loop: true, // 迴圈模式選項
    slidesPerView : 4,  // 100%寬度情況下，顯示4個slide，（原理就是設定每個slide的寬度為25%）
    mousewheel: true,
    spaceBetween : 15,
  })
  var mySwiper = new Swiper('.swiper-container',{
    slidesPerView : 'auto',  // 開啟自定義slide寬度，配合下面css樣式設定即可
    // 如果需要分頁器
    pagination: {
      el: '.swiper-pagination',
    },
    // 如果需要前進後退按鈕
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // 如果需要滾動條
    scrollbar: {
      el: '.swiper-scrollbar',
    },

  })
</script>
 

效果：

點選左右按鈕即可滑動圖片