랜덤 배경화면 및 제이쿼리 질문드립니다.
본문
swiper 슬라이드 사용하구 있습니다.
제가 원하는 기능은 새로고침 시 나오는 배경화면은 랜덤이되, 이후 넘어가는 슬라이드는
순서대로 넘어가는 기능인데요,
아래 소스는 새로고침 시에도, 넘어가는 순서도 랜덤으로 뜨더라구요..
html와 스크립트는 아래와 같고, css background로 /img/1.jpg ~ 6.jpg 되어있습니다
그리고 array부분에 하나하나 넣지 않고 간단하게 줄이고 싶은데 아직 그만한 스킬이 안되서 그 또한 도움을 요청드립니다.
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide bg01"></div>
<div class="swiper-slide bg02"></div>
<div class="swiper-slide bg03"></div>
<div class="swiper-slide bg04"></div>
<div class="swiper-slide bg05"></div>
<div class="swiper-slide bg06"></div>
</div>
</div>
<script>
$(function () {
var swiper = new Swiper('.swiper-container', {
effect : 'fade', // 페이드 효과 사용
slidesPerView : 'auto',
autoplay : { // 자동 슬라이드 설정 , 비 활성화 시 false
delay : 1000, // 시간 설정
disableOnInteraction : false, // false로 설정하면 스와이프 후 자동 재생이 비활성화 되지 않음
},
});
var SlideNum = $('.swiper-slide').length;
var Array = ['/theme/basic/img/1.jpg','/theme/basic/img/2.jpg','/theme/basic/img/3.jpg','/theme/basic/img/4.jpg','/theme/basic/img/5.jpg','/theme/basic/img/6.jpg'];
for (i = 1; i <= SlideNum; i += 1) {
var RandomNum = Math.floor(Math.random() * 6);
if (Array.indexOf(RandomNum) === -1) {
Array.push(RandomNum);
$('.swiper-slide').eq(RandomNum).addClass('bg0' + i + '');
} else {
i -= 1;
}
}
});
</script>
질문 요약
1. 배경화면이 새로고침 시에는 랜덤이되 다음 나오는 이미지는 순서대로 나오게 하려면 어떻게 수정해야 할까요?
2. array 부분에 경로를 각각 주지 않고 압축해서 적는 방법이 있을까요?