묻고답하기

제가 자바스크립트를 잘 몰라서 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 남기남
qkadpaksqhrtj 채팅사이트 pg사 연결.. [4] 2020.07.15 by XEANT.com
무한행복 XE color code 모바일 레이아웃 [1] 2020.07.15 by XEANT.com
상해파 게시글에 글 작성시 글은 작성은 되는데 글 목록으로 화면전환이 안됩니다. [1] 2020.07.15 by XEANT.com
MC조몽 스킨내 html 파일 링크 연결이 가능한가요? [2] 2020.07.13 by MC조몽
sst22 안녕하세요 호스팅 이전 후 문제좀 확인부탁드립니다. [1] 2020.07.10 by sejin7940
현수 내용 직접 추가 시 에러상황.. 급한데 [2] 2020.07.10 by 현수
미리내가족 txtyle 에서 admin으로 접속이 안됩니다. [2] file 2020.07.10 by sejin7940
손주사랑 메뉴버튼에 이미지를 넣었는데요 [2] file 2020.07.09 by 손주사랑
까까뭉 사이트 폐쇄 후 sql 파일 복원 [1] 2020.07.08 by Luatic™
ahhas**** xe edition 레이아웃 크기 수정하는 것이 반영되지 않는 이유가 무엇인가요? [2] 2020.07.08 by ahhas****
닉단 상세설정에서 저장하면 페이지가 초기화가 됩니다. [2] file 2020.07.07 by 닉단
도킹맨 이미지 닉네임과 글씨가 같이 표기되는 문제 어떻게 해야할까요? [1] file 2020.07.07 by sejin7940
모얼더 주소창에 표시되는 파라미터를 수정할 수 있을까요? [1] 2020.07.06 by sejin7940
JUNG 관리자메뉴초기화 [1] 2020.07.03 by sejin7940
JUNG 코아 업데이트 복구 방법 [1] 2020.07.03 by sejin7940
대한국인 [다국어 세트] lang.xml 번역에 대한 문의 [2] 2020.07.02 by 대한국인
도은 쇼핑몰(누리고) 다국어 사용 시 상품명 출력문제 [2] file 2020.07.02 by 도은
자연 엑스돔 XDOM 레이아웃 v2 검색 에러에 대해 자문을 구합니다. [2] 2020.07.01 by 자연
대한국인 DoorWeb 레이아웃 B(Door_cpB_limit) 메인페이지에서 제대로 외국어가 표시 안됩니다. file  
대한국인 DoorWeb 레이아웃 B, 메뉴가 무조건 대문자로 나오는 걸 해제하려면? [2] file 2020.06.30 by 대한국인
서기f576b 아이콘샵 분류 생성시 module_srl 값은 필수입니다. file  
누리 주소창의 상세주소 저장오류  
x뿌니x 웹프로그래밍 사이트 만들기 db 설정 [1] file 2020.06.23 by 제이와이엔소프트
Julian 시놀로지 NAS XE3 설치 문제 [2] file 2020.06.20 by Julian
홈런볼11 글 작성 기간에 대한 조건문 [2] 2020.06.18 by 홈런볼11
yongsdotcom 파도 이미지글 출력 위젯 모바일 섬네일 오류 file  
mediaq**** 댓글 이미지 첨부 처리 [1] 2020.06.15 by 제이와이엔소프트
AimJin 원하는 페이지만 ip주소를 입력해서 접속 가능하도록 설정 가능할까요? [4] 2020.06.15 by AimJin
yongsdotcom sweet mobile 사이드 메뉴 오류(안눌림) file  
막창ㅏㅏㅏㅏ Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE [2] file 2020.06.09 by akasima