알림
뒤로

아임웹에서 이런 기능을

찾고 계신가요?

디자인 코드부터 데이터 저장 · 수정 같은 서버 기능까지
실제로 바로 쓸 수 있는 코드만 제공합니다 

[아임웹 코드] 코드로 구현된 갤러리 위젯

아임웹 코드 삽입

444fde8cac3bd.png

시연 동영상 보기


※ 이미지 사이즈는 자동조정됩니다. 갤러리 위젯처럼 이미지가 중간에 짤리거나 하는 일이 없습니다.




<div class="gallerysection03">

<ul class="slides">

    <input type="radio" name="radio-btn" id="img-1" checked />

    <li class="slide-container">

        <div class="slide">

            <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/19430cf288a81.jpg" />

        </div>

        <div class="nav">

            <label for="img-6" class="prev">&#x2039;</label>

            <label for="img-2" class="next">&#x203a;</label>

        </div>

    </li>


    <input type="radio" name="radio-btn" id="img-2" />

    <li class="slide-container">

        <div class="slide">

          <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/0aeb08264bd39.jpg" />

        </div>

        <div class="nav">

            <label for="img-1" class="prev">&#x2039;</label>

            <label for="img-3" class="next">&#x203a;</label>

        </div>

    </li>


    <input type="radio" name="radio-btn" id="img-3" />

    <li class="slide-container">

        <div class="slide">

          <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/d8989d526c3f3.jpg" />

        </div>

        <div class="nav">

            <label for="img-2" class="prev">&#x2039;</label>

            <label for="img-4" class="next">&#x203a;</label>

        </div>

    </li>


    <input type="radio" name="radio-btn" id="img-4" />

    <li class="slide-container">

        <div class="slide">

          <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/517fc6abeef6e.jpg" />

        </div>

        <div class="nav">

            <label for="img-3" class="prev">&#x2039;</label>

            <label for="img-5" class="next">&#x203a;</label>

        </div>

    </li>


    <input type="radio" name="radio-btn" id="img-5" />

    <li class="slide-container">

        <div class="slide">

          <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/e77f9f0c17edc.jpg" />

        </div>

        <div class="nav">

            <label for="img-4" class="prev">&#x2039;</label>

            <label for="img-6" class="next">&#x203a;</label>

        </div>

    </li>


    <input type="radio" name="radio-btn" id="img-6" />

    <li class="slide-container">

        <div class="slide">

          <img src="https://cdn.imweb.me/upload/S20220110de20c90fdecb7/e89c89546b044.jpg" />

        </div>

        <div class="nav">

            <label for="img-5" class="prev">&#x2039;</label>

            <label for="img-1" class="next">&#x203a;</label>

        </div>

    </li>


    <li class="nav-dots">

      <label for="img-1" class="nav-dot" id="img-dot-1"></label>

      <label for="img-2" class="nav-dot" id="img-dot-2"></label>

      <label for="img-3" class="nav-dot" id="img-dot-3"></label>

      <label for="img-4" class="nav-dot" id="img-dot-4"></label>

      <label for="img-5" class="nav-dot" id="img-dot-5"></label>

      <label for="img-6" class="nav-dot" id="img-dot-6"></label>

    </li>

</ul>

</div>


<style>

  @import url(https://fonts.googleapis.com/css?family=Varela+Round);


  .gallerysection03{


  }


.slides {

    padding: 0;

    width: 609px;

    height: 420px;

    display: block;

    margin: 0 auto;

    position: relative;

}


.slides * {

    user-select: none;

    -ms-user-select: none;

    -moz-user-select: none;

    -khtml-user-select: none;

    -webkit-user-select: none;

    -webkit-touch-callout: none;

}


.slides input { display: none; }


.slide-container { display: block; }


.slide {

    top: 0;

    opacity: 0;

    width: 609px;

    height: 420px;

    display: block;

    position: absolute;


    transform: scale(0);


    transition: all .7s ease-in-out;

}


.slide img {

    width: 100%;

    height: 100%;

}


.nav label {

    width: 200px;

    height: 100%;

    display: none;

    position: absolute;


      opacity: 0;

    z-index: 9;

    cursor: pointer;


    transition: opacity .2s;


    color: #FFF;

    font-size: 156pt;

    text-align: center;

    line-height: 380px;

    font-family: "Varela Round", sans-serif;

    background-color: rgba(255, 255, 255, .3);

    text-shadow: 0px 0px 15px rgb(119, 119, 119);

}


.slide:hover + .nav label { opacity: 0.5; }


.nav label:hover { opacity: 1; }


.nav .next { right: 0; }


input:checked + .slide-container  .slide {

    opacity: 1;


    transform: scale(1);


    transition: opacity 1s ease-in-out;

}


input:checked + .slide-container .nav label { display: block; }


.nav-dots {

    width: 100%;

    bottom: 9px;

    height: 11px;

    display: block;

    position: absolute;

    text-align: center;

}


.nav-dots .nav-dot {

    top: -5px;

    width: 11px;

    height: 11px;

    margin: 0 4px;

    position: relative;

    border-radius: 100%;

    display: inline-block;

    background-color: white;

}


.nav-dots .nav-dot:hover {

    cursor: pointer;

    background-color: green;

}


input#img-1:checked ~ .nav-dots label#img-dot-1,

input#img-2:checked ~ .nav-dots label#img-dot-2,

input#img-3:checked ~ .nav-dots label#img-dot-3,

input#img-4:checked ~ .nav-dots label#img-dot-4,

input#img-5:checked ~ .nav-dots label#img-dot-5,

input#img-6:checked ~ .nav-dots label#img-dot-6 {

        background-color: green;

}

</style>


e1acff6551d2a.png



[아임웹 코드] 랜딩페이지에서 기사 혹은 리뷰를 강조할 때 사용할 수 있는 애니메이션 [아임웹 코드] 무한으로 폰트 굵기를 바꾸는 애니메이션
목록

실제 사용자 만족도 200%

적용해 보면 그 이유를 압니다

아임웹, 커스텀 코드·서버연동 

원하는 기능이 잘 안되시나요?

코드 적용 방법부터 서버 연동, 커스텀 가능 여부까지

실제 문의가 많은 질문들을 한 번에 정리했습니다.

고객센터 FAQ - DIBO

검색 결과가 없습니다

다른 검색어를 입력하거나 카테고리를 선택해주세요

카카오톡 채널 채팅하기 버튼