Owl Carousel 2 基本使用方法 (javascript 輪播套件)

Owl Carousel 2 是一個簡易使用的輪播js套件，只要在網頁中加入一些語法即可加入輪播，可根據需要輪播圖片或圖文區塊等...

加入 jquery 和 Owl Carousel 2 的 js 和 css。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

在元素中加入 "owl-carousel", "owl-theme" 這兩個 class。

<div class="owl-carousel owl-theme">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

在元素後面加入 script，讓程式開始動作。

<script>
$('.owl-carousel').owlCarousel({
  loop:true,
  margin:10,
  nav:true,
  dots:true,
  responsive:{
    0:{
      items:1
    },
    600:{
      items:3
    },
    1000:{
      items:5
    }
  }
})
</script>

更多 Owl Carousel 2 使用方法與參數可參考：Owl Carousel 2

這個網誌中的熱門文章

SwiftUI設定深色模式

在SwiftUI中設定頁面為深色模式。 preferredColorScheme 只需在最外層頁面加入方法 .preferredColorScheme(.dark) 。 括號內可用的值有 .none 、 .dark 、 .light 。 NavigationView {   ... } .preferredColorScheme(.dark) 取得App目前的顏色模式 此環境參數可取得App目前的顏色模式，使用 preferredColorScheme 修改顏色模式後，此值就會更新。 @Environment(\.colorScheme) private var colorScheme
Read more...

從零開始設置建立Next.js網站所需環境 (macOS)

試著建置開發Next.js網站所需要的環境吧！ 最近又想整理一下自己的網站，找了許多資料後，打算以Next.js + Github Pages的方式來建立自己的網站。 現在就一起來看看，使用Next.js所需的環境要如何建置吧！ 零、安裝command line developer tools 如果mac電腦還没有安裝過command line developer tools，安裝nvm時可能會遇到一些麻煩，如果還没安裝過，先安裝一下吧～ xcode-select --install 一、安裝 nvm 其實不安裝nvm也可以，只是如果以後Node.js要升級好像有點麻煩；還有許多不同的Node.js版本管理器，挑選自己喜歡的安裝吧～ 這裡以安裝nvm為例，安裝時需要在使用者資料夾中有.zshrc這個文件，如果没有，就需要先新增一下再安裝。 安裝完成後​​，​輸入 source ~/.zshrc 讓終端機​讀到.zshrc的內容，​再​輸入nvm -v檢查一下有没​有​安裝​成功​。 touch ~/.zshrc curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash source ~/.zshrc nvm -v 二、安裝Node.js、npm 再來就可以用nvm安裝Node.js了，安裝Node.js就會一起安裝npm，只要執行 nvm install --lts 就會自動安裝最新的Node.js LTS版本。 nvm install --lts node -v npm -v 如果要安裝特定版本就把—lts改為需要的版本編號，例如 nvm install 18.5.0 即可。 三、建立新Next.js網站 安裝完Node.js後，就可以使用 npx 建立Next.js網站了；先將終端機移動到要建立網站的資料夾，執行 npx create-next-app 後，會詢問要新增的專案名稱，填完就會在所在位置新增專案資料夾並下載Next.js網站所需的檔案。 檔案下載完成後，基本的Next.js網站也就完成囉！ npx create-next-app 四、執行網站 執行 npm run dev 就可以將網站在本地運行起來，開啟瀏覽器連上http://localhost:3...
Read more...

AOS 基本使用方法 (javascript 捲軸動畫)

AOS 讓你的網頁只需加入一些簡單的語法 ，就能根據目前頁面捲動到的位置對元素執行指定的動畫。 加入 AOS 的 js 和 css。 {code} <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet" /> <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> {/code} 在元素中加入 data-aos="fade-up", data-aos="fade-down" ...等屬性。 {code} <div data-aos="fade-up"></div> <div data-aos="fade-down"></div> <div data-aos="fade-right"></div> <div data-aos="fade-left"></div> {/code} 在元素後面加入 script，讓程式開始動作。 {code} <script>   AOS.init(); </script> {/code} 更多 AOS 使用方法與參數可參考：AOS
Read more...