질문 게시판

고민있어요

스터디

팀 프로젝트

멘토링

멘토링 후기

수강평

With us

인프런 피드

블로그

인프런 소개

공지사항

대시보드

강의

홈

로드맵

더보기

카테고리

질문 & 답변
세부 분야

프론트엔드
해결 여부

해결됨

Project1 #services 안에 slickSlide 스크립트가 실행이 안되는데요.

22.05.12 16:48 작성 조회수 127

0

Project1 #services 안에 slickSlide 스크립트가 실행이 안되는데요.

강사님의 올리신 코드랑 비교해봐도 무엇이 문제인지 못찾겠네요.

소스 올리면 어디서가 문제인지 여쭤보고 싶어서요.

제가 작성한 코드를 보여드리고 싶은데 방법이 없을까요?

course-thumbnail

부트스트랩 5(Bootstrap 5) - 기초부터 웹 프로젝트 만들기

답변 4

좋아요순

·

최신순

답변을 작성해보세요.

1

Self-coding

지식공유자

2022.05.19

안녕하세요.

늦게 이제야 메일에 파일을 열어 보았어요.

오류는 app.js에

첫번째 코드

const slickSlide=JQuery('#slick-slide')

부분이었습니다.

jQuery에 J가 소문자 j가 아닌 대문자 J로 되어 있었네요. ㅎ

const slickSlide=jQuery('#slick-slide')

아래 코드로 고치면 잘 작동합니다.

감사합니다.

추신) 메일로도 답변드렸습니다.

퍼블

2022.05.20

고치니 정상적으로 작동되네요! 답변해주셔서 감사합니다.

0

Self-coding

지식공유자

2022.05.13

이렇게 해서는 코드를 볼 수 없어요. 아니면 코드에디터에서 전체 index.html을 캡쳐해서 이미지를 올려 주세요.

퍼블

2022.05.16

강사님~ 강사님께서 답변글을 소스 붙쳐넣기 설명하셨잖아요. 그래서 저는 그대로 해서 올리니 위와같이 나오더라고요. index.html 파일 메일로 좀 받아서 봐주시면 안되나요?

전체 캡쳐시킬수 없써요. 화면이 짤립니다.~ 길어서~~~

다른 강의들도 그런식으로 봐주시기 하더라고요. 가능한지 여쭤봅니다.

Self-coding

지식공유자

2022.05.17

네. medipress2020@gmail.com 으로 보내주세요.

0

퍼블

2022.05.13

index.html 이랑JS파일CSS파일 올리는데요. 코트 붙여넣으니 한줄로 되버리네요....ㅠㅠ

어디서 문제인지 확인부탁드립니다.

Welcome to my first website. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid, temporibus.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est laborum a dolorem sapiente iusto ab repellat quia eius reprehenderit eos!

Easy contact!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, quis.

<form> <div class="mb-3"><input class="form-control" type="text" placeholder="Your name" /></div> <div class="mb-3"><input class="form-control" type="tel" placeholder="Your phone" /></div> <div class="form-check mb-3"><input id="flexCheckDefault" class="form-check-input" type="text" /> <label class="form-check-label text-secondary" for="flexCheckDefault"> I agree to provide privacy. </label></div> <p class="mb-3"><button class="btn btn-primary w-100" type="button">Submit</button></p> </form>

Link 1

Link 2

Link 3

Link 4

Greetiongs!

Introduce our website.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem dicta sequi voluptatibus rerum voluptatum officia iste voluptates asperiores! Laudantium minima mollitia unde magnam quia doloribus veniam quasi odio hic a.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, dolorum sint minima rem doloribus dolore aliquid distinctio labore aperiam tenetur.

Our amazing services

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque error provident ad ipsum iste facere blanditiis quas deleniti doloremque non.

Skide title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure.

Skide title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure.

Skide title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure.

Skide title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure.

Skide title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure.

Skide title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam fugiat repellendus numquam dolorem rem, temporibus quis aperiam odit! Neque, iure.

JS파일 const slickSlide=JQuery('#slick-slide') if (slickSlide){ slickSlide.slick({ dots:true, arrows:false, slidesToShow:3, slideToScroll:1, autoplay:true, autoplaySpeed:3000, responsive: [ { breakpoint: 768, settings: { slidesToShow:2 } }, { breakpoint: 576, settings: { slidesToShow:1 } } ] }) } CSS파일 /*Global*/ .section-content{ padding:4rem 0; } /*Top Section*/ #top{ background:url('../images/bg-top.jpg'); background-position:center; background-repeat:no-repeat; background-size:cover; height:80vh; position:relative; } #top .overlay{ position:absolute; height:100%; width:100%; left:0; top:0; background-color:rgb(0,0,0,0.65); } #top .divider{ width: 10%; margin-top: 2rem; margin-bottom: 2rem; border-top: 2px solid #fff; } #top .welcome{ padding-right: 8rem; color:#fff; } @media screen and (max-width:767px) { #top .welcome{ padding-left:1rem; padding-right:1rem; } } #intro .intro-first-card{ background-position: center; background-repeat: no-repeat; background-size: cover; height: 12rem; } #intro .col-6:nth-of-type(1) .intro-first-card{ background-image:url('../images/bg1.jpg'); } #intro .col-6:nth-of-type(2) .intro-first-card{ background-image:url('../images/bg2.jpg'); } #intro .col-6:nth-of-type(3) .intro-first-card{ background-image:url('../images/bg3.jpg'); } #intro .col-6:nth-of-type(4) .intro-first-card{ background-image:url('../images/bg4.jpg'); } #intro .intro-first-card .overlay{ left:0; top:0; background-color:rgba(0, 0, 0, 0.4); } #intro .intro-first-card. .overlay a{ transition: hover 0.4s ease; } #intro .intro-first-card. .overlay a:hover{ color:#fafa6f; } #services{ background-color:rgba(96, 125, 139, 0.1); } #services .divider{ width:10%; margin:2rem auto; border-top:0.5rem solid rgb(255, 112, 3); } #services .services-col .card{ transition:0.4s ease; } #services .services-col .card:hover{ transform: translateY(-0.8rem); box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); } #services .services-col img{ height: 13rem; object-fit:cover; object-position:center; }

0

Self-coding

지식공유자

2022.05.12

네. 안녕하세요.

우선 index.html 파일을 모두 선택해서 문의글 에디터에 붙여넣기 해주세요.

에디터 메뉴 제일 오른쪽에 코드 (< >) 메뉴를 클릭해서 ㄱㅡ 속에 붙여넣기 하면 됩니다.