[英]Bootstrap carousel: changing jquery slides to bootstrap caroulsel and binding a slide function
[英]Randomise Bootstrap Carousel Slides except 1st slide
我有一個帶有5張幻燈片的自舉輪播,想隨機分配它們,但始終將相同的幻燈片放在前面。
因此它可以加載,例如可以是任何這些命令。
1 3 2 5 4 // 1 2 5 4 3 // 1 5 2 4 3
我可以在數學地板上使用javascript,但這將適用於所有對象,而不僅僅是幻燈片2、3、4、5
有沒有這樣做的方法? 顯然,它不需要是本地引導程序。 每張幻燈片都是一個<div>
元素,而不是<li>
並且我使用數據屬性而不是JavaScript來初始化滑塊,如果需要,我可以更改它。
旋轉木馬:
<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>
解
我在@CBroe的提示下對此進行了管理
在下方,除了第一個具有預定義活動類的滑塊以外,選擇所有其他滑塊,然后對其進行隨機排列。
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]);
}
});
我在@CBroe的提示下對此進行了管理
在下方,除了第一個具有預定義活動類的滑塊以外,選擇所有其他滑塊,然后對其進行隨機排列。
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]);
}
});
您可以使用相關元素創建一個jQuery對象。
var $carouselLi = $('.carousel > ol > li').slice(1);
以及帶有允許數字的數組。
var numbers = [1,2,3,4];
然后遍歷$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);
});
我不確定bootstrap plugin
如何工作。 我假設您不應該在分配data-slide-to
屬性之前對其進行初始化。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.