slick slider 랜덤 출력 되나요?

slick slider 랜덤 출력 되나요?

QA

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>
 
답변을 작성하시기 전에 로그인 해주세요.
전체 44
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT