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/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>


</head>
  <body>

    <div class="slickslider">
        <ul class="slider-nav">
          <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;
}

.slickslider{
    /* margin: 2rem 5rem; */
    margin: 1rem auto;
    max-width: 600px;
    display: flex;
}

.slider-for{
    width: 85%;

    /* border: 1px solid #484646; */
}

.slider-for p{
    color:rgb(21, 57, 99);
    font-size: 18px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
}

.slider-for img{
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
}

.slider-nav{
    width: 15%;
    height: 100%;
    margin-right: 1rem ;
    /* border: 1px solid #484646; */
}
.slider-nav img{
    margin: 0.5rem;
    width: 100%;
    height: auto;
}

JavaScript

$(document).ready(function () {
  $('.slider-for').slick({
    slidesTosShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });
  
  $('.slider-nav').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    centerMode: true,
    focusOnSelect: true,
    vertical: true,
  });
})