Bootstrap Carousel - рандомизировать

Question

У меня есть идея, но я не знаю, как ее реализовать. Я работаю над веб-страницей, в процессе разработки, с загрузочной каруселью. То, что я хотел бы, чтобы на странице загружалось 3 элемента, рандомизированных из пула с количеством n. Таким образом, каждый раз, когда страница загружается, появляется новый контент.

У кого-нибудь есть идеи, как этого добиться? Я в порядке с использованием чего-то другого, чем карусель.

Спасибо!

Answer 1

Если у вас есть pool, в котором ваши элементы карусели являются объектами, это выберет 3 случайных элемента из переменной pool.

let pool = [{id: 1}, {id: 2}, {id: 3}, {id: 4},{id: 5},{id: 6}];
// Number of randoms you want to pick from the pool
let noOfRandoms = 3;

/**
 * Returns a random number between 0 and max (Excluding max)
 */
function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

function getRandoms() {
  let availableElements = pool;

  let selectedElements = [];
  while (noOfRandoms--) {
    // Get a random integer from 0 to (availableElements.length)
    let selectedIndex = getRandomInt(availableElements.length);
    // Add element at the selectedIndex from availableElements to selectedElements
    selectedElements.push(availableElements[selectedIndex]);
    // Remove the element at selectedIndex from availableElements array
    availableElements.splice(selectedIndex, 1);
  }

  return selectedElements;
}

console.log(getRandoms());

Answer 2

Здесь вы получите длину ваших предметов, используя jQuery:

let items = $('.item').length;

затем вы создаете функцию для получения случайного числа в зависимости от длины ваших предметов, используя эту функцию:

function getRandomInt(items) {
  return Math.floor(Math.random() * Math.floor(max));
}

затем вы добавляете его в функцию Карусели Bootstrap:

$('#idOfYourCarousel').carousel(Number(getRandomInt(items)));

и затем вы связываете его с вашим событием клика, например:

$('next').click(function(){
   let items = $('.item').length;
   $('#idOfYourCarousel').carousel(Number(getRandomInt(items)));
});

Или автоматически:

$('#myCarousel').on('slide.bs.carousel', function () {
   let items = $('.item').length;
       $('#idOfYourCarousel').carousel(Number(getRandomInt(items)));
})