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

코쟁히

3년 전 조회 4,076

</p>

<p><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></p>

<p> </p>

<p><!-- 슬라이드 슬릭스-->

<script>

$('.slideshow').slick({

  slidesToShow: 2,

  slidesToScroll: 2,</p>

<p>  autoplaySpeed: 2000,

  dots:true

});

</script>

<!-- 슬라이드 슬릭스--></p>

<p>

슬릭 슬라이드를 이렇게 사용중인데요..

지금 1,2 - 3,4 이런식으로 자동 슬라이드가 되는데..

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

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

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

답변 1개

정렬:

채택된 답변

+20 포인트

포이치

프로필 보기 이 회원 글보기 이 회원의 댓글보기

3년 전

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

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

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

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

아래처럼 해보세요

</p>

<p><script></p>

<p>//먼저 엘리먼트롤 골구로 섞어줄 함수를 추가합니다.</p>

<p>

    $.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);

     };

 </p>

<p>$('.slideshow .slide').shuffle(); // slideshow 이하 slide 엘리먼트의 위치를 랜덤으로 배열하고

  </p>

<p>//slick 을 정의 합니다.</p>

<p>

$('.slideshow').slick({

  slidesToShow: 1,

  slidesToScroll: 1,

  autoplaySpeed: 2000,

  dots:true

});

 </p>

<p></script>

로그인 후 평가할 수 있습니다

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

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

로그인