Javascript 响应产品滑块引导3

我正在尝试制作一个比我想象的更复杂的滑块。我需要帮助使其具有响应性和一些javascript

我为您设置了一个引导层，并对其进行了多次编辑。我想我弄坏了柜台，这真的很臭，但它能处理我本地的文件，这对我来说很奇怪

以下是我需要尝试匹配的状态，以便从台式机、平板电脑和移动设备进行匹配

这将一次滑动4次

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

这将一次放映一张幻灯片，显示下一张幻灯片的一部分

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

以下是我到目前为止的代码和我的bootply：

$（文档）.ready（函数（）{
$（'myCarousel'）。carousel({
间隔：0
})
$（'#myCarousel'）.on（'slided.bs.carousel'，function（）{
//警惕（“滑动”）；
});
$（'#myCarouselfeed'）。on（'slided'，function（）{
var to_slide=$（'.carousel item.active'）.attr（'data-slide-no'）；
$（'.myCarousel target.active'）.removeClass（'active'）；
$（'.carousel指示器[数据幻灯片到='+到_幻灯片到+']'））.addClass（'active'）；
});
$（'.myCarousel target'）。在（'click'，function（）上{
$（'#myCarouselfeed'）.carousel（parseInt（$（this.attr（'data-slide-to'））；
$（'.myCarousel target.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
//收听“幻灯片传送带”活动
//在每次幻灯片更改后触发我们的代码
$（'.Leadership'）.on（'slided.bs.carousel'，函数（）{
//此变量包含与转盘相关的所有类型的数据和方法
var carouselData=$（this.data（'bs.carousel'）；
//编辑：在Boostrap>=3.2中不起作用
//var currentIndex=carouselData.getActiveIndex（）；
var currentIndex=carouselData.getItemIndex（carouselData.element.find（'.item.active'））；
var total=旋转木马数据$items.length；
//创建要显示的文本。
//我们增加索引是因为人类不像机器那样计数
var strong=''；
var strongClose=''；
var text=strong+'显示'+（currentIndex+1）+strong关闭'+total中的'+'部分；
//您必须创建一个HTML元素
//在你的旋转木马下工作
$（#旋转木马索引'）.html（文本）；
});
});
.领导者{
边缘顶部：50px；
}
.领导层{
浮动：左；
}
.领导层名称{
颜色：#fff；
高度：自动；
宽度：62%；
背景颜色：橙色；
填充：10px；
利润率：-85px038%；
边框：1px实心#fff；
显示：块；
浮动：左；
}
.leadershipName.glyphicon.glyphicon-menu-right.pull-right{
颜色：#fff；
裕度：-8px 0；
}
.领导层{
显示：块；
浮动：左
}
#转盘索引{
保证金：5px0；
}
.缩略图{
显示：块；
填充：4px；
边缘底部：0px；
线高：1.42857143；
-webkit转换：所有.2易入易出；
转换：所有.2易入易出；
边框半径：0；边框：无；
背景色：透明；
}
.传送带控制{
排名：0；
左：0；
底部：0；
宽度：15%；
不透明度：1；
字体大小：20px；
颜色：#fff；
文本对齐：居中；
文本阴影：无；
}
.carousel-control.左{
背景图像：无；
位置：相对位置；
显示：表格；
高度：45px；
宽度：45px；
}
.转盘控制，对{
左：自动；
位置：相对位置；
右：0；
背景图像：无；
显示：表格；
高度：45px；
宽度：45px；
}
.传送带控制{
填充顶部：0；
}
.嗯{
背景色：透明；
填充：0px；
边框：0px实心#fff；
盒影：无；
边界半径：0px；
边缘底部：0px；
}
.btn深蓝色{
边框颜色：#fff；
背景颜色：蓝色；
高度：45px；
宽度：45px；
}
.btn深蓝色：悬停，.btn深蓝色：活动，.btn深蓝色：焦点{
边框颜色：#fff；
背景颜色：蓝色；
}
.carouselNext、.carouselPrev{
颜色：#fff；
}
哈罗德
罗杰斯
哈罗德
罗杰斯
哈罗德
罗杰斯
哈罗德
罗杰斯
哈罗德
罗杰斯
哈罗德
罗杰斯
哈罗德
罗杰斯
哈罗德
罗杰斯
哈罗德
罗杰斯
哈罗德
罗杰斯
哈罗德
罗杰斯
哈罗德
罗杰斯
$(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 -->