JS-4-6

by jiaxin520

HTML

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <title> JavaScript Example 4-6</title>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=2">
 <link rel="stylesheet" href="">
 </head>
 <body>
 <!--<div 
 data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'> 
  也可直接加在 html裡調整  -->
 
<div  class="slick ">
  <div><img src="https://plus.unsplash.com/premium_photo-1743628668497-9cbbb504e83c?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyfHx8ZW58MHx8fHx8"></div>
  <div><img src="https://images.unsplash.com/photo-1746469471553-afa9f34157fd?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwzfHx8ZW58MHx8fHx8"></div>
   <div><img src="https://images.unsplash.com/photo-1746591948888-7cc1e170c17b?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw0fHx8ZW58MHx8fHx8"></div>
    <div><img src="https://images.unsplash.com/photo-1743380628166-7dc4fd7d1af0?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw4fHx8ZW58MHx8fHx8"></div>
     <div><img src="https://plus.unsplash.com/premium_photo-1670282393309-70fd7f8eb1ef?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8Z2lybHxlbnwwfHwwfHx8MA%3D%3D"></div>
</div>
</body>
 <!--引用JS -->
    <script src=""></script>
    <script type="text/javascript" src=""></script>

CSS

*{
    box-sizing: border-box;
}
body{
border:0.5px solid black;
margin:40px;
border-radius:10px;
box-shadow:10px 0;
  background-color:rgba(	219, 112, 147,0.6);
}
div{
  border-radius:10px;

}
img{
  padding:10px 20px 10px 20px;
  width:100%;
 aspect-ratio: 1 / 1;
object-fit:cover;   
display:block;
}

JavaScript

$('.slick ').slick({
 dots: true,  // 是否 下方原點
  infinite: true, // 是否 循環
    slidesToShow: 1, // 顯示目前圖片數量
slidesToScroll: 1, // 一次看到一張
  speed: 500, // 輪轉速度 數字越大越慢
    fade: true, // 淡入 及淡出
    cssEase: 'linear'//css 移動效果
});