--> -->
6월 2022 | ||||||
---|---|---|---|---|---|---|
일 | 월 | 화 | 수 | 목 | 금 | 토 |
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 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();
// 우편번호 찾기 화면을 넣을 element
macaronics.net 는 그어떠한 동영상, 이미지, 파일등을 직접적으로 업로드 제공을 하지 않습니다. 페이스북, 트위터 등 각종 SNS 처럼 macaronics.net 는 웹서핑을 통하여 각종 페이지위치등을 하이퍼링크, 다이렉트링크, 직접링크등으로 링크된 페이지 주소만을 수집 저장하여 제공하고 있습니다. 저장된 각각의 주소에 연결된 페이지등은 그 페이지에서 제공하는 "서버, 사이트" 상황에 따라 페이지와 내용이 삭제 중단 될 수 있으며 macaronics.net 과는 어떠한 연관 관련이 없음을 알려드립니다. 또한, 저작권에 관련된 문제있는 글이나 기타 저작권에 관련된 문제가 있는 것은 연락주시면 바로 삭제해 드리겠습니다.
댓글 ( 2)
댓글 남기기