• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

선생님 질문에 대한 신속한 답변 감사합니다! 그런데 ㅠㅠ 슬라이더가 작동이 안되고 이미지가 왜 저렇게 되는지 모르겠어요!

21.02.20 14:05 작성 조회수 228

2

원인을 모르겠어요 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>StarUp Mate : App Official Landing</title>
  <link rel="icon" href="images/logo-favicon.png">
  <!---jquery CDN--->
  <script src="http:s//code.jquery.com/jquery-3.5.1.min.js"></script>
  <!--Slick slider-->
  <link rel="stylesheet" href="js/slick/slick/slick-theme.css">
  <link rel="stylesheet" href="js/slick/slick/slick.css">
  <script src="js/slick/slick.min.js"></script>
  <!-- Custom CSS & JS -->
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="responsive.css">
  <script src="custom.js"></script>
</head>
<body>
  <header>
    <div class="header-inner">
      <div class="logo">
        <a href="#none"><img src="images/logo.png" alt=""></a>
      </div>
      <div class="gnb">
        <a href="#none">CEO 인사말</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>
    </div>
  </header>
   <!-- Section : welcome -->
   <section class="welcome">
    <div class="slideshow">
      <img src="images/slide-welcome-01.png">
      <img src="images/slide-welcome-02.png">
      <img src="images/slide-welcome-03.png">
    </div>
    <div class="welcome-heading">
      <span>창의적인 아이디어를 만드는 가장 빠른 방법</span>
      <h1>
        An idea solution of startup for your
        <em id="typing"></em>
      </h1>
      <p>
        스타트업 메이트 앱이 여러분의 최상의 스타트업 구축을 위해 창의적인 아이디어를 제공하는 데 최선을 다하겠습니다.
      </p>
      <div class="welcome-btns">
        <a href="#none" class="btn start">CEO 시작하기</a>
        <a href="#none" class="btn guide">사용자 가이드</a>
      </div>
    </div>
    <div class="mouse">
      <span class="wheele"></span>
    </div>
  </section>
   <!---.ceo-access--->
  <section class="ceo-access">

  </section>
  <!---.banner--->
  <section class="banner">

  </section>
   <!---.feature--->
  <section class="feature">

  </section>
  <!---.vision--->
  <section class="vision">

  </section>
  <!---.faq--->
  <section class="faq">

  </section>
  <!---.review--->
  <section class="review">

  </section>
  <!---.focus--->
  <section class="focus">

  </section>
  <!---.guide--->
  <section class="guide">

  </section>
  <!---.news--->
  <section class="news">

  </section>
  <footer>

  </footer>
</body>
</html>
css
/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* XEION CDN */
@import url('http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css');

/* Web Fonts - Source Sans Pro */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
/* font-family: 'Source Sans Pro', sans-serif; */

/* Web Fonts - NoonNoo */
@font-face {
  font-family'NEXON Lv2 Gothic';
  srcurl('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff'format('woff');
  font-weightnormal;
  font-stylenormal;
}

/* Reset CSS */
* {
  box-sizingborder-box;
}
a {
  text-decorationnone;
  color: #222;
}
buttoninput {
  outlinenone;
}
h1,h2,h3,h4,h5,h6 {
  margin-top0;
  font-weightnormal;
  line-height1.5em;
}

/* Default CSS */
body {
  font-family'NEXON Lv2 Gothic'sans-serif;
  font-size18px;
  line-height1.7em;
  margin0;
  background-color: #fff;
  color: #222;
}
/*########header#########*/
header{
  positionfixed;
  width:100%;
  z-index100;
}
.header-inner{
  width:1300px;
  marginauto;
  overflowhidden;
  padding-top30px;
  padding-bottom15px;
}
.logo{
  floatleft;
}
.logo img{
margin-top-7px;
  }
.gnb{
  floatright;
}
.gnb a{
  margin10px;
  font-size16px;
}
/* ################# section : welcome ################# */
.welcome {
  /* border: 5px solid #000; */
  height90vh;
  positionrelative;
}
.slideshow {}
.welcome-heading {
  positionabsolute;
  top50%;
  transformtranslateY(-50%);/*수직으로 섹션을 기준으로 정중앙에 옴*/
  left200px;
  text-aligncenter;
  width750px;
}
.welcome-heading span {
  font-size24px;
}
.welcome-heading h1 {
  font-family'Source Sans Pro'sans-serif;
  font-size60px;
  font-weight600;
  line-height1.2em;
  margin-bottom30px;
  margin-top15px;
}
.welcome-heading h1 em {
  displayblock;
  font-stylenormal;
  color: #eb4d4b;
}
.welcome-heading p {
  padding0 100px;
  margin-bottom50px;
}
.welcome-btns {}
.btn {
  displayinline-block;
  width160px;
  padding8px;
  color: #fff;
  border-radius5px;
  margin5px;
  transition0.5s;
}
.btn:hover {
  box-shadow0 5px 10px rgba(0000.1);
  transformtranslateY(-5px);
}
.btn.start {
  background-color: #0abde3;
}
.btn.guide {
  background-color: #fff;
  color: #222;
}

/* Mouse Wheele */
.mouse {
  border2px solid #fff;
  positionabsolute;
  width32px;
  height45px;
  border-radius30px;
  bottom100px;
  left250px;
}
.wheele {
  positionabsolute;
  width4px;
  height15px;
  background-color: #fff;
  border-radius5px;
  left12px;
  top10px;
  animation: wheele 1.5s linear infinite;
}
@keyframes wheele {
  0% {
    top10px;
  }
  50% {
    top20px;
  }
  100% {
    top10px;
  }
}




/* ▦▦▦▦▦▦▦▦▦ Slick Custom CSS ▦▦▦▦▦▦▦▦▦ */
.slideshow .slick-arrow {
  border1px solid #000;
  displaynone !important;
}
.slideshow * {
  outlinenone;
}
jquery
$(function(){
    /* Slick Slider - Welcome */
    $('.slideshow').slick({
      infinitetrue,
      dotsfalse,
      autoplaytrue,
      autoplaySpeed2000,
      fadetrue,
      speed1000,
      pauseOnHoverfalse
   });

답변 1

답변을 작성해보세요.

2

화면 캡처 보니까 슬라이드가 아직 완성이 안 되었네요. 이미지가 갖고 있는 아래 쪽에 마진입니다.

제작 중간에 생기는 문제보다는 완성을 하고 나서 생기는 문제에 대해서 질문해 주세요. 

그리고 질문 주실 때는 단계별 완성본을 먼저 참고하시고 비교하신 다음에 문제 해결이 안 될 경우에 질문 주셨으면 합니다.