1628
No
JQuery
Categories
JQuery Recent List more
- 탑으로 (top) , 맨 위로 가기 버튼 만들기2022-01-05 22:43:17
- 다음 주소 모바일 웹애 적용2021-11-21 04:16:02
- ★api무료 - ip 주소로 국가 코드 가져오기, 접속 위치에 따른 경도 위도값 가져오기, 경도 위도 좌표값으로 상세 주소 가져오기2021-10-06 16:58:19
- imgBB ajax 업로드2021-08-11 15:10:28
- 무한 스크롤 개발2021-04-15 04:05:21
- slick (슬릭) slide 적용, 화살표 및 점 꾸기기4932522020-01-25 17:12:05
- dataTable 한글 설정0241822019-04-09 11:13:16
- 자바스크립트 파일 이미지 체크, 용량 체크 Ckeditor 체크0211032017-09-03 18:46:12
- 최준호 개발 - 이미지 클릭시 확대 - 반응형에 맞게 축소 변경0192902017-09-03 18:46:12
- 이미지 돋보기처럼 확대0189702017-09-03 18:46:12
- 스프링newMustache로 화면 구성하기 -★2022-06-28 17:18:05
- 스프링new스프링부트 scheduler / cron 설정, global properties 값들을 읽어와 환경별 설정2022-06-27 14:25:39
- 스프링new스프링부트 프로퍼티 로컬, 개발, 운영 설정값 클래스로 관리 @PostConstruct 어노테이션 활용2022-06-27 03:35:03
- 스프링new스프링부트 REST API 개발 - 공통기능 HandleMethod 사용, 로그인 체크 , 공통 에러 설정, annotation 사용2022-06-26 21:56:05
- 스프링new스프링부트 REST API 개발 Mysql 페이징 처리 - mybatis 사용 ★2022-06-26 11:06:30
반응형 소스 참조
<div class="wrap"> <section data-1400="width-1400"> <article class="peb container-1400 text-center mt-150"> <div class="slide"> <script src="asset/slick/slick.min.js"></script> <link rel="stylesheet" href="asset/slick/slick.min.css"> <link rel="stylesheet" href="asset/slick/slick-theme.min.css"> <style> .slide {background:none} .slider-wrapper {width: 95%; margin: 0 auto; position:relative;} .slider1 li {position:relative;} .slider1 li .txt {display:flex; align-items:center; width: 40%; height: 220px; background: #e7141a; color:#fff; position: absolute; bottom: 12px; right: 12px; padding: 0 3%} .slider1 li .txt > div {width:100%;} .slider1 li .txt h3::after {content:''; display:block; width: 100%; height: 1px; background: #fff; margin: 10px 0;} .slider1 li .txt h3 {font-size:28px; font-weight: 600;} .slider1 li .txt p {font-size:16px; } .slider1 li .txt p:first-of-type {margin-bottom: 10px;} .slider1 li .txt p strong {font-size: 18px; font-weight: 500; padding-right: 15px; position:relative;} .slider1 li .txt p strong::after {content:''; display:block; width: 1px; height: 10px; background: rgba(255,255,255,0.5); position:absolute; right:7px; top:50%; transform: translateY(-50%);} .slider1 li .txt p:last-child strong:last-of-type {padding-left: 20px;} .slide_btn {display:flex; cursor: pointer; align-items:center; justify-content:center; width: 57px; height:57px; background: #fff; border: 3px solid #959595; position:absolute; top:50%; transform: translateY(-50%);z-index: 10;} .slide_btn img {width: 15px; height:auto;} .slide_btn.prev_btn {left: -24.5px;} .slide_btn.next_btn {right: -24.5px;} @media (max-width:1024px) { .slider-wrapper {width:100%} .slider1 li .txt {width:100%; height: 150px;position:static;} .slider1 li .txt h3 {font-size:20px;} .slider1 li .txt p {font-size:14px;} .slider1 li .txt p strong {font-size:16px;} .slide_btn {width: 45px; height:45px; background: rgba(255,255,255,0.6)} .slide_btn img {width:10px;} .slide_btn.prev_btn {left:0;} .slide_btn.next_btn {right:0;} } @media (max-width:768px) { .slider1 li .img {height:330px} .slider1 li .img img {width:auto} .slider1 li .txt {height:140px;} .slider1 li .txt h3 {font-size:18px;} .slider1 li .txt p strong {font-size:14px;} } @media (max-width:500px) { .slider1 li .img {height:230px;} } </style> <div class="slider-wrapper" id="slick-1"> <ul class="slider1 bxslider"> <li> <div class="img"><img src="http://www.nbfoam.com/theme/responsive_nbfoam/include/img/s11slide1.jpg" alt=""></div> <div class="txt"> <div> <h3>본사(1공장)</h3> <p><strong>Address</strong>경기도 화성시 정남면 만년로 635-15</p> <p><strong>Tel</strong>031-222-2202 <strong>Fax</strong>031)222-2203</p> </div> </div> </li> <li> <div class="img"><img src="http://www.nbfoam.com/theme/responsive_nbfoam/include/img/s11slide02.jpg" alt=""></div> <div class="txt"> <div> <h3>2공장</h3> <p><strong>Address</strong>경기도 화성시 정남면 귀래리 내향로 240-12</p> <p><strong>Tel</strong>031-222-2202 <strong>Fax</strong>031)222-2203</p> </div> </div> </li> <li> <div class="img"><img src="http://www.nbfoam.com/theme/responsive_nbfoam/include/img/s11slide03.jpg" alt=""></div> <div class="txt"> <div> <h3>4공장</h3> <p><strong>Address</strong>경기도 화성시 향남읍 동오리 9-3</p> <p><strong>Tel</strong>031-222-2202 <strong>Fax</strong>031)222-2203</p> </div> </div> </li> </ul> <div class="prev_btn slide_btn"><img src="asset/slick/prev.png" alt=""></div> <div class="next_btn slide_btn"><img src="asset/slick/next.png" alt=""></div> </div> <script> $(function(){ $slick = $('.slider1'); $slick.slick({ //autoplay:true, autoplaySpeed:3000, dots: false, arrow: true, infinite: true, speed: 300, slidesToShow: 1, slidesToScroll: 1, prevArrow: $('.prev_btn'), nextArrow: $('.next_btn'), }); $slick.on('afterChange', function(event, slick, currentSlide, nextSlide){ $(".num_p i").text("0"+(currentSlide+1)); }); }); </script> </div> </article> </section> </div>
2022-01-23 05:57:53상단에
var geocoder = new daum.maps.services.Geocoder();
2021-12-27 00:52:26
// 우편번호 찾기 화면을 넣을 element
댓글 ( 2)
댓글 남기기