Have fun! 新手也能打造的Javascript微型專案! Day10: 想展示照片給朋友們看？寫個簡單的image slider吧！（上）

2022 iThome 鐵人賽

DAY 10

Modern Web

Have fun! 新手也能打造的Javascript微型專案系列第 10 篇

Have fun! 新手也能打造的Javascript微型專案! Day10: 想展示照片給朋友們看？寫個簡單的image slider吧！（上）

14th鐵人賽

windate3411

團隊桌遊玩樂團

2022-09-23 17:44:11

1487 瀏覽

分享至

tags: `ItIron2022` `Javascript`

前言

今天我們來處理做一個目前不論任何社群網站或平台都很常見的組件:image-slider，在有些框架中則將其稱為carousel，簡單來說就是一個固定的區塊讓你滑動各種照片的東西！實際上自己寫一個並不是這麼困難，這兩天的內容會相對簡短很多，放輕鬆一起來看看吧！

預期成果

我們要做的是一個最常見的image-silder形式，也就是可以自由左右滑動切換照片同時有著小點點(indicator)讓你點擊後滑到指定的照片，如下圖的示範。

demo

Getting started

Step1: 專案結構

一樣先建立一個資料夾，並在裡面新增index.html, style.css, script.js檔案，同時要請你先到這邊下載我這次示範用的圖片，當然你也可以自己找喜歡的圖片做練習，基本結構弄完後請你在index.html中寫入以下的內容

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Gallery</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <div class="gallery">
      <div class="image-slider">
        <img src="./cordyceps-g6aed79649_1280.jpeg" alt="" data-index="0" />
        <img src="./music-gde5d9786d_1280.jpeg" alt="" data-index="1" />
        <img src="./read-gaae49eae0_1280.jpeg" alt="" data-index="2" />
      </div>
      <div class="indicators">
        <div class="indicator active"></div>
        <div class="indicator"></div>
        <div class="indicator"></div>
      </div>
    </div>
  </body>
</html>

html的結構相當單純，大致上就是以下兩個部分

structure demo

到目前為止你的專案結構應該是與這個類似，js & css檔案先留空白沒關係。

folder structure

Step2: 樣式處理

你可能會好奇為什麼這次突然獨立把style的部分拿出來處理而不是跟之前一樣直接給程式碼，原因在於這次用到的屬性我認為值得提出來講一下，請你仔細看一下demo，曾經要做這樣出"每次捲動都到圖片中央"是相當麻煩的事情，但我們現在可以透過一個新增的css屬性輕鬆地達到這樣的效果，首先我們先將基本的style寫好，請你在css檔案先寫入以下的內容。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  display: none;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ebebeb;
}

.gallery {
  height: 450px;
  width: 800px;
  position: relative;
}

.image-slider {
  height: 100%;
  width: 100%;
  overflow-x: auto;
  display: flex;
}

img {
  width: 100%;
  flex-shrink: 0;
}

.indicators {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
}

.indicator {
  border-radius: 50%;
  background-color: lightgray;
  height: 10px;
  width: 10px;
  cursor: pointer;
}

.active {
  background: #ffffff;
  height: 16px;
  width: 16px;
}

此時你的畫面看起來應該是這樣，乍看之下並沒有什麼問題！

demo

不過你一旦左右滑動，便會發現一個小問題，根據你的捲動幅度，圖片會出現被裁切的情況，本來這也沒什麼大不了，因為一般的捲動本來就是這樣，但若這是image-slider這樣的東西，我們會希望每次捲動時都是做完整圖片的切換。

right demo

這種時候我們就會需要兩個屬性的幫忙了

scroll-snap-type

決定當突然停止捲動時要怎麼決定捲動停止的位置，可以分別控制x, y 或是both的捲動行為，有mandatory & proximity兩個值，mandatory會在停止捲動時自動去找附近的斷點，proximity則是要很接近下一個元素才會將其視為斷點。

scroll-snap-align

決定當突然停止捲動時，子層的元素要如何與父層對齊，有start, end & center三個值可選。

scroll-snap是指使用者突然停止捲動時的情況，跟flex & grid這類的新屬性都一樣分為parent & child層，其中scroll-snap-type用在parent, scroll-snap-align則用在child上。

理解語法的基本後我們就快速加上這兩個屬性吧！請你稍稍修改以下兩個class

.image-slider {
  height: 100%;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory; // 加入這行
  display: flex;
}

img {
  width: 100%;
  flex-shrink: 0;
  scroll-snap-align: center; // 加入這行
}

再次回到預覽畫面中你會發現一切都很美好，就如我們的demo一樣！斷的乾乾淨淨！

總結

今天我們完成了基本的image-slider，不過你會發現目前僅有左右滑動的功能，indicator不但無法被點擊，同時也不會因為照片的滑動而改變，這個部分就需要js的幫忙了！明天我們會補上js邏輯的部份，你也可以先思考一下你打算如何實現我demo中的效果！

文章中的範例程式碼可以在這邊取得，歡迎自行取用

轉職Q & A

Danny，我順利地收到一些面試邀約了，不過他跟我說需要先跟HR做phone screen，這又是什麼玩意啊？

一般在現在的面試流程中，通常會先由HR做第一關的審查，在這個過程中主要是想了解你的個人特質以及過去的一些經驗，用來判斷這樣的人是否適合他們的團隊，也就是所謂的culture fit的測試！過程中一般會較為輕鬆，技術層面的問題會較少或甚至沒有(但如果是一些等級比較高的企業像是FAANG之類的，通常在這一關就會有一些技術的快問快答)。

但千萬不要因為這樣你就放鬆警惕，這與其他的面試關卡同等、甚至更為重要，許多團隊比起技術更在乎人格特質，務必要做好準備對待，一般來說你需要充分準備好以下的部分