如何为jssor滑块随机选择几张幻灯片并隐藏其余幻灯片

How to pick random few slides for jssor slider and hide the rest?

本文关键字：幻灯片 几张 隐藏 jssor 选择 随机      更新时间：2023-09-26

我有8张幻灯片，每次用户刷新页面时我想随机显示3张。我该如何做到这一点？

我决定将幻灯片放在另一个div中并隐藏它。然后使用来自jQuery的解决方案选择具有相同类的随机元素，我将div的3个切片，然后将其复制到jssor幻灯片中。

function shuffle(array) {
  var m = array.length, t, i;
  // While there remain elements to shuffle…
  while (m) {
  // Pick a remaining element…
  i = Math.floor(Math.random() * m--);
  // And swap it with the current element.
  t = array[m];
  array[m] = array[i];
  array[i] = t;
  }
  return array;
}
jQuery(document).ready(function ($) {
    var $all = $(".all-slides > div").removeClass("selected");
    $(shuffle($all).slice(0, 3)).addClass("selected");
    $( ".selected" ).appendTo( ".slides" );
        var options = {
            $DragOrientation: 0,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
            $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 0,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
            }
        };
        var jssor_slider1 = new $JssorSlider$("slider_container", options);
});
相关文章：