[英]Randomise Bootstrap Carousel Slides except 1st slide
I have a bootstrap carousel with 5 slides and would like to randomise them but always keep the same slide at the front. 我有一个带有5张幻灯片的自举轮播,想随机分配它们,但始终将相同的幻灯片放在前面。
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 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 我可以在数学地板上使用javascript,但这将适用于所有对象,而不仅仅是幻灯片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. 每张幻灯片都是一个
<div>
元素,而不是<li>
并且我使用数据属性而不是JavaScript来初始化滑块,如果需要,我可以更改它。
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 我在@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 我在@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. 您可以使用相关元素创建一个jQuery对象。
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). 然后遍历
$carouselLi
并将array
中的数字之一设置为元素data-slide-to
属性(应确定幻灯片中的位置)。
$.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. 我不确定
bootstrap plugin
如何工作。 I assume you shouldn't initialize it until the data-slide-to
attribute is assigned. 我假设您不应该在分配
data-slide-to
属性之前对其进行初始化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.