I have a bootstrap carousel with 5 slides and would like to randomise them but always keep the same slide at the front.
So it could load and be any of these orders for example.
1 3 2 5 4 // 1 2 5 4 3 // 1 5 2 4 3
I could use javascript with math floor but this would apply to them all rather than only slides 2,3,4,5
Is there a method of doing this? It obviously does not need to be native to bootstrap. Each slide is a <div>
element rather than <li>
and I am using the data attributes rather than javascript to initialize the slider, I can change this if required.
Carousel:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs hidden-sm">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner left-bottom-corner right-bottom-corner" role="listbox">
<div class="item active">
<img class="hidden-xs" src="<?php the_field('home_slide_home'); ?>" alt="...">
<img class="visible-xs" src="<?php the_field('home_slide_home_mobile'); ?>" alt="...">
<div class="carousel-caption">
<img style="margin-left:auto;margin-right:auto;" src="<?php the_field('home_slide_icon'); ?>" alt="...">
<?php the_field('slide_home_text'); ?>
</div>
</div>
<div class="item randomslide">
<img class="hidden-xs" src="<?php the_field('home_slide_1'); ?>" alt="...">
<img class="visible-xs" src="<?php the_field('home_slide_1_mobile'); ?>" alt="...">
<div class="carousel-caption">
<img style="margin-left:auto;margin-right:auto;" src="<?php the_field('home_slide_icon'); ?>" alt="...">
<?php the_field('slide_1_text'); ?>
</div></div>
<div class="item randomslide">
<img class="hidden-xs" src="<?php the_field('home_slide_2'); ?>" alt="...">
<img class="visible-xs" src="<?php the_field('home_slide_2_mobile'); ?>" alt="...">
<div class="carousel-caption">
<img style="margin-left:auto;margin-right:auto;" src="<?php the_field('home_slide_icon'); ?>" alt="...">
<?php the_field('slide_2_text'); ?>
</div>
</div>
<div class="item randomslide">
<img class="hidden-xs" src="<?php the_field('home_slide_3'); ?>" alt="...">
<img class="visible-xs" src="<?php the_field('home_slide_3_mobile'); ?>" alt="...">
<div class="carousel-caption">
<img style="margin-left:auto;margin-right:auto;" src="<?php the_field('home_slide_icon'); ?>" alt="...">
<?php the_field('slide_3_text'); ?>
</div>
</div>
<div class="item randomslide">
<img class="hidden-xs" src="<?php the_field('home_slide_4'); ?>" alt="...">
<img class="visible-xs" src="<?php the_field('home_slide_4_mobile'); ?>" alt="...">
<div class="carousel-caption">
<img style="margin-left:auto;margin-right:auto;" src="<?php the_field('home_slide_icon'); ?>" alt="...">
<?php the_field('slide_4_text'); ?>
</div>
</div>
</div>
</div>
SOLUTION
I managed this with a prompt from @CBroe
Below selects all of the sliders apart from the first which has the active class pre-defined then shuffles them.
jQuery(function ($) {
var parent = $(".carousel-inner");
var divs = $(".item").not(".item.active");
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
I managed this with a prompt from @CBroe
Below selects all of the sliders apart from the first which has the active class pre-defined then shuffles them.
jQuery(function ($) {
var parent = $(".carousel-inner");
var divs = $(".item").not(".item.active");
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
You could create a jQuery object with the relevant elements.
var $carouselLi = $('.carousel > ol > li').slice(1);
And an array with the allowed numbers.
var numbers = [1,2,3,4];
Then iterate through $carouselLi
and set one of the numbers from the array
as the elements data-slide-to
attribute (which should determine the position within the slide).
$.each($carouselLi, function ( key, value ) {
var index = Math.floor(Math.random() * numbers.length);
this.dataset.slideTo = numbers[index];
numbers.splice(index,1);
});
I'm not sure how the bootstrap plugin
works. I assume you shouldn't initialize it until the data-slide-to
attribute is assigned.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.