Как выводить массив слайдов в случайном порядке без повторения?

Question

[silencer-spirit]

Есть небольшой вопрос о том, как реализовать массив слайдов и выводить их в случайном порядке без повторений на JavaScript или jQuery. Допустим, есть элементы (слайды) и они выводятся по 4 штуки. Как сделать, чтобы при каждом обновлении или переходе на страницу они менялись в случайном порядке?

Код одного слайда:

<div class="item">
                    <div class="element relative">
                        <a href="#" class="absolute"></a>
                        <div class="img-wrapper relative">
                            <div class="element-img" style="background: url(path/to/img.jpg) 50% 0 no-repeat; background-size: cover;"></div>
                        </div>
                        <div class="element-content">
                            <div class="title">
                                <div class="table">
                                    <div class="table-cell">
                                        Название
                                    </div>
                                </div>
                            </div>
                            <div class="price-outer">
                                <div class="price-wrapper">
                                    <span class="price">Цена</span> руб.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

[Егор Живагин]

Первое, что лезет на ум - делай контейнер-флексбокс и играйся свойством order через JS

Comments

[silencer-spirit]

А если у меня будет 1000 товаров на сайте?) Для каждого order надо будет писать... А так при объявлении массива просто в него запишу новую карточку.

[Егор Живагин]

silencer-spirit: а order можно писать тем же JS-ом
И как ты их все перемешивать будешь?) Нет, можно, конечно, если у тебя все слайды в массиве, менять индексы аналогично order-ам. А можно шаблонизатором доставать случайный элемент, шаблонизатор используется

Answer 2

[Neyury]

Сохраняй id/индекс/названия слайдов, которые были показаны, в список (сохранить список можно например в localstorage), и при показе новых слайдов, проверяй чтобы их id/индекс/название отсутствовали в этом списке.

Comments

[Neyury]

А какие слайды показывать - Math.round(Math.random() * arr.length)

[silencer-spirit]

Neyury: А можно пример кода из 2 слайдов? Буду очень признателен.