Когда слайдов много, то пользователи постоянно видят одни и те же слайды, что загружены первыми. Потому хотелось бы их переставлять в случайном порядке при каждой загрузке слайдера (я пользуюсь плагином swiper.js).
Т.к. слайдер не даёт такой опции, придется перемешивать слайды самим.
Выполняется это следующим образом: находим слайдер и его слайды, перемешиваем, инициализируем слайдер.
|
1 2 3 4 5 6 7 |
(function ($) { $('.swiper-container').once().each(function (index, elm) { var slides = $(elm).find('.swiper-slide'); slides.shuffle(); new Swiper($(elm), options); } })(jQuery); |
Вот только незадача, метода shuffle() у нас пока нет. Но мы его быстро находим в сети. Как раз то что нужно в виде небольшого jQuery плагина.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
(function($){ $.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); }; })(jQuery); |
Можно, конечно, перемешивать слайды на сервере (при генерации HTML кода), но это скорее всего будет мешать кешированию страницы.