파일 첨부해올려봅니다
페이지 정보
작성자
우리두리
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 2건
작성일 25-05-28 18:00
본문
파일첨부했습니다
첨부파일
- page3.php (12.8K) 2회 다운로드 | DATE : 2025-05-28 18:00:57
댓글목록
소프트존님의 댓글
소프트존
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
작성일
확인 한번 다시 해보고 코멘트 달아드릴게요
소프트존님의 댓글
소프트존
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
작성일
아래 코드 참고하시어 작업해주시면 좋을것 같습니다.
슬라이드를 2개 출력해서 사용중이니 6개까지 늘려주시면 될것 같습니다.
<!-- FlexSlider CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css" />
<style>
body { font-family: sans-serif; margin: 50px; }
.slider-wrap {
margin-bottom: 60px;
}
.flexslider {
width: 600px;
margin: 0 auto;
}
.thumbnails {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 10px;
}
.thumbnails img {
width: 100px;
height: 66px;
cursor: pointer;
border: 2px solid transparent;
}
.thumbnails img.active {
border-color: #007BFF;
}
</style>
</head>
<body>
<!-- 슬라이더 1 -->
<div class="slider-wrap">
<div class="flexslider slider-1">
<ul class="slides">
</ul>
</div>
<div class="thumbnails thumbs-1">
</div>
</div>
<!-- 슬라이더 2 -->
<div class="slider-wrap">
<div class="flexslider slider-2">
<ul class="slides">
</ul>
</div>
<div class="thumbnails thumbs-2">
</div>
</div>
<!-- jQuery & FlexSlider -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider-min.js"></script>
<script>
$(document).ready(function() {
// 슬라이더 1
var slider1 = $('.slider-1').flexslider({
animation: "slide",
controlNav: false,
directionNav: false,
slideshow: false
}).data('flexslider');
$('.thumbs-1 img').click(function() {
var index = $(this).data('index');
slider1.flexslider(index);
$('.thumbs-1 img').removeClass('active');
$(this).addClass('active');
});
// 슬라이더 2
var slider2 = $('.slider-2').flexslider({
animation: "slide",
controlNav: false,
directionNav: false,
slideshow: false
}).data('flexslider');
$('.thumbs-2 img').click(function() {
var index = $(this).data('index');
slider2.flexslider(index);
$('.thumbs-2 img').removeClass('active');
$(this).addClass('active');
});
});
</script>
메뉴얼
