인디케이터
이미지 슬라이드
인디케이터 이미지 슬라이드 ver1
See the Pen qBNqVEj by junheeleeme (@junheeleeme) on CodePen.
이미지 추가는 JS소스 수정 없이HTML코드만 삽입하면 자동으로 슬라이드 가능
인디케이터 이미지 슬라이드 ver2
See the Pen 인디케이터 이미지 슬라이드 ver2 by junheeleeme (@junheeleeme) on CodePen.
저작자표시
- Tip&Tech
- HOME > Class > Tip&Tech
- �������
| [HTML] CSS������ ���ư��� ��� �����̵��Դϴ�. | ||
| 15-07-21 23:00 | �� ȸ15741 | |
| //www.phpschool.com/link/tipntech/80026 ���� SyntaxHighlight�� ���� | ||
�ڹٽ�ũ��Ʈ �̷����� ���°� �ƴ϶� CSS�� figure��� �±����ε� �̷��� �Ǹ��ϰ� ��ʸ� ���� �� �ֳ�~ [ �� ���� Source ] <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus��"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } } body { margin: 0; } div#slider { overflow: hidden; } div#slider figure img { width: 20%; float: left; } div#slider figure { position: relative; width: 500%; margin: 0; top:0; left: 0; text-align: left; font-size: 0; -webkit-animation: 20s slidy ease-in-out infinite; animation: 20s slidy ease-in-out infinite; } </style> </head> <body> <div id="slider"> <figure> <img src="//demosthenes.info/assets/images/austin-fireworks.jpg" alt=""> <img src="//demosthenes.info/assets/images/taj-mahal.jpg" alt=""> <img src="//demosthenes.info/assets/images/ibiza.jpg" alt=""> <img src="//demosthenes.info/assets/images/ankor-wat.jpg" alt=""> <img src="//demosthenes.info/assets/images/austin-fireworks.jpg" alt=""> </figure> </div> </body> </html> |
- �������
- �Խù� 13,178��
| 13,178 | ���� | ��� CRUD + Excel ��� ���� [1] | 22-08-29 | 345 | |
| 13,177 | ��ġ/���� | [10����] PHP7.4 ���� xdebug �� ���� ���ǻ��� [3] | 22-08-27 | 236 | |
| 13,176 | HTML | Tab Menu (use CSS) | 22-07-02 | 556 | |
| 13,175 | ���� | html �������� pdf, �̹����� ���� (wkhtmltopdf, wkhtmltoimage�� [1] | 22-06-28 | 662 | |
| 13,174 | ��ũ��Ʈ | Web Mouse Gesture ���콺 ������� Remake | 22-06-20 | 454 | |
| 13,173 | ���� | Face Detector (js, php) [2] | 22-06-13 | 528 | |
| 13,172 | ��ũ��Ʈ | Google App Script �� �̿��� �ڷ��� �� (Telegram bot) [1] | 22-05-26 | 716 | |
| 13,171 | HTML | checkable appearance: none �� Ȱ���� checkbox�� radio �� �� | 22-04-19 | 448 | |
| 13,170 | ���� | spring mvc xml config �� security ����߿� jwt �� �߰��Ҷ� | 22-03-02 | 518 | |
| 13,169 | ��ġ/���� | ��� ���� [8] | 22-01-19 | 1484 | |
| 13,168 | HTML | .querySelector() ���� [, ���ȣ , square bracket �̽����̡� [5] | 22-01-12 | 707 | |
| 13,167 | ���� | php vs java �迭���� ���� �� [5] | 21-12-18 | 1113 | |
| 13,166 | �Լ� | php validatePassword | 21-12-17 | 737 | |
| 13,165 | ��ũ��Ʈ | js validatePassword | 21-12-17 | 505 | |
| 13,164 | �Լ� | ���� ����ŷ ó�� �Լ� [1] | 21-12-10 | 858 | |
| 13,163 | HTML | [������] üũ�ڽ� ��ü ���� �ҽ�(HTML,JS) | 21-12-08 | 608 | |
| 13,162 | DBMS | mysql to json string with GROUP_CONCAT, JSON_OBJECT [3] | 21-11-26 | 622 | |
| 13,161 | ��ġ/���� | fancyTree ���� [8] | 21-11-24 | 806 | |
| 13,160 | ��ġ/���� | PHP Segmentation Fault, gdb �� ���� ��ġ ã�� [1] | 21-11-20 | 600 | |
| 13,159 | ��Ÿ | �����쿡�� winget�� ����ؼ� openJDK ��ġ�ϱ� [1] | 21-11-19 | 425 |
1 2 3 4 5 6 7
8 9 10