메인이미지 슬라이드 (소스 문의) 드립니다.

매뉴얼 FAQ
그누보드5
데모
자료실
  • 다운로드
  • 매뉴얼
  • Q&A
    • 창작마당
  • 팁자료실
  • 스킨
  • 빌더
  • 테마
  • 플러그인
  • 사용후기
    • 영카트5
    데모
    자료실
    창작마당
    Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    국내최저! 신용카드 결제수수료 2.85%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    자사몰
    강좌
    기타
    메인이미지 슬라이드 (소스 문의) 드립니다.

    QA

    메인이미지 슬라이드 (소스 문의) 드립니다.

    본문

    아래 소스로 작업중인데요.  메인이미지가 자동으로 슬라이딩 되게 하고 싶은데요. 

    지금은 오버롤시 생기는 nav 버튼을 눌러야만 다음 이미지로 넘어가네요.

    일정 시간이 지나면 자동으로 슬라이딩 되는 부분을 추가하려면 어떻게 해야 할까요?

    도움 부탁 드립니다.

     

    아래에 메인이미지 슬라이느 부분의 소스 올립니다.

     

    ########### 메인이미지 (슬라이더) 부분 ##################

    <div class="slider-area ">
        <div class="slider-active-2 owl-carousel nav-style-2">
            <div class="single-slider slider-height-3 bg-img pt-170" style="background-image:url(assets/img/slider/slider1-bg.jpg);">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-9 col-md-7 col-12 col-sm-12">
                            <div class="slider-content slider-animated-1 pt-230">
                                <h1 class="animated">첫번째 타이틀</h1>
                                <p class="animated">첫번째설명</p>
                                <div class="slider-btn">
                                    <a class="animated default-btn btn-green-color" href="/_html/intro1.php">ABOUT US</a>
                                    <a class="animated default-btn btn-white-color" href="/bbs/board.php?bo_table=news4">CONTACT US</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="single-slider slider-height-3 bg-img pt-170" style="background-image:url(assets/img/slider/slider2.jpg);">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-9 col-md-7 col-12 col-sm-12">
                            <div class="slider-content slider-animated-1 pt-230">
                                <h1 class="animated">두번째타이틀</h1>
                                <p class="animated">두번째설명</p>
                                <div class="slider-btn">
                                    <a class="animated default-btn btn-green-color" href="/_html/intro1.php">ABOUT US</a>
                                    <a class="animated default-btn btn-white-color" href="/bbs/board.php?bo_table=news4">CONTACT US</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>        

        </div>
    </div>


    ################# 메인이미지 (슬라이더) CSS 부분 #####################

    /*--------- Slider style ---------*/
    .slider-height-1 {
      height: 844px; }
      @media only screen and (min-width: 1200px) and (max-width: 1365px) {
        .slider-height-1 {
          height: 600px; } }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .slider-height-1 {
          height: 600px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .slider-height-1 {
          height: 500px; } }
      @media only screen and (max-width: 767px) {
        .slider-height-1 {
          height: 500px; } }

    .slider-active {
      position: relative; }
      .slider-active .slider-single-img {
        width: 504px;
        position: absolute;
        right: 256px;
        bottom: 0; }
        @media only screen and (min-width: 1366px) and (max-width: 1600px) {
          .slider-active .slider-single-img {
            width: 430px;
            right: 50px; } }
        @media only screen and (min-width: 1200px) and (max-width: 1365px) {
          .slider-active .slider-single-img {
            width: 380px;
            right: 30px; } }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          .slider-active .slider-single-img {
            width: 350px;
            right: 30px; } }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .slider-active .slider-single-img {
            width: 250px;
            right: 30px; } }
        @media only screen and (max-width: 767px) {
          .slider-active .slider-single-img {
            display: none; } }

    @media only screen and (min-width: 1200px) and (max-width: 1365px) {
      .slider-content {
        padding-top: 150px; } }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .slider-content {
        padding-top: 120px; } }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .slider-content {
        padding-top: 100px; } }

    @media only screen and (max-width: 767px) {
      .slider-content {
        padding-top: 50px; } }

    @media only screen and (min-width: 576px) and (max-width: 767px) {
      .slider-content {
        padding-top: 100px; } }

    .slider-content h1 {
      font-size: 60px;
      color: #fff;
      font-weight: bold;
      margin: 0;
      line-height: 1; }
      @media only screen and (min-width: 1200px) and (max-width: 1365px) {
        .slider-content h1 {
          font-size: 65px; } }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .slider-content h1 {
          font-size: 55px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .slider-content h1 {
          font-size: 40px; } }
      @media only screen and (max-width: 767px) {
        .slider-content h1 {
          font-size: 28px; } }

    .slider-content p {
      font-size: 18px;
      color: #fff;
      line-height: 30px;
      width: 90%;
      margin: 25px 0 47px; }
      @media only screen and (min-width: 1200px) and (max-width: 1365px) {
        .slider-content p {
          width: 84%; } }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .slider-content p {
          width: 78%; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .slider-content p {
          width: 100%;
          margin: 15px 0 27px; } }
      @media only screen and (max-width: 767px) {
        .slider-content p {
          width: 100%;
          margin: 25px 0 30px; } }

    .slider-content .slider-btn a {
      margin-right: 27px; }
      .slider-content .slider-btn a:last-child {
        margin-right: 0; }
      @media only screen and (max-width: 767px) {
        .slider-content .slider-btn a {
          padding: 12px 16px 12px;
          font-size: 14px;
          margin-right: 10px; } }

    .slider-content .slider-btn a.btn-green-color {
      background-color: #00a651;
      color: #fff;
      border: 1px solid #00a651; }
      .slider-content .slider-btn a.btn-green-color:hover {
        background-color: #fff;
        border: 1px solid transparent;
        color: #00a651; }

    .slider-content .slider-btn a.btn-white-color {
      background-color: #fff;
      color: #00a651;
      border: 1px solid #77d0a2; }
      .slider-content .slider-btn a.btn-white-color:hover {
        background-color: #00a651;
        border: 1px solid transparent;
        color: #fff; }

    .owl-item .slider-content * {
      -webkit-animation-duration: 1.3s;
      animation-duration: 1.3s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both; }

    .owl-item.active .slider-animated-1 h1 {
      -webkit-animation-delay: 1.0s;
      animation-delay: 1.0s;
      -webkit-animation-name: fadeInLeft;
      animation-name: fadeInLeft; }

    .owl-item.active .slider-animated-1 p {
      -webkit-animation-delay: 1.3s;
      animation-delay: 1.3s;
      -webkit-animation-name: fadeInLeft;
      animation-name: fadeInLeft; }

    .owl-item.active .slider-animated-1 a {
      -webkit-animation-delay: 1.6s;
      animation-delay: 1.6s;
      -webkit-animation-name: fadeInLeft;
      animation-name: fadeInLeft; }

    .owl-item.active .slider-animated-1.slider-single-img img {
      -webkit-animation-delay: 1.6s;
      animation-delay: 1.6s;
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight; }

    .owl-item.active .slider-animated-2.slider-single-img2 img {
      -webkit-animation-delay: 1.6s;
      animation-delay: 1.6s;
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp; }

    .owl-item.active .slider-animated-2 h1 {
      -webkit-animation-delay: 1.0s;
      animation-delay: 1.0s;
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp; }

    .owl-item.active .slider-animated-2 p {
      -webkit-animation-delay: 1.3s;
      animation-delay: 1.3s;
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp; }

    .owl-item.active .slider-animated-2 a {
      -webkit-animation-delay: 1.6s;
      animation-delay: 1.6s;
      -webkit-animation-name: fadeInUp;
      animation-name: fadeInUp; }

    /* slider style 2 home2*/
    .slider-content.slider-content-2 {
      padding-top: 0px; }
      .slider-content.slider-content-2 p {
        width: 70%;
        margin: 25px auto 45px; }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .slider-content.slider-content-2 p {
            width: 78%;
            margin: 25px auto 35px; } }
        @media only screen and (max-width: 767px) {
          .slider-content.slider-content-2 p {
            width: 100%;
            margin: 20px auto 30px; } }

    .slider-overlay2-1.default-overlay::before {
      opacity: .39;
      background-color: #000; }

    .slider-overlay2-2.default-overlay::before {
      opacity: .43;
      background-color: #000; }

    .slider-overlay2-3.default-overlay::before {
      opacity: .70;
      background-color: #000; }

    .slider-height-2 {
      height: 800px; }
      @media only screen and (min-width: 1366px) and (max-width: 1600px) {
        .slider-height-2 {
          height: 600px; } }
      @media only screen and (min-width: 1200px) and (max-width: 1365px) {
        .slider-height-2 {
          height: 550px; } }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .slider-height-2 {
          height: 550px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .slider-height-2 {
          height: 480px; } }
      @media only screen and (max-width: 767px) {
        .slider-height-2 {
          height: 480px; } }

    /*----------------- home 3 ----------------*/
    .slider-height-3 {
      height: 800px; }
      @media only screen and (min-width: 1366px) and (max-width: 1600px) {
        .slider-height-3 {
          height: 600px; } }
      @media only screen and (min-width: 1200px) and (max-width: 1365px) {
        .slider-height-3 {
          height: 550px; } }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .slider-height-3 {
          height: 550px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .slider-height-3 {
          height: 430px; } }
      @media only screen and (min-width: 576px) and (max-width: 767px) {
        .slider-height-3 {
          height: 450px; } }

    @media only screen and (min-width: 1366px) and (max-width: 1600px) {
      .slider-height-3.pt-170 {
        padding-top: 80px; } }

    @media only screen and (min-width: 1200px) and (max-width: 1365px) {
      .slider-height-3.pt-170 {
        padding-top: 80px; } }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .slider-height-3.pt-170 {
        padding-top: 50px; } }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .slider-height-3.pt-170 {
        padding-top: 50px; } }

    @media only screen and (max-width: 767px) {
      .slider-height-3.pt-170 {
        padding-top: 30px; } }

    @media only screen and (min-width: 576px) and (max-width: 767px) {
      .slider-height-3.pt-170 {
        padding-top: 50px; } }

    .slider-single-img2 {
      margin: 0 85px 0 15px; }
      @media only screen and (min-width: 1366px) and (max-width: 1600px) {
        .slider-single-img2 {
          width: 390px; } }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .slider-single-img2 {
          margin: 0;
          width: 350px; } }
      @media only screen and (max-width: 767px) {
        .slider-single-img2 {
          margin: 0; } }

    .slider-content-3.ml-55 {
      margin-left: 0; }

    @media only screen and (min-width: 1200px) and (max-width: 1365px) {
      .slider-content-3.pt-115 {
        padding-top: 100px; } }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
      .slider-content-3.pt-115 {
        padding-top: 100px; } }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .slider-content-3.pt-115 {
        padding-top: 30px; } }

    @media only screen and (max-width: 767px) {
      .slider-content-3.pt-115 {
        padding-top: 50px; } }

    .slider-content-3 h1 {
      color: #00a651;
      font-size: 60px;
      font-weight: bold;
      margin: 0; }
      .slider-content-3 h1 span.text-blue {
        color: #0259cf; }
      .slider-content-3 h1 span.text-pink {
        color: #c42d88; }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .slider-content-3 h1 {
          font-size: 50px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .slider-content-3 h1 {
          font-size: 45px; } }
      @media only screen and (max-width: 767px) {
        .slider-content-3 h1 {
          font-size: 35px; } }
      @media only screen and (min-width: 576px) and (max-width: 767px) {
        .slider-content-3 h1 {
          font-size: 32px; } }

    .slider-content-3 p {
      font-size: 18px;
      line-height: 30px;
      margin: 38px 0 36px; }
      @media only screen and (max-width: 767px) {
        .slider-content-3 p {
          margin: 15px 0 20px;
          font-size: 17px; } }

    .nav-style-2.owl-carousel {
      position: relative; }
      .nav-style-2.owl-carousel .owl-nav div {
        background-color: #161616;
        color: #fff;
        font-size: 24px;
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 100%;
        text-align: center;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        position: absolute;
        -webkit-transition: all .4s ease 0s;
        -o-transition: all .4s ease 0s;
        transition: all .4s ease 0s;
        -webkit-box-shadow: 0px 6px 12px 0.8px rgba(177, 177, 177, 0.38);
        box-shadow: 0px 6px 12px 0.8px rgba(177, 177, 177, 0.38);
        left: 117px;
        opacity: 0;
        visibility: hidden; }
        .nav-style-2.owl-carousel .owl-nav div:hover {
          background-color: #00a651; }
        @media only screen and (min-width: 1366px) and (max-width: 1600px) {
          .nav-style-2.owl-carousel .owl-nav div {
            width: 50px;
            height: 50px;
            line-height: 50px;
            left: 50px; } }
        @media only screen and (min-width: 1200px) and (max-width: 1365px) {
          .nav-style-2.owl-carousel .owl-nav div {
            width: 50px;
            height: 50px;
            line-height: 50px;
            left: 50px; } }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          .nav-style-2.owl-carousel .owl-nav div {
            width: 50px;
            height: 50px;
            line-height: 50px;
            left: 20px; } }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .nav-style-2.owl-carousel .owl-nav div {
            width: 50px;
            height: 50px;
            line-height: 50px;
            left: 20px; } }
        @media only screen and (max-width: 767px) {
          .nav-style-2.owl-carousel .owl-nav div {
            width: 40px;
            height: 40px;
            line-height: 38px;
            left: 15px; } }
      .nav-style-2.owl-carousel .owl-nav div.owl-next {
        left: auto;
        right: 117px; }
        @media only screen and (min-width: 1366px) and (max-width: 1600px) {
          .nav-style-2.owl-carousel .owl-nav div.owl-next {
            right: 50px; } }
        @media only screen and (min-width: 1200px) and (max-width: 1365px) {
          .nav-style-2.owl-carousel .owl-nav div.owl-next {
            right: 50px; } }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          .nav-style-2.owl-carousel .owl-nav div.owl-next {
            right: 20px; } }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .nav-style-2.owl-carousel .owl-nav div.owl-next {
            right: 20px; } }
        @media only screen and (max-width: 767px) {
          .nav-style-2.owl-carousel .owl-nav div.owl-next {
            right: 15px; } }
      .nav-style-2.owl-carousel:hover .owl-nav div {
        opacity: 1;
        visibility: visible; }

    .section-padding-1 .container-fluid {
      padding-right: 100px;
      padding-left: 100px; }
      @media only screen and (min-width: 1200px) and (max-width: 1365px) {
        .section-padding-1 .container-fluid {
          padding-right: 80px;
          padding-left: 80px; } }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .section-padding-1 .container-fluid {
          padding-right: 50px;
          padding-left: 50px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .section-padding-1 .container-fluid {
          padding-right: 40px;
          padding-left: 40px; } }
      @media only screen and (max-width: 767px) {
        .section-padding-1 .container-fluid {
          padding-right: 15px;
          padding-left: 15px; } }
      @media only screen and (min-width: 576px) and (max-width: 767px) {
        .section-padding-1 .container-fluid {
          padding-right: 30px;
          padding-left: 30px; } }

    .choose-bg-light-blue {
      background-color: #48a7d4; }

    .choose-bg-yellow {
      background-color: #fdc735; }

    .choose-bg-blue {
      background-color: #307ad5; }

    .choose-bg-green {
      background-color: #10c45c; }

    .choose-negative-mrg {
      margin-top: -102px;
      z-index: 9;
      position: relative; }

    .single-choose-us {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 50px 48px 46px;
      -webkit-transition: all .3s ease 0s;
      -o-transition: all .3s ease 0s;
      transition: all .3s ease 0s; }
      @media only screen and (min-width: 1366px) and (max-width: 1600px) {
        .single-choose-us {
          padding: 50px 15px 46px; } }
      @media only screen and (min-width: 1200px) and (max-width: 1365px) {
        .single-choose-us {
          padding: 40px 15px 36px; } }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .single-choose-us {
          padding: 30px 10px 26px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .single-choose-us {
          padding: 30px 20px 26px; } }
      @media only screen and (max-width: 767px) {
        .single-choose-us {
          padding: 30px 10px 26px; } }
      .single-choose-us .choose-img {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 60px;
        flex: 0 0 60px;
        margin-right: 20px;
        -webkit-transition: all .3s ease 0s;
        -o-transition: all .3s ease 0s;
        transition: all .3s ease 0s; }
        @media only screen and (min-width: 1366px) and (max-width: 1600px) {
          .single-choose-us .choose-img {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 45px;
            flex: 0 0 45px;
            margin-right: 10px; } }
        @media only screen and (min-width: 1200px) and (max-width: 1365px) {
          .single-choose-us .choose-img {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 35px;
            flex: 0 0 35px;
            margin-right: 10px; } }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          .single-choose-us .choose-img {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 35px;
            flex: 0 0 35px;
            margin-right: 10px; } }
        @media only screen and (max-width: 767px) {
          .single-choose-us .choose-img {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 35px;
            flex: 0 0 35px;
            margin-right: 10px; } }
        .single-choose-us .choose-img img {
          width: 100%;
          -webkit-transition: all .3s ease 0s;
          -o-transition: all .3s ease 0s;
          transition: all .3s ease 0s; }
      .single-choose-us .choose-content h3 {
        font-weight: bold;
        font-size: 22px;
        color: #fff;
        margin: 0 0 12px; }
        @media only screen and (min-width: 1366px) and (max-width: 1600px) {
          .single-choose-us .choose-content h3 {
            font-size: 20px;
            margin: 0 0 10px; } }
        @media only screen and (min-width: 1200px) and (max-width: 1365px) {
          .single-choose-us .choose-content h3 {
            font-size: 18px;
            margin: 0 0 5px; } }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          .single-choose-us .choose-content h3 {
            font-size: 18px;
            margin: 0 0 5px;
            line-height: 25px; } }
        @media only screen and (max-width: 767px) {
          .single-choose-us .choose-content h3 {
            font-size: 18px;
            margin: 0 0 5px;
            line-height: 25px; } }
      .single-choose-us .choose-content p {
        line-height: 26px;
        font-size: 16px;
        color: #fff; }
      .single-choose-us:hover .choose-img img {
        -webkit-animation: 500ms ease-in-out 0s normal none 1 running tada;
        animation: 500ms ease-in-out 0s normal none 1 running tada; }

    .section-title {
      position: relative;
      margin-left: 32px; }
      @media only screen and (max-width: 767px) {
        .section-title {
          margin-left: 0px; } }
      .section-title:before {
        content: url(../../assets/img/icon-img/section-shape.png);
        position: absolute;
        left: -32px;
        top: 2px;
        bottom: auto; }
        @media only screen and (max-width: 767px) {
          .section-title:before {
            left: -5px; } }
      .section-title h2 {
        font-size: 48px;
        font-weight: bold;
        margin: 0 0 20px;
        line-height: 38px; }
        @media only screen and (max-width: 767px) {
          .section-title h2 {
            font-size: 27px;
            margin: 0 0 10px; } }
        .section-title h2 span {
          color: #00a651;
          font-weight: 400; }
      .section-title p {
        font-size: 16px;
        line-height: 26px; }
        @media only screen and (max-width: 767px) {
          .section-title p {
            font-size: 15px; } }

    @media only screen and (max-width: 767px) {
      .section-title.mb-75 {
        margin-bottom: 35px; }
      .section-title.mb-75.mrg-bottom-small {
        margin-bottom: 95px; } }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .section-title.mb-75 {
        margin-bottom: 50px; } }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .section-title-3.mb-100 {
        margin-bottom: 80px; } }

    .section-title.white-text h2 {
      color: #fff; }

    .section-title-green p {
      color: #00a651; }

    @media only screen and (max-width: 767px) {
      .section-title.section-title-green.mb-30 {
        margin-bottom: 20px; } }

    .section-title-2 {
      position: relative;
      margin-left: 32px;
      z-index: 9; }
      @media only screen and (max-width: 767px) {
        .section-title-2 {
          margin-left: 0px; } }
      .section-title-2:before {
        content: url(../../assets/img/icon-img/section-shape-2.png);
        position: absolute;
        left: -32px;
        top: 2px;
        bottom: auto; }
        @media only screen and (max-width: 767px) {
          .section-title-2:before {
            left: -5px; } }
      .section-title-2 h2 {
        font-size: 48px;
        font-weight: bold;
        margin: 0 0 20px;
        line-height: 38px;
        color: #fff; }
        @media only screen and (max-width: 767px) {
          .section-title-2 h2 {
            font-size: 35px; } }
        .section-title-2 h2 span {
          font-weight: 400; }
      .section-title-2 p {
        font-size: 16px;
        line-height: 26px;
        color: #fff; }

    .section-title-3 {
      position: relative; }
      .section-title-3:before {
        position: absolute;
        left: 0px;
        right: 0;
        margin: 0 auto;
        bottom: -29px; }
      .section-title-3 h2 {
        font-size: 48px;
        font-weight: bold;
        margin: 0 0 20px;
        line-height: 38px; }
        @media only screen and (max-width: 767px) {
          .section-title-3 h2 {
            font-size: 33px;
            margin: 0 0 10px; } }
        .section-title-3 h2 span {
          color: #00a651;
          font-weight: 400; }
      .section-title-3 p {
        font-size: 16px;
        line-height: 26px; }
        @media only screen and (max-width: 767px) {
          .section-title-3 p {
            font-size: 15px; } }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .section-title-3.ml-70 {
        margin-left: 0px;
        margin-top: 50px; } }

    @media only screen and (max-width: 767px) {
      .section-title-3.ml-70 {
        margin-left: 0px;
        margin-top: 50px; } }

    .section-title-3.white-text h2,
    .section-title-3.white-text span,
    .section-title-3.white-text p {
      color: #fff; }

    .section-shape-hm2-1:before {
      content: url(../../assets/img/icon-img/section-shape-3.png); }

    .section-shape-hm2-2:before {
      content: url(../../assets/img/icon-img/section-shape-4.png); }

    .single-choose-us2 h4 {
      font-size: 18px;
      font-weight: bold;
      margin: 37px 0 16px;
      line-height: 1; }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .single-choose-us2 h4 {
          font-size: 16px; } }

    .single-choose-us2 p {
      line-height: 23px;
      margin: 0; }

    .single-choose-us2:hover img {
      -webkit-animation: 500ms ease-in-out 0s normal none 1 running tada;
      animation: 500ms ease-in-out 0s normal none 1 running tada; }

    .choose-padding {
      padding-right: 68px; }
      @media only screen and (min-width: 992px) and (max-width: 1199px) {
        .choose-padding {
          padding-right: 0px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .choose-padding {
          padding-right: 0px; } }
      @media only screen and (max-width: 767px) {
        .choose-padding {
          padding-right: 0px; } }

    .choose-newsletter {
      padding: 35px 30px 50px;
      border: 1px solid #f6f6f6;
      -webkit-box-shadow: 0px 6px 12px 0.8px rgba(222, 222, 222, 0.22);
      box-shadow: 0px 6px 12px 0.8px rgba(222, 222, 222, 0.22); }
      @media only screen and (max-width: 767px) {
        .choose-newsletter {
          padding: 35px 20px 50px; } }
      .choose-newsletter h4 {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 0 0 19px; }
        @media only screen and (max-width: 767px) {
          .choose-newsletter h4 {
            font-size: 16px; } }
      .choose-newsletter p {
        font-size: 15px;
        line-height: 26px;
        margin: 0 0 42px; }
      .choose-newsletter form input,
      .choose-newsletter form textarea,
      .choose-newsletter form button {
        background: transparent;
        border: 1px solid #f6f6f6;
        height: 50px;
        padding: 2px 25px;
        font-size: 14px;
        color: #333;
        margin: 0 0 11px; }
      .choose-newsletter form textarea {
        height: 132px;
        padding: 20px 25px; }
      .choose-newsletter form button {
        width: 100%;
        text-align: left; }
        .choose-newsletter form button:hover {
          background-color: #00a651;
          border: 1px solid #00a651;
          color: #fff; }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .choose-newsletter.ml-40 {
        margin-left: 0; } }

    @media only screen and (max-width: 767px) {
      .choose-newsletter.ml-40 {
        margin-left: 0; } }

    /*---------------- about us ----------------*/
    .single-about-chose-us {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .single-about-chose-us .about-choose-img {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 60px;
        flex: 0 0 60px;
        margin-right: 20px; }
        @media only screen and (max-width: 767px) {
          .single-about-chose-us .about-choose-img {
            margin-right: 10px; } }
      .single-about-chose-us .about-choose-content h3 {
        font-size: 22px;
        font-weight: bold;
        margin: 0 0 5px; }
        @media only screen and (min-width: 992px) and (max-width: 1199px) {
          .single-about-chose-us .about-choose-content h3 {
            font-size: 18px; } }
        @media only screen and (max-width: 767px) {
          .single-about-chose-us .about-choose-content h3 {
            font-size: 20px; } }
      .single-about-chose-us .about-choose-content p {
        line-height: 25px;
        margin: 0; }
      .single-about-chose-us:hover .about-choose-img img {
        -webkit-animation: 500ms ease-in-out 0s normal none 1 running tada;
        animation: 500ms ease-in-out 0s normal none 1 running tada; }

    .text-light-blue.about-choose-content h3 {
      color: #48a7d4; }

    .text-yellow.about-choose-content h3 {
      color: #fdc735; }

    .text-blue.about-choose-content h3 {
      color: #307ad5; }

     

    #그누보드5 #메인슬라이드 #슬라이드 #소스수정

    이 질문에 댓글 쓰기 :

    답변 2

    DSLOVE 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

    115.♡.♡.72

    owl-carousel 을 동작시키는 script 가 있습니다.

    그 script 안에 autoplay 옵션을 넣어주면 동작됩니다.

    아래 코드는 예시입니다.

    
var owl = $('.owl-carousel');
owl.owlCarousel({
items:4,
loop:true,
margin:10,
autoplay:true,
autoplayTimeout:1000,
autoplayHoverPause:true
});

    sinbi 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

    1.♡.♡.75

    자동 되는 걸로 구해 쓰심이...

    https://www.google.com/search?q=%EC%9E%90%EB%8F%99+%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C+%EC%86%8C%EC%8A%A4&oq=%EC%9E%90%EB%8F%99+%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C+%EC%86%8C%EC%8A%A4&aqs=chrome..69i57j0l7.3078j0j4&sourceid=chrome&ie=UTF-8

    답변을 작성하시기 전에 로그인 해주세요.
    전체 301
    QA 내용 검색

    회원로그인

    인기태그
    #그누보드5(61301) #영카트5(17118) #php(15424) #그누보드4(10639) #게시판(3230) #javascript(2661) #그누보드(2430) #css(2086) #mysql(1543) #영카트(1284) #모바일(1284) #그누커머스(1178) #html(1124) #jquery(1020) #최신글(953) #자바스크립트(946) #DB(840) #로그인(806) #이미지(773) #여분필드(766)
    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT