inflearn logo
강의

Course

Instructor

Bootstrap 5 - Creating a Web Project from Scratch

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

Resolved

319

tkjy01084778

5 asked

0

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

SlickSlide 웹 디자인 javascript HTML/CSS bootstrap

Answer 4

1

Self-coding

안녕하세요.

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

0

tkjy01084778

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

0

Self-coding

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

0

tkjy01084778

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

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

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

0

Self-coding

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

0

tkjy01084778

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

네. 안녕하세요. 

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

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

services-col mx-2 my-3

0

62

2

단축키 질문

0

57

1

부트스트랩 + *.css 함께 사용하는 이유와 분리 기준이 궁금합니다.

0

279

2

프로젝트3의 툴팁에서

1

333

2

프로젝트1 번의 Navigation 강의부에서 질문입니다.

0

363

1

게시판을 추가할 수 있는 방법이 있을까요?

0

721

1

프로젝트 2 이미지 깨짐 현상

0

1179

1

프로젝트 1- Service Section 에서 app.js에서 syntaxError가 납니다.

0

287

1

자식에 position:absolute;를 쓰지 않고, 바로 top 설정이 가능한가요?

0

350

2

cdn.js를 실제 프로젝트에 써도 문제가되지 않나요!?

0

529

1

carousel 구현에서 사용된 아이디가 중복 사용 가능한가요?

0

361

1

kakao map이 mobile에서도 가능하게 하려면 어떻게 할까요?

0

307

1

-webkit- 접두어가 안붙습니다.

0

400

1

브레이크 포인트 관련 문의

0

258

1

a:hover {color }

2

455

4

Post Content -2 질문

0

204

1

아니 선생님 이게 뭡니까 프로젝트3 Blog CTA Modal 파트

0

324

2

hover

0

322

1

box 공부중 질문있습니다

0

333

3

뭐가 잘못 된지 모르겠습니다.

0

294

2

강의보고 따라하는데 안됩니다.

0

302

3

3:10 -> 3:16 코드 질문 있습니다^^

0

282

2

card와 card-body 의 차이점

0

677

2

px-md-3

0

377

2