jQuery Plug-in responsiveGallery_sample
2021. 12. 20. 11:53ㆍStudy/Example & Plug-in
jQuery Plug-in responsiveGallery_sample
responsiveGallery_sample.zip
0.95MB
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>한국타이어</title>
<link rel="stylesheet" href="./css/responsiveGallery.css">
</head>
<body>
<section class="content_bot best_product">
<div class="best_product_inner">
<h3>Best 제품</h3>
<div class="w-gallery">
<div id="responsiveGallery-container" class="responsiveGallery-container">
<a class="responsiveGallery-btn responsiveGallery-btn_prev" href="javascript:void(0);"></a>
<a class="responsiveGallery-btn responsiveGallery-btn_next" href="javascript:void(0);"></a>
<ul class="responsiveGallery-wrapper">
<li class="responsiveGallery-item">
<a href="#" class="responsivGallery-link">
<img src="./images/0.png" height="320" width="320" alt="벤투스 S2 AS" class="responsivGallery-pic">
<div class="w-responsivGallery-info">
<dl>
<dt class="responsivGallery-name">벤투스 S2 AS</dt>
<dd class="responsivGallery-position">Comfort Technology SUV타이어</dd>
</dl>
</div>
</a>
</li>
<li class="responsiveGallery-item">
<a href="#" class="responsivGallery-link">
<img src="./images/1.png" height="320" width="320" alt="다이나프로 HL3" class="responsivGallery-pic">
<div class="w-responsivGallery-info">
<dl>
<dt class="responsivGallery-name">다이나프로 HL3</dt>
<dd class="responsivGallery-position">강인함, 편안함 밸런스의 SUV타이어</dd>
</dl>
</div>
</a>
</li>
<li class="responsiveGallery-item">
<a href="#" class="responsivGallery-link">
<img src="./images/2.png" height="320" width="320" alt="키너지 AS EV" class="responsivGallery-pic">
<div class="w-responsivGallery-info">
<dl>
<dt class="responsivGallery-name">키너지 AS EV</dt>
<dd class="responsivGallery-position">전기차 주행 balance를 완성시키는 타이어</dd>
</dl>
</div>
</a>
</li>
<li class="responsiveGallery-item">
<a href="#" class="responsivGallery-link">
<img src="./images/3.png" height="320" width="320" alt="다이나프로 올 터레인" class="responsivGallery-pic">
<div class="w-responsivGallery-info">
<dl>
<dt class="responsivGallery-name">다이나프로 올 터레인</dt>
<dd class="responsivGallery-position">모든 도로에 최적화된 전천후 타이어</dd>
</dl>
</div>
</a>
</li>
<li class="responsiveGallery-item">
<a href="#" class="responsivGallery-link">
<img src="./images/4.png" height="320" width="320" alt="Smart Plus2" class="responsivGallery-pic">
<div class="w-responsivGallery-info">
<dl>
<dt class="responsivGallery-name">Smart Plus2</dt>
<dd class="responsivGallery-position">합리적인 소비자를 위한 승용차용 사계절 타이어</dd>
</dl>
</div>
</a>
</li>
<li class="responsiveGallery-item">
<a href="#" class="responsivGallery-link">
<img src="./images/5.png" height="320" width="320" alt="Optimo H426" class="responsivGallery-pic">
<div class="w-responsivGallery-info">
<dl>
<dt class="responsivGallery-name">Optimo H426</dt>
<dd class="responsivGallery-position">카 메이커가 인정한 저소음 승차감 타이어</dd>
</dl>
</div>
</a>
</li>
<li class="responsiveGallery-item">
<a href="#" class="responsivGallery-link">
<img src="./images/6.png" height="320" width="320" alt="벤투스 S1 noble2" class="responsivGallery-pic">
<div class="w-responsivGallery-info">
<dl>
<dt class="responsivGallery-name">벤투스 S1 noble2</dt>
<dd class="responsivGallery-position">새롭게 태어난 프리미엄 그 이상의 프리미엄 타이어</dd>
</dl>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/jquery-migrate-1.4.1.min.js"></script>
<!-- responsiveGallery 플러그인 -->
<script src="./js/modernizr.custom.js"></script>
<script src="./js/jquery.responsiveGallery.js"></script>
<script>
$(function () { //호출코드
$('.responsiveGallery-wrapper').responsiveGallery({
animatDuration: 400,
$btn_prev: $('.responsiveGallery-btn_prev'),
$btn_next: $('.responsiveGallery-btn_next')
});
});
</script>
</body>
</html>
'Study > Example & Plug-in' 카테고리의 다른 글
| jQuery Plug-in Responsive-3D-Cover-Flow-Gallery (0) | 2021.12.20 |
|---|---|
| jQuery Plug-in scroll waypoint (0) | 2021.12.20 |
| jQuery Plug-in coin-slider (0) | 2021.12.20 |
| jQuery Plug-in slide_left (0) | 2021.12.20 |
| jQuery Plug-in accordion (0) | 2021.12.20 |
