인프런 커뮤니티 질문&답변

jm_0512님의 프로필 이미지
jm_0512

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

slick slider 이미지 개수

작성

·

87

1

slick slider 로 slideToShow: 4로 해도 화면에는 이미지가 하나 밖에 안떠요 ㅠㅠ 전체 코드 복사해서 올리겠습니다..!

HTML/CSSjquery

답변 4

0

코딩웍스(Coding Works)님의 프로필 이미지
코딩웍스(Coding Works)
지식공유자

<!-- Slick.js -->

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="script/slick.min.js"></script>

경로가 절대경로 상대경로가 섞여 있습니다.

아마도 경로 문제로 제이쿼리 라이브러리 또는 슬릭 js 가 링크가 안되는 것 같습니다.

경로 아래처럼 변경해보세요.

그리고 제이쿼리 버전을 너무 낮은 것을 사용해서 그럴 수도 있습니다.

제이쿼리 버전도 올려주세요.

<!-- Slick.js -->

<script src="https://code.jquery.com/jquery-3.7.1.slim.js"</script>

<script type="text/javascript" src="script/slick.min.js"></script>

0

jm_0512님의 프로필 이미지
jm_0512
질문자

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Quicksand:wght@300..700&display=swap');

body {
    margin: 0;
    font-family: "Quicksand", sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #222;
}

a {
    text-decoration: none;
    color: #222;
}
/* Layout */
.container {}
header {
    display: flex;
}
header > div {
    height: 50px;
}
.logo {
    width: 150px;
}
.navi {
    flex: 1;
    height: 50px;
}
.menu-tap-inner {
    width: 80px;
    display: flex;
}
.menu-tap-inner > div {
    height: 50px;
}
.search {
    width: 30px;
}
.menu-tap {
    width: 50px;
}
.slide {
    height: 750px;
}
.coupon {
    height: 750px;
    margin-top: 100px;
}
.coupon_text {
    height: 120px;
}
.coupon_image {
    height: 600px;
}
.brand-story {
    height: 600px;
    margin-top: 100px;
}
.category {
    height: 600px;
}
.best-items {
    border: 1px solid black;
    height: 600px;
}
.news-tips {
    border: 1px solid black;
    height: 600px;
}
.instagram {
    border: 1px solid black;
    height: 600px;
}
footer {
    border: 1px solid black;
    height: 300px;
}
/* Layout */

/* Logo */
.logo a img {
    width: 150px;
}
/* Logo */

/* Navigation */

.navi ul {
    display: flex;
    margin-top: 23px;
}
.navi li {
    list-style: none; 
    text-align: center;
}
.navi li > a {
    font-weight: 600;
    padding: 0 35px;
}
.sub-menu {
    margin-top: 7px;
    padding: 5px;
    background-color: #fff;
    display: none;
    width: 100px;
    margin: auto;
}
.sub-menu  a {
    display: block;
    padding: 5px;
    color: #707070;
    font-size: 13px;
}
.sub-menu a:hover {
    color: black;
}
/* Navigation */

/* Search */
.search {
    display: flex;
    align-items: center;
}
.search a .fa-solid {
    font-size: 16px;
}
/* Search */

/* Menu-tap */
.menu-tap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-tap a .fa-solid {
    font-size: 20px;
}
/* Menu-tap */

/* Slide */
.slide {
    position: relative;
    z-index: -1;
    overflow: hidden;
}
.slide-image {
    position: relative;
}
.slide-image-inner {
    position: absolute;
    display: flex;
    width: 500%;
    height: 750px;
    font-size: 0;
}
.slide-image-inner a {
    width: calc(100% / 5);
    height: inherit;
}
.slide-image-inner a img {
    width: 100%;
    height: inherit;
    object-fit: cover;
}
/* Slide */

/* Coupon */
.coupon {}
.coupon_text {
    text-align: center;
}
.coupon_text h1 {}
.coupon_text p {
    font-size: 17px;
}
.coupon_image {
    text-align: center;
    transition: 0.5s;
}
.coupon_image a {}
.coupon_image a img {
    width: 500px;
}
.coupon_image a img:hover {
    opacity: 0.7;
}
/* Coupon */

/* Brand story */
.brand-story {
    overflow: hidden;
    position: relative;
}
.brand-story a {}
.brand-story a img {}
.brand-story-text {
    position: absolute;
    top: 50px;
    left: 200px;
    color: #fff;

}
.story-title h1 {
    font-size: 40px;
}
.story-text p {
    font-size: 17px;
    line-height: 1.6em;
}
/* Brand story */

/* Category */
.category {
    background-color: #f9f4ee;
    margin-top: -70px;
}
.category h1 {
    text-align: center;
    margin-top: 70px;
    font-weight: 500;
    padding-top: 70px;
}
.category-content {
    padding: 20px;
}
.category-content  > div {
    padding: 20px;
}
.category-content > div img {
    border-radius: 20px;
}

/* Category */

0

jm_0512님의 프로필 이미지
jm_0512
질문자

// Navigation
$('.navi li').mouseenter(function(){
    $(this).children('.sub-menu').stop().slideDown()
})
$('.navi li').mouseleave(function(){
    $('.sub-menu').stop().slideUp()
})

// Slide
setInterval(function(){
    $('.slide-items').animate({left: '-100%'}, function(){
        $('.slide-items').css({left:0})
        $('.slide-item:first-child').appendTo('.slide-items')
    })
}, 5500)

$(document).ready(function(){
    $('.category-content').slick({
        slideToShow: 4,
        slideToScroll: 1,
        autoplay: true,
        autoplaySpeed: 4000,
        fade: true,
        cssEase: 'linear', 
        infinite: true,
        centerMode: true,
        responsive: [
            {
                breakpoint: 1200,
                settings: {
                    slideToShow: 4,
                    slideToScroll: 1
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slideToShow: 2,
                    slideToScroll: 1
                }
            }
        ]
    })
});

0

jm_0512님의 프로필 이미지
jm_0512
질문자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>malanghoney_01</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- font-awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- aos.js -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <!-- slick.js -->
    <link rel="stylesheet" type="text/css" href="css/slick.css">
    <link rel="stylesheet" type="text/css" href="css/slick-theme.css">
</head>
<body>
    <div class="contaniner">
        <header>
            <div class="logo">
                <a href="#none"><img src="images/logo_01.png" alt="logo"></a>
            </div>
            <div class="navi">
                <ul>
                    <li>
                        <a href="#none">BRAND</a>
                        <div class="sub-menu">
                            <a href="#none">STORY</a>
                            <a href="#none">CONTACT</a>
                        </div>
                    </li>
                    <li>
                        <a href="#none">SHOP</a>
                        <div class="sub-menu">
                            <a href="#none">전체보기</a>
                            <a href="#none">BEST</a>
                            <a href="#none">NEW</a>
                            <a href="#none">출산·돌기념</a>
                            <a href="#none">아기의류·침구</a>
                            <a href="#none">목욕·용품</a>
                            <a href="#none">놀이·완구</a>
                            <a href="#none">이유식용품</a>
                            <a href="#none">외출용품</a>
                            <a href="#none">유아동잡화</a>
                            <a href="#none">임산부용품</a>
                        </div>
                    </li>
                    <li>
                        <a href="#none">PROMOTION</a>
                        <div class="sub-menu">
                            <a href="#none">NEWS & TIP</a>
                        </div>
                    </li>
                    <li>
                        <a href="#none">COMMUNITY</a>
                        <div class="sub-menu">
                            <a href="#none">NOTICE</a>
                            <a href="#none">REVIEW</a>
                            <a href="#none">Q & A</a>
                            <a href="#none">FAQ</a>
                            <a href="#none">EVENT</a>
                            <a href="#none">리콜접수</a>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="menu-tap-inner">
                <div class="search">
                    <a href="#none"><i class="fa-solid fa-magnifying-glass"></i></a>
                </div>
                <div class="menu-tap">
                    <a href="#none"><i class="fa-solid fa-bars"></i></a>
                </div>
            </div>
        </header>
        <div class="slide">
            <div class="slide-image">
                <div class="slide-image-inner slide-items">
                    <a class="slide-item" href="#none"><img src="images/slide_01.jpg" alt="slide 1"></a>
                    <a class="slide-item" href="#none"><img src="images/slide_02.jpg" alt="slide 2"></a>
                    <a class="slide-item" href="#none"><img src="images/slide_03.jpg" alt="slide 3"></a>
                    <a class="slide-item" href="#none"><img src="images/slide_04.jpg" alt="slide 4"></a>
                    <a class="slide-item" href="#none"><img src="images/slide_05.jpg" alt="slide 5"></a>
                </div>
            </div>
        </div>
        <div class="coupon">
            <div class="coupon_text">
                <h1>멤버십 쿠폰</h1>
                <p>말랑하니만의 더 특별한 혜택</p>
            </div>
            <div class="coupon_image">
                <a href="#none"><img src="images/coupon.jpg" alt="coupon"></a>
            </div>
        </div>
        <div class="brand-story">
            <a href="#none"><img src="images/brand_story_01.jpg" alt="brand story image"></a>
            <div class="brand-story-text">
                <div class="story-title" data-aos="fade-down" data-aos-offset="200" data-aos-duration="1500">
                    <h1>마음 편한 육아의 시작,<br>말랑하니</h1>
                </div>
                <div class="story-text" data-aos="fade-up" data-aos-delay="1000" data-aos-duration="1500">
                    <p>
                        처음 마주하는 육아가 때로는 낯설고 어려워도
                        <br>매 순간을 소중히 여기는 당신에게
                        <br>편안하고, 여유로운 육아가 되기를 바라며 고민합니다.
                    </p>
                    <p>
                        행복한 육아의 모든 날, 모든 순간에 함께하길
                        <br>꿈꾸는 말랑하니입니다.
                    </p>
                </div>
            </div>
        </div>
        <div class="category">
            <h1>CATEGORY</h1>
            <div class="category-content">
                <div><img src="images/category_01.jpg" alt="category 1"></div>
                <div><img src="images/category_02.jpg" alt="category 2"></div>
                <div><img src="images/category_03.jpg" alt="category 3"></div>
                <div><img src="images/category_04.jpg" alt="category 4"></div>
                <div><img src="images/category_05.jpg" alt="category 5"></div>
                <div><img src="images/category_06.jpg" alt="category 6"></div>
                <div><img src="images/category_07.jpg" alt="category 7"></div>
                <div><img src="images/category_08.jpg" alt="category 8"></div>
            </div>
        </div>
        <div class="best-items"></div>
        <div class="news-tips"></div>
        <div class="instagram"></div>
        <footer></footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="script/custom.js"></script>
    <!-- aos.js -->
    <script>
        AOS.init();
    </script>
    <!-- Slick.js -->
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="script/slick.min.js"></script>
</body>
</html>
jm_0512님의 프로필 이미지
jm_0512

작성한 질문수

전체 Q&A
질문하기