묻고답하기
cycle-pager 배너에 a 링크를 걸면 배너 이미지가 풀려요ㅠ
2019.04.02 10:36
자바스크립트나 이런쪽은 하나도 모르는 초보구요
a링크 태그를 건 이미지만 자꾸 쏙 나와요..ㅠㅠ
어디가 문제인걸까요>>?
저 부분의 소스만 가져와봤는데 한 번 봐주시면 감사하겠습니닷..
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<link href="css/main.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="js/common_js.js"></script>
<script src="js/login.js"></script>
</script>
</head>
<body>
<div id="main_banner">
<div class="bg">
<div class="cycle-slideshow" data-cycle-fx="scrollHorz"
data-cycle-timeout="3000" data-cycle-prev="#prev"
data-cycle-next="#next">
<div class="cycle-pager"></div>
<img src="images/bg.png" alt="메인사진1">
<a href="http://naver.me/5j7YPFOT">
<img src="images/bg4.png" alt="메인사진4"> <---- 이부분 이미지에는 cycle-pager가 적용이 안되요
</a>
<img src="images/bg5.png" alt="메인사진5">
</div>
css
/*슬라이드 시작*/
.cycle-slideshow, .cycle-slideshow *
{-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.cycle-slideshow
{width: 100%;
margin: -1px auto;
padding: 0;
position: relative;}
.cycle-slideshow div.slide
{width: 100%;
height: 100% }
.cycle-slideshow a img
{position: absolute;
top: 0; left: 0;
width: 100%;
padding: 0;
display: block;}
.cycle-slideshow a img:first-child
{position: static;
z-index: 100;}
.cycle-pager
{text-align: center;
width: 100%;
z-index: 500;
position: absolute;
bottom: 2px;
overflow: hidden;}
.cycle-pager span
{font-family: arial;
font-size: 50px;
width: 21px;
height: 16px;
display: inline-block;
color: #ddd;
cursor: pointer; }
.cycle-pager span.cycle-pager-active
{ color: #17306F;}
.cycle-pager > *
{ cursor: pointer;}
/*슬라이드 끝*/
</div>
</div>
태그 연관 글
- [2021/08/03] 묻고답하기 홈페이지를 처음 제작해보는데 *3
- [2020/12/16] 묻고답하기 footer 하단에 고정하려면 어딜 수정해야 할까요?
- [2019/03/27] 묻고답하기 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. *1
- [2019/01/03] 묻고답하기 카메론 위젯에서 날짜부분을 올리고 싶어요. *1
- [2018/12/31] 묻고답하기 슬라이드 위젯 삽입 후 메뉴가 안보이네요 고수님들 부탁드립니다 *6
자바스크립트나 이런쪽은 하나도 모르는 초보구요
a링크 태그를 건 이미지만 자꾸 쏙 나와요..ㅠㅠ
어디가 문제인걸까요>>?
저 부분의 소스만 가져와봤는데 한 번 봐주시면 감사하겠습니닷..
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<link href="css/main.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="js/common_js.js"></script>
<script src="js/login.js"></script>
</script>
</head>
<body>
<div id="main_banner">
<div class="bg">
<div class="cycle-slideshow" data-cycle-fx="scrollHorz"
data-cycle-timeout="3000" data-cycle-prev="#prev"
data-cycle-next="#next">
<div class="cycle-pager"></div>
<img src="images/bg.png" alt="메인사진1">
<a href="http://naver.me/5j7YPFOT">
<img src="images/bg4.png" alt="메인사진4"> <---- 이부분 이미지에는 cycle-pager가 적용이 안되요
</a>
<img src="images/bg5.png" alt="메인사진5">
</div>
css
/*슬라이드 시작*/
.cycle-slideshow, .cycle-slideshow *
{-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.cycle-slideshow
{width: 100%;
margin: -1px auto;
padding: 0;
position: relative;}
.cycle-slideshow div.slide
{width: 100%;
height: 100% }
.cycle-slideshow a img
{position: absolute;
top: 0; left: 0;
width: 100%;
padding: 0;
display: block;}
.cycle-slideshow a img:first-child
{position: static;
z-index: 100;}
.cycle-pager
{text-align: center;
width: 100%;
z-index: 500;
position: absolute;
bottom: 2px;
overflow: hidden;}
.cycle-pager span
{font-family: arial;
font-size: 50px;
width: 21px;
height: 16px;
display: inline-block;
color: #ddd;
cursor: pointer; }
.cycle-pager span.cycle-pager-active
{ color: #17306F;}
.cycle-pager > *
{ cursor: pointer;}
/*슬라이드 끝*/
</div>
</div>
댓글 2
-
아 그럼 새로 작업을..해야하는걸까요 하아ㅠㅠㅠㅠㅠ 답변 감사합니다..!!
아마 슬라이드 규칙이 이미지가 계속 나열되어야 정상적인 html로 인지하는거 같습니다.
링크가 가능한 새로운 슬라이드 소스를 찾아보시길 권해드립니다.