Bootstrap开发实战之响应式轮播图

Bootstrap开发实战之响应式轮播图

本文主要内容是在导航条的下方做一张轮播图，自动播放最新的重要动态，供大家参考，具体内容如下

一、响应式轮播图

//响应式轮播图

class="active">

‹

›

//所需要的 jquery 控制

$('#myCarousel').carousel({

//设置自动播放/2 秒

interval : 3000,

});

//调整轮播器箭头位置

$('.carousel-control').css('line-height', $('.carousel-innerimg').height() + 'px');

$(window).resize(function() {

var $height = $('.carousel-inner img').eq(0).height() || $('.carousel-inner img').eq(1).height() || $('.carousel-inner img').eq(2).height();

$('.carousel-control').css('line-height', $height + 'px');

});

//所需要的 CSS

a:focus {

outline: none;

}

.navbar-brand {

padding: 0;

}

#myCarousel {

margin: 50px 0 0 0;

}

.carousel-inner .item img {

margin: 0 auto;

}

.carousel-control {

font-size: 100px;

}

如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

精彩专题分享：jQuery图片轮播 javascript图片轮播 Bootstrap图片轮播

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。