slick slider 랜덤 출력 되나요?
본문
<div class="col1">
<div class="slideshow">
<div class="slide">
<a href="#">
<div id="slide00">
<i class="fa-solid fa-location-dot"></i><p>전국</p>
</div>
<div id="slide01">11</div>
<div id="slide02">24시간 문의</div>
<div id="slide03">
<p>a업체</p>
</div>
<div id="slide04">상세보기</div>
</a>
</div>
<div class="slide">
<a href="#">
<div id="slide00">
<i class="fa-solid fa-location-dot"></i><p>전국</p>
</div>
<div id="slide01">22</div>
<div id="slide02">24시간 문의</div>
<div id="slide03">
<p>a업체</p>
</div>
<div id="slide04">상세보기</div>
</a>
</div>
<div class="slide">
<a href="#">
<div id="slide00">
<i class="fa-solid fa-location-dot"></i><p>전국</p>
</div>
<div id="slide01">33</div>
<div id="slide02">24시간 문의</div>
<div id="slide03">
<p>a업체</p>
</div>
<div id="slide04">상세보기</div>
</a>
</div>
<div class="slide">
<a href="#">
<div id="slide00">
<i class="fa-solid fa-location-dot"></i><p>전국</p>
</div>
<div id="slide01">44</div>
<div id="slide02">24시간 문의</div>
<div id="slide03">
<p>a업체</p>
</div>
<div id="slide04">상세보기</div>
</a>
</div>
</div>
</div>
<!-- 슬라이드 슬릭스-->
<script>
$('.slideshow').slick({
slidesToShow: 2,
slidesToScroll: 2,
autoplaySpeed: 2000,
dots:true
});
</script>
<!-- 슬라이드 슬릭스-->
슬릭 슬라이드를 이렇게 사용중인데요..
지금 1,2 - 3,4 이런식으로 자동 슬라이드가 되는데..
다 섞어서 랜덤으로 출력할 수 있는 방법 있을까요?
답변 1
슬라이드가 db에 의해 호출된다면 rand() 로 뽑으면 간단히 해결되지만
코드를 봤을때 퍼블리싱하신 내용같습니다.
슬릭의 시작위치를 지정하는 옵션도 있는데 이건 시작만 랜덤이고 나머지는 순차적이라
원하시는 내용이 아닐듯하고
아래처럼 해보세요
<script>
//먼저 엘리먼트롤 골구로 섞어줄 함수를 추가합니다.
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
$('.slideshow .slide').shuffle(); // slideshow 이하 slide 엘리먼트의 위치를 랜덤으로 배열하고
//slick 을 정의 합니다.
$('.slideshow').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplaySpeed: 2000,
dots:true
});
</script>
답변을 작성하시기 전에 로그인 해주세요.
