响应式产品滑块Bootstrap 3

时间：2015-05-21 21:39:19

标签： javascript jquery css twitter-bootstrap

我正在尝试使滑块响应，这比我想象的要复杂一些。我需要帮助，使其响应和一些JavaScript。

我为你设置了一个bootply，并对其进行了多次编辑。我想我打破了真的很臭的柜台，但它适用于我的本地文件，这对我来说很奇怪。

以下是我需要按照桌面，平板电脑和手机的顺序进行尝试和匹配的状态。

Desktop View

这将一次滑动4个

Tablet View

这将一次滑动3，显示第4张幻灯片的一部分将成为第1张

Mobile View

这将一次滑动1，显示下一张幻灯片的一部分。

每个状态包装器使用最大列col-xs-12

这是我到目前为止的代码和我的bootply：demo 

$(document).ready(function() {
    $('#myCarousel').carousel({
    interval: 0
    })

    $('#myCarousel').on('slid.bs.carousel', function() {
        //alert("slid");
    });

        $('#myCarouselfeed').on('slid', function() {
            var to_slide = $('.carousel-item.active').attr('data-slide-no');
            $('.myCarousel-target.active').removeClass('active');
            $('.carousel-indicators [data-slide-to=' + to_slide + ']').addClass('active');
        });
        $('.myCarousel-target').on('click', function() {
            $('#myCarouselfeed').carousel(parseInt($(this).attr('data-slide-to')));
            $('.myCarousel-target.active').removeClass('active');
            $(this).addClass('active');
        });


// Listen to the 'slide carousel' event
// to trigger our code after each slide change
$('.Leadership').on('slid.bs.carousel', function () {

  // This variable contains all kinds of data and methods related to the carousel
  var carouselData = $(this).data('bs.carousel');
  // EDIT: Doesn't work in Boostrap >= 3.2
  //var currentIndex = carouselData.getActiveIndex();
  var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
  var total = carouselData.$items.length;

  // Create the text we want to display.
  // We increment the index because humans don't count like machines
  var strong = '<strong>';
  var strongClose = '</strong>';
  var text = strong + 'Showing ' + (currentIndex + 1) + strongClose + ' out of ' + total;

  // You have to create a HTML element <div id="carousel-index"></div>
  // under your carousel to make this work
  $('#carousel-index').html(text);
});

});


.leadershipSlider{
    margin-top:50px;
    }
.leadershipCol {
    float: left;
    }
.leadershipName{
    color:#fff; 
    height:auto; 
    width:62%; 
    background-color:Orange; 
    padding:10px; 
    margin:-85px 0 0 38%; 
    border:1px solid #fff; 
    display:block; 
    float:left;
    }
.leadershipName .glyphicon.glyphicon-menu-right.pull-right{
    color:#fff; 
    margin:-8px 0;
    }
.leadershipImg{
    display:block; 
    float:left
    }
#carousel-index{
    margin:5px 0 0;
    }
.thumbnail {
    display: block; 
    padding: 4px; 
    margin-bottom: 0px; 
    line-height: 1.42857143; 
    -webkit-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
    border-radius: 0; border: none; 
    background-color: transparent;
    }
.carousel-control {
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 15%; 
    opacity: 1; 
    font-size: 20px; 
    color: #fff; 
    text-align: center; 
    text-shadow: none;
    }
.carousel-control.left {
    background-image: none; 
    position:relative; 
    display:table; 
    height:45px;
    width:45px;
    }
.carousel-control.right {
    left: auto; 
    position:relative; 
    right: 0; 
    background-image: none; 
    display:table;
    height:45px;
    width:45px;
    }
.carousel-control {
    padding-top:0;
    }
.well{
    background-color: transparent; 
    padding: 0px; 
    border: 0px solid #fff; 
    box-shadow:none; 
    border-radius: 0px; 
    margin-bottom: 0px;
    }
.btn-darkBlue{
    border-color:#fff; 
    background-color:blue; 
    height:45px;
    width:45px;
    }
.btn-darkBlue:hover, .btn-darkBlue:active, .btn-darkBlue:focus{
    border-color:#fff; 
    background-color:blue;
    }
.carouselNext, .carouselPrev {
    color:#fff;
    }


<!-- HTML -->

<!-- BEGIN LEADERSHIP SLIDER -->

<div class="container leadershipSlider">
    <div class="row">
        <div class="col-sm-1 col-sm-offset-0">
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><button type="go" title="Previous" class="btn btn-default btn-darkBlue"><i class="glyphicon glyphicon-menu-left carouselPrev"></i></button></a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next"><button type="go" title="Next" class="btn btn-default btn-darkBlue"><i class="glyphicon glyphicon-menu-right carouselNext"></i></button></a>
        </div>
    <div class="col-sm-11">
        <div class="well">
            <div id="myCarousel" class="carousel slide Leadership" data-ride="carousel">
                <!-- Carousel items -->
                <div class="carousel-inner">
                    <div class="item active">
                            <div class="col-sm-3 leadershipCol"><a class="thumbnail leadershipImg" href="#x"><img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                            </div>
                    </div>
                    <div class="item">
                            <div class="col-sm-3 leadershipCol"><a class="thumbnail leadershipImg" href="#x"><img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                            </div>
                    </div>
                    <div class="item">
                            <div class="col-sm-3 leadershipCol"><a class="thumbnail leadershipImg" href="#x"><img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                            </div>
                    </div>
                    <div class="item">
                            <div class="col-sm-3 leadershipCol"><a class="thumbnail leadershipImg" href="#x"><img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                            </div>
                    </div>

                    <!--/items-->
                    <div class="item">
                            <div class="col-sm-3 leadershipCol"><a class="thumbnail leadershipImg" href="#x"><img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                            </div>
                    </div>
                    <div class="item">
                            <div class="col-sm-3 leadershipCol"><a class="thumbnail leadershipImg" href="#x"><img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                            </div>
                    </div>
                    <div class="item">
                            <div class="col-sm-3 leadershipCol"><a class="thumbnail leadershipImg" href="#x"><img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                            </div>
                    </div>
                    <div class="item">
                            <div class="col-sm-3 leadershipCol"><a class="thumbnail leadershipImg" href="#x"><img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                            </div>
                    </div>
                    <!--/item-->
                    <div class="item">
                            <div class="col-sm-3 leadershipCol"><a class="thumbnail leadershipImg" href="#x"><img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                            </div>
                    </div>
                    <div class="item">
                            <div class="col-sm-3 leadershipCol"><a class="thumbnail leadershipImg" href="#x"><img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                            </div>
                    </div>
                    <div class="item">
                            <div class="col-sm-3 leadershipCol"><a class="thumbnail leadershipImg" href="#x"><img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                            </div>
                    </div>
                    <div class="item">
                            <div class="col-sm-3 leadershipCol"><a class="thumbnail leadershipImg" href="#x"><img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"></a> <div class="leadershipName"><strong>Harold</strong><br />Rogers <a href="#"><span class="glyphicon glyphicon-menu-right pull-right"></span></a></div>
                            </div>
                    </div>
                    <!--/item-->
                </div>

                <!--/carousel-inner--> 
            </div>

            <!--/myCarousel-->
        </div>
        <div id="carousel-index" style="text-align: left;"><strong>Showing 1</strong> out of 3</div>
        <!--/well-->
    </div>
</div>
</div>
<!-- BEGIN FEED -->

<!-- END HTML -->

0 个答案:

没有答案
相关问题
最新问题