파일 첨부해올려봅니다
페이지 정보
작성자
본문
파일첨부했습니다
첨부파일
- 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>