JavaScript 系列四：第6課

── kenwheeler/slick 套件(横向)

by applelily

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列四：第6課 ── kenwheeler/slick 套件(標向)</title>
    <link rel="stylesheet"  href="./06_kenwheeler-slick.css">

    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>


</head>
  <body>

  <div class="wrap_carousel">
    <ul class="container_carousel">
      <li>
        <img src="
        https://images.unsplash.com/photo-1706704650109-c175d4e2fa05?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Pain de Compagne Rond">
        
      </li>
      <li>
        <img src="
        https://images.unsplash.com/photo-1590301748388-83b679430cb2?q=80&w=1548&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Pain de Poppy seeds">
        
      </li>
      <li>
        <img src="
        https://images.unsplash.com/photo-1609501675822-a69647f44358?q=80&w=1472&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Pain de Mie au Poppy seeds">
        
      </li>
      <li>
        <img src="
        https://images.unsplash.com/photo-1650626105235-a244ad2eb4d2?q=80&w=1587&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Pain de Raisin">
        
      </li>
      <li>
        <img src="
        https://images.unsplash.com/photo-1552056413-b8b5eed0170b?q=80&w=1458&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Pain de Mie brioche">
        
      </li>
      <li>
        <img src="
       ...

CSS

*{
    margin:0;
    padding:0;
    list-style: none;
    box-sizing: border-box;
}
/* body{
    background-color: rgba(31, 74, 144, 0.909);
} */
.container_carousel{
    width: 450px;
    margin: auto;
}


img{
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

.slick-prev:before ,.slick-next:before {
    font-size: 30px  !important;
    color: rgb(62, 3, 3) !important;
    
    /* background-color: #eee; */
  }
  .slick-prev{
   left: -35px !important;
  }

JavaScript

$('.container_carousel').slick(
  {
      slidesToShow: 1,
      arrows: true,
      dots: true,
      infinite: true,
      speed: 500,
      fade: true,
      cssEase: 'linear',
      autoplay: true,
      autoplaySpeed: 3000,
    }
);