묻고답하기

제가 자바스크립트를 잘 몰라서 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 남기남
희1 레이아웃 상세 설정에 관해 질문 있습니다 [1] 2022.11.08 by sejin7940
railman 스케치북 사이트에서 다운이 안됩니다. [1] 2022.11.06 by tree****
학부_문영제 긴급 롤백 어떻게 하나요? [1] 2022.10.31 by sejin7940
미래로꿈으로 도메인 리다이렉트 설정 문의드립니다. [1] 2022.10.27 by sejin7940
하이젠버그 스케치북 게시판 목록에 IP 노출하는 방법 없을까요? [1] file 2022.10.27 by sejin7940
☆~ 파일 첨부에 대한 질문입니다.  
railman 구글 검색 시 등록되어 있지않음 또는 등록되어 있지만 문제가 있음. file  
내놔내놔 고수님들 풀페이지 적용시 탭키가 안먹힙니다..도와주세요 [2] 2022.10.06 by 내놔내놔
roks821 xe3에서 html 문서나 jpg 파일들을 불러 오지 못해요 [1] 2022.10.06 by sejin7940
나리 해외사이트만 차단하면 홈피가 먹통입니다. [1] 2022.10.06 by sejin7940
railman 메인페이지에서 유튜브 자동으로 실행하는 방법  
제이디600 Data too long for column ''color'' at row 1 무슨뜻인지?? [2] 2022.09.21 by 지오닷컴
휴앤유재활병원 이 애러문구 혹시 해결 가능할지... [1] 2022.09.13 by sejin7940
ChangS xe 상대주소로 바꿀수 있나요? xbox [1] 2022.09.10 by sejin7940
pcline 404 Oops, Sorry. Page is not found! 에러가 나옵니다 [2] 2022.09.08 by sejin7940
보통사람 현재 접속자 관리자 보이게 하는 방법 문의합니다. [2] file 2022.09.05 by 보통사람
pcline Fatal error: Cannot use 'Object' as class name as it is reserved in /pcline22/www/classes/object/Object.class.php on line 9 [6] 2022.09.04 by sejin7940
옵저버 쇼핑몰의 상단에 가로로 메뉴들이 나오는데 간격을 %로 조정하고 싶습니다.  
JhC html 수정하여 레이아웃변경 [1] file 2022.08.30 by YJSoft
노랗노랗 홈페이지 디자인을 바꾸면 모든게 삭제됩니다. [2] 2022.08.22 by 노랗노랗
지구를지켜라 도메인 주소 뒤에 /xe를 붙어야만 접속될 때 해결 방법이? [1] 2022.08.21 by himan
dang 라이믹스 업데이트후 aplos 스킨 수정버튼 오류 [1] 2022.08.21 by sejin7940
dang 아이폰 검색안되는문제 [1] 2022.08.10 by YJSoft
kew1o 기본레이아웃 메뉴 위치 변경 [1] file 2022.08.10 by YJSoft
kew1o 메인 페이지 하단 내용 삭제 [1] file 2022.08.10 by YJSoft
kew1o 사이트 잠금에서 안내문의 역활 [1] 2022.08.10 by YJSoft
인천한량 레이아웃에 카피된 html 경로변경  
용이 기존 호스팅 홈페이지를 신규 호스팅에 그대로 복사하는 방법 문의 [1] 2022.07.23 by sejin7940
부씨 FOOTER연락처를 수정하면 메인화면 게시글들이 모두 사라집니다ㅠㅠ [1] file 2022.07.23 by sejin7940
배정현 코어 업데이트 이후에 HTTP ERROR 500 file