PC에 최적화되어 있는 라이브러리
원본 슬라이드 크기에 따라 유연하게 변경됨
<!DOCTYPE html>
<html lang="ko">
<head>
<title>flex_slide</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/flexslider.css">
<!-- 필수 연결 css -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- 제이쿼리 외부 URL주소 -->
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="jquery.flexslider.js"></script>
<!-- 필수 연결 js -->
<style>
* {margin: 0; padding: 0;}
ul, li {list-style: none;}
section.slider {width: 70%; margin: 0 auto;}
</style>
</head>
<body>
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li data-thumb="images/kitchen_adventurer_cheesecake_brownie.jpg"><img src="images/kitchen_adventurer_cheesecake_brownie.jpg" alt=""></li>
<li data-thumb="images/kitchen_adventurer_caramel.jpg"><img src="images/kitchen_adventurer_caramel.jpg" alt=""></li>
<li data-thumb="images/kitchen_adventurer_donut.jpg"><img src="images/kitchen_adventurer_donut.jpg" alt=""></li>
<li data-thumb="images/kitchen_adventurer_lemon.jpg"><img src="images/kitchen_adventurer_lemon.jpg" alt=""></li>
</ul>
</div>
</section>
<script>
// Can also be used with $(document).ready()
$(function () {
SyntaxHighlighter.all();
});
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
controlNav: "thumbnails",
start: function (slider) {
$('body').removeClass('loading');
}
});
});
</script>
</body>
</html>
live server를 통해 본 최종 결과
사이트를 가보면 다른 예시들을 볼 수 있고 빠른 적용이 가능하다.
Fancybox - Fancy jQuery lightbox alternative
What is it? FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. It was built using the jQuery library. Licensed under both MIT and GPL licenses Features Can display images, HTML
fancybox.net
http://flexslider.woothemes.com/
FlexSlider 2
flexslider.woothemes.com
*개인 공부 및 기록용으로 게시글을 발행하며, 오타나 문제가 있을 경우 댓글을 남겨주세요!
반응형
SMALL
'Tools > plugIn' 카테고리의 다른 글
| [ plugIn] Chrome User Agent Switcher 사용하기 (0) | 2021.12.01 |
|---|---|
| [plugIn] ScrollReveal 사용하기 (0) | 2021.10.31 |
| [slider] slick slider 사용법 (0) | 2021.10.31 |
| [plugIn] Font Awesome 적용하기 (0) | 2021.10.29 |
| [slider] owl-carousel 사용하기 (0) | 2021.07.15 |