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

퍼블님의 프로필 이미지
퍼블

작성한 질문수

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

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

해결된 질문

작성

·

217

0

Project1 #services 안에 slickSlide 스크립트가 실행이 안되는데요.
강사님의 올리신 코드랑 비교해봐도 무엇이 문제인지 못찾겠네요.
소스 올리면 어디서가 문제인지 여쭤보고 싶어서요.
제가 작성한 코드를 보여드리고 싶은데 방법이 없을까요?
 

답변 4

1

Self-coding님의 프로필 이미지
Self-coding
지식공유자

안녕하세요.

 
늦게 이제야 메일에 파일을 열어 보았어요.
 
오류는 app.js에
첫번째 코드
 
const slickSlide=JQuery('#slick-slide')
 
부분이었습니다.
 
jQuery에 J가 소문자 j가 아닌 대문자 J로 되어 있었네요. ㅎ
 
const slickSlide=jQuery('#slick-slide')
 
아래 코드로 고치면 잘 작동합니다.
 
 
감사합니다.
 
추신) 메일로도 답변드렸습니다.
퍼블님의 프로필 이미지
퍼블
질문자

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

0

Self-coding님의 프로필 이미지
Self-coding
지식공유자

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

퍼블님의 프로필 이미지
퍼블
질문자

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

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

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

Self-coding님의 프로필 이미지
Self-coding
지식공유자

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

0

퍼블님의 프로필 이미지
퍼블
질문자

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!

Read more

Easy contact!

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

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.

View more...

Skide title

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

View more...

Skide title

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

View more...

Skide title

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

View more...

Skide title

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

View more...

Skide title

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

View more...

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님의 프로필 이미지
Self-coding
지식공유자

네. 안녕하세요. 

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

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

퍼블님의 프로필 이미지
퍼블

작성한 질문수

질문하기