SIR
목록으로

slick slider 랜덤 출력 되나요? 채택완료

코쟁히
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 조회 4,394
답변 1
목록

Copy 
<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 이런식으로 자동 슬라이드가 되는데..

다 섞어서 랜덤으로 출력할 수 있는 방법 있을까요?

#그누보드5 #slick #slide #php #javascript

답변 1개

채택된 답변
+20 포인트

슬라이드가 db에 의해 호출된다면 rand() 로 뽑으면 간단히 해결되지만

코드를 봤을때 퍼블리싱하신 내용같습니다.

슬릭의 시작위치를 지정하는 옵션도 있는데 이건 시작만 랜덤이고 나머지는 순차적이라

원하시는 내용이 아닐듯하고

 

아래처럼 해보세요

 

 

Copy 
<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>
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고