WEB
[JQuery] Fotorama 사용해보기 / 이미지 슬라이드 만들기
yo~og
2021. 11. 30. 17:59
Fotorama를 사용하면 이미지 슬라이드를 쉽게 만들 수 있습니다. 구현 방법을 알아봅시다.
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>위 코드를 HTML에 삽입해줍니다.
<div class="fotorama">
<img src="images/image1.png"/>
<img src="images/image2.png"/>
</div>class를 fotorama로 지정해줍니다.
이미지는 원하시는 것으로 넣으시면됩니다.
https://fotorama.io/#80713821-5d54-4819-810a-19991502ca56
Fotorama — Simple and Powerful Responsive jQuery Image Gallery
A simple yet powerful responsive jQuery image gallery. Set up Just copy and paste the snippets below to integrate Fotorama. 1. This goes to the of your page: 2. Then, wherever you want the gallery in your page : Example: Basic 3. Enjoy! Fotorama’s CDN is
fotorama.io
여기에서 다양한 기능들을 사용할 수 있습니다.
[전체 코드]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/jquery/Step04_fotorama.jsp</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<style>
.content{
width: 800px;
height: 500px;
background-color: yellow;
}
.content img{
width: 100px;
}
</style>
</head>
<body>
<div class="fotorama"
data-width="500"
data-height="300"
data-allowfullscreen="true"
data-nav="thumbs"
data-autoplay="true">
<img src="images/image1.png" data-caption="하나"/>
<img src="images/image2.png" data-caption="두울"/>
<img src="images/image3.png" data-caption="세엣"/>
<img src="images/image4.png" data-caption="네엣"/>
<img src="images/image5.png" data-caption="다섯"/>
</div>
<div class="fotorama">
<div class="content">
<h3>첫번째 컨텐츠</h3>
<img src="images/1.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque hic voluptate magni doloremque consectetur magnam fuga possimus aspernatur quam dolorum nostrum sequi facilis vitae ducimus natus nobis provident praesentium! Aspernatur.</p>
</div>
<div class="content">
<h3>두번째 컨텐츠</h3>
<img src="images/2.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque hic voluptate magni doloremque consectetur magnam fuga possimus aspernatur quam dolorum nostrum sequi facilis vitae ducimus natus nobis provident praesentium! Aspernatur.</p>
</div>
<div class="content">
<h3>세번째 컨텐츠</h3>
<img src="images/3.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque hic voluptate magni doloremque consectetur magnam fuga possimus aspernatur quam dolorum nostrum sequi facilis vitae ducimus natus nobis provident praesentium! Aspernatur.</p>
</div>
</div>
</body>
</html>
위 링크를 들어가서