Bootstrap3 全屏图片轮播

Bootstrap Full-screen Carousel with Random Initial Image

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4053
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var $item = $('.carousel .item');
var $wHeight = $(window).height();

$item.height($wHeight);
$item.addClass('full-screen');

var $numberofSlides = $('.item').length;
var $currentSlide = Math.floor((Math.random() * $numberofSlides));

$('.carousel-indicators li').each(function() {
    var $slideValue = $(this).attr('data-slide-to');
    if ($currentSlide == $slideValue) {
        $(this).addClass('active');
        $item.eq($slideValue).addClass('active');
    } else {
        $(this).removeClass('active');
        $item.eq($slideValue).removeClass('active');
    }
});

$('.carousel img').each(function() {
    var $src = $(this).attr('src');
    var $color = $(this).attr('data-color');
    $(this).parent().css({
        'background-image': 'url(' + $src + ')',
        'background-color': $color
    });
    $(this).remove();
});

$(window).on('resize', function() {
    $wHeight = $(window).height();
    $item.height($wHeight);
});

$('.carousel').carousel({
    interval: 6000,
    pause: "false"
});

编译

CSS

HTML

<div class="carousel-inner" role="listbox">
        <div class="item">
            <img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image">
            <div class="carousel-caption">
                <h3>First Image</h3>
            </div>
        </div>
        <div class="item">
            <img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image">
            <div class="carousel-caption">
                <h3>Second Image</h3>
            </div>
        </div>
        <div class="item">
            <img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image">
            <div class="carousel-caption">
                <h3>Third Image</h3>
            </div>
        </div>
        <div class="item">
            <img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image">
            <div class="carousel-caption">
                <h3>Fourth Image</h3>
            </div>
        </div>
        <div class="item">
            <img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image">
            <div class="carousel-caption">
                <h3>Fifth Image</h3>
            </div>
        </div>
    </div>

<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

Bootstrap Full-screen Carousel with Random Initial Image

编辑器支持Emmet

快捷键

Bootstrap Full-screen Carousel with Random Initial Image

three.js + openlayers gis 3d example

babylon.js + react.js很棒的3d图表代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：