묻고답하기

제가 자바스크립트를 잘 몰라서 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 남기남
조규남 호스팅 질문좀 받아주실분? [3] 2019.10.20 by xelab
나비 html 사진 슬라이드 질문 [2] 2019.10.21 by 나비
봄비 회원가입 오류가 발생합니다 [2] file 2019.10.21 by 봄비
headkim 리눅스 명령어 [5] 2019.10.21 by battery
어경치치 xe XE 관리자모드에서 레이아웃 및 디자인 수정사항 저장 후 적용이 안되고있어요 [1] 2019.10.21 by SimpleCode
또딸이 모든 게시판 쓰기 오류가 납니다. [4] file 2019.10.23 by 또딸이
너랑나랑 처음 설치 후 질문 드립니다. 홈으로 만들려면... [2] file 2019.10.23 by 너랑나랑
스케베 각종게시판 하단 파일첨부 아이콘 Adobe Flash 문제 [3] file 2019.10.24 by 스케베
gelmano iframe땜시 고생하다가 글올립니다.(자동 높이 조절) file  
굿앤조이 xe1710 모바일에서 팝업 띄우기 [1] 2019.10.24 by CJM
incation 사이트가 갑자기 빈화면이 되는데요 [1] 2019.10.24 by CJM
대한국인 게시판 글 쓰기와 본문 읽기에서, 이런 현상이 일어나는데 ~ 버그인가요? [3] file 2019.10.24 by CJM
리승쿠이 XE 파일첨부문제 [1] 2019.10.26 by cokimax
kole 파일 업로드시에 대기에는있는데 안보임 [2] 2019.10.26 by cokimax
goga**** 사이트맵 여러개 생성시 질문있습니다. [1] 2019.10.29 by sejin7940
뻬빠 모바일 레이아웃 적용 문의 [4] file 2019.10.29 by 뻬빠
cokimax 쪽지함 및 쪽지 기능이 사라졌습니다. [긴급요청] [2] 2019.10.30 by cokimax
다2 네임서버 변경 [2] 2019.10.30 by 다2
roks821 ie11 에서 xe1.4.10을 못불러와요. 어떻게 해요?  
annn 잘못건드려서 로그인을 못하고 있어요... [2] file 2019.10.31 by sejin7940
sdh**** 가입 추가등록폼 DB에 저장이 안되는 문제 [1] file 2019.10.31 by sejin7940
국가대표21 [스킨 ] 세로 메뉴 출력 스킨 ver. 0.3 <-- 설치안됐는데..계속 뜨네요 [4] 2019.11.01 by 건즈
cherry999876 안녕하세요 ᆢ포토샵 질문입니다 file  
건즈 메뉴 항목 삭제 [4] 2019.11.02 by 건즈
건즈 에디터에 파일을 첨부할 수가 없는데 왜 그럴까요? [4] file 2019.11.03 by 건즈
금붕어 1.11.6 는 쉬운설치로 가능한가요? [1] 2019.11.03 by 금붕어
yks**** 제 로 보 드 4 게시판이 안열려요 [3] 2019.11.04 by 제이와이엔소프트
에필린 위젯페이지 사진클릭 안되게 하는 법 좀... [2] 2019.11.05 by 에필린
소수의힘 글쓰는 창에 현재 작성하는 글의 글자수를 띄우는 방법 [2] 2019.11.06 by 소수의힘
소수의힘 본문 게시글의 글자 수를 게시물 목록에 표시하는 방법 [1] file 2019.11.06 by SimpleCode