묻고답하기

제가 자바스크립트를 잘 몰라서 html/css로만 웹을 만들고 있는데요 슬라이드는 만들었는데 안에 이미지를 넣고 싶습니다 근데 이미지를 넣으면 슬라이드 작동을 안해서 어떻게 해야할지 모르겠습니다

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Document</title>
  • </head>
  • <body>
  • <style>
  • *{margin:0;padding:0;}
  • ul,li{list-style:none;}
  • #slide{height:300px;position:relative;overflow:hidden;}
  • #slide ul{width:400%;height:100%;transition:1s;}
  • #slide ul:after{content:"";display:block;clear:both;}
  • #slide li{float:left;width:25%;height:100%;}
  • #slide li:nth-child(1){background:#faa;}
  • #slide li:nth-child(2){background:#ffa;}
  • #slide li:nth-child(3){background:#faF;}
  • #slide li:nth-child(4){background:#aaf;}
  • #slide input{display:none;}
  • #slide label{display:inline-block;vertical-align:middle;width:10px;height:10px;border:2px solid #666;background:#fff;transition:0.3s;border-radius:50%;cursor:pointer;}
  • #slide .pos{text-align:center;position:absolute;bottom:10px;left:0;width:100%;text-align:center;}
  • #pos1:checked~ul{margin-left:0%;}
  • #pos2:checked~ul{margin-left:-100%;}
  • #pos3:checked~ul{margin-left:-200%;}
  • #pos4:checked~ul{margin-left:-300%;}
  • #pos1:checked~.pos>label:nth-child(1){background:#666;}
  • #pos2:checked~.pos>label:nth-child(2){background:#666;}
  • #pos3:checked~.pos>label:nth-child(3){background:#666;}
  • #pos4:checked~.pos>label:nth-child(4){background:#666;}
  • </style>
  • <div id="slide">
  • <input type="radio" name="pos" id="pos1" checked>
  • <input type="radio" name="pos" id="pos2">
  • <input type="radio" name="pos" id="pos3">
  • <input type="radio" name="pos" id="pos4">
  • <ul>
  • <li></li>
  • <li></li>
  • <li></li>
  • <li></li>
  • </ul>
  • <p class="pos">
  • <label for="pos1"></label>
  • <label for="pos2"></label>
  • <label for="pos3"></label>
  • <label for="pos4"></label>
  • </p>
  • </div>
  • </body>
  • </html>
태그 연관 글
  1. [2017/03/02] 묻고답하기 게시판리스트 분류이동버튼 문의드립니다 by 외도랑 *2
  2. [2017/01/23] 묻고답하기 DB Table 생성을 해야 설치가 완료됩니다. by 다함께
  3. [2016/12/21] 묻고답하기 고수님들 제발 도와주세요. 창크기에 따라서 위젯 위치가 자꾸 변합니다 by 립샤 *1
  4. [2016/08/02] 묻고답하기 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? by 94blossom *1
  5. [2016/06/10] 묻고답하기 footer 고정 by 흑사탕 *8
글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
Alexander 사이트맵에서 클릭시 새창열기로 가능한가요? [2] 2021.07.28 by Alexander
나비 html 사진 슬라이드 질문 [2] 2019.10.21 by 나비
thanksto html 미디어 쿼리 오류 어떻게 해결할 수 있나요? file  
립샤 고수님들 제발 도와주세요. 창크기에 따라서 위젯 위치가 자꾸 변합니다 [1] 2018.10.15 by 르미
freax hayseed.kr 메인 슬라이더,CAROUSEL 똑같은 위젯이나 소스,코드 알려주세요요 [5] 2017.10.02 by DoorWeb
웃음을주는사람 video 태그 질문입니다.  
대보름 아파치 virtualhost 짧은주소(rewrite) 문의 [5] 2016.07.26 by 대보름
디버 XE + CUBRID 문의 [1] 2016.03.29 by 기진곰
Hi_Roy 아래 코드가 IE8에선 동작하는데 크롬/파폭/IE11 에선 오동작을 하네요. 무엇이 문제일까요? ㅡ_ㅡ; [1] 2016.02.25 by 기진곰
thdwjdtjr 메뉴바를 길게하고자 합니다 [1] file 2015.11.25 by DoorWeb
제로보드신세계잼 카메론 bx 슬라이드 모바일 관련 질문입니다. [1] 2015.10.30 by treasurej
color77 서버 옮기고 나서 관리자페이지에서 회원삭제하면 Query ID값이 잘못 지정되었습니다. 뜹니다 [7] 2015.06.01 by Luatic™
GT네오 DB자동백업 XE에서도 될까요?.... [1] 2015.05.13 by 휘즈
모해 게시글 목록에서 mid가 나타나지 않게하기 [2] 2014.06.26 by 모해
현재를 즐겨라 [jquery+widgets] 제이쿼리배경에 위젯삽입하는 방법 좀 가르쳐 주세요.  
원조바다새 ilivid 다운로더 지울 수 있는 방법없을까요?  
sarahkim 검색기능  
bear11 contact us 모듈 설정?  
네오브레이크 XE를 사용하는 대부분의 웹사이트의 오픈아이디(OpenID)가 작동을 안합니다.  
까치™ 외부페이지 _post.mid, _get.mid 변수전달문제