文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap证明转盘

问Bootstrap证明转盘
EN

Stack Overflow用户

提问于 2016-12-13 18:03:00

回答 2查看 963关注 0票数 0

请查看下一个链接：http://bootsnipp.com/snippets/ORaWE

我想要做的(不知道如何实现)就是让活跃的头像始终居中。例如，如果第三个头像是活动的，第三个头像将在中心(位置2)，第一个头像将在位置3，第二个头像将在位置1。

这是一个小的图形演示：

(将其想象为3个头像。绿色的当前处于活动状态)

谁能帮助我，或者至少给我一个想法或方向？:)

javascript

css

twitter-bootstrap

回答 2

Stack Overflow用户

发布于 2016-12-15 03:57:28

要在引导转盘中实现此行为，您需要使用转盘的javascript功能，而不是内联data-*属性。

以下是您需要的工作示例：

$(document).ready(function() {
  var flag = false;
  $("#quote-carousel").on('slide.bs.carousel', function() {
    if (!flag) {
      var arr = $('ol.carousel-indicators > li');
      $($('ol.carousel-indicators')).append($('ol.carousel-indicators > li')[0]);
      $('.carousel-inner').append($('.carousel-inner > .item')[0]);
    } else {
      flag = false;
    }
  });

  $('#quote-carousel').carousel();

  $('.item-btn').click(function(obj) {
    flag = true;
    var arr = $('.item-btn');
    var index = arr.index(obj.currentTarget);
    var len = arr.length;
    var mid = Math.floor(len / 2);
    $('#quote-carousel').carousel(index);
    if (index < mid) {
      for (i = 0; i < (mid - index); i++) {
        $($('ol.carousel-indicators')).prepend($('.item-btn')[len - 1]);
        $('.carousel-inner').prepend($('.item')[len - 1]);
      }
    } else if (index > mid) {
      for (i = 0; i < (index - mid); i++) {
        $($('ol.carousel-indicators')).append($('.item-btn')[0]);
        $('.carousel-inner').append($('.item')[0]);
      }
    }
  });

  $(".left").click(function() {
    flag = true;
    var arr = $('ol.carousel-indicators > li');
    $($('ol.carousel-indicators')).prepend(arr[arr.length - 1]);
    arr = $('.carousel-inner > .item');
    $('.carousel-inner').prepend(arr[arr.length - 1]);
    $("#quote-carousel").carousel("prev");
  });
  $(".right").click(function() {
    flag = true;
    var arr = $('ol.carousel-indicators > li');
    $($('ol.carousel-indicators')).append(arr[0]);
    arr = $('.carousel-inner > .item');
    $('.carousel-inner').append(arr[0]);
    $("#quote-carousel").carousel("next");
  });
});

/* Carousel */

#quote-carousel {
  padding: 0 10px 30px 10px;
  margin-top: 30px;
  /* Control buttons  */
  /* Previous button  */
  /* Next button  */
  /* Changes the position of the indicators */
  /* Changes the color of the indicators */
}

#quote-carousel .carousel-control {
  background: none;
  color: #CACACA;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}

#quote-carousel .carousel-control.left {
  left: -60px;
}

#quote-carousel .carousel-control.right {
  right: -60px;
}

#quote-carousel .carousel-indicators {
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}

#quote-carousel .carousel-indicators li {
  width: 50px;
  height: 50px;
  margin: 5px;
  cursor: pointer;
  border: 4px solid #CCC;
  border-radius: 50px;
  opacity: 0.4;
  overflow: hidden;
  transition: all 0.4s;
  margin-bottom: 45px;
}

#quote-carousel .carousel-indicators .active {
  background: #333333;
  width: 128px;
  height: 128px;
  border-radius: 100px;
  border-color: #f33;
  opacity: 1;
  overflow: hidden;
  margin-bottom: 5px;
}

.carousel-inner {
  min-height: 300px;
  margin-bottom: 50px;
}

.item blockquote {
  border-left: none;
  margin: 0;
}

.item blockquote p:before {
  content: "\f10d";
  font-family: 'Fontawesome';
  float: left;
  margin-right: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-12" data-wow-delay="0.2s">
      <div class="carousel slide" id="quote-carousel">
        <!-- Bottom Carousel Indicators -->
        <ol class="carousel-indicators">
          <li class="item-btn"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
          </li>
          <li class="item-btn active"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/rssems/128.jpg" alt="">
          </li>
          <li class="item-btn"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg" alt="">
          </li>
        </ol>

        <!-- Carousel Slides / Quotes -->
        <div class="carousel-inner text-center">

          <!-- Quote 1 -->
          <div class="item">
            <blockquote>
              <div class="row">
                <div class="col-sm-8 col-sm-offset-2">

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
                  <small>Someone famous</small>
                </div>
              </div>
            </blockquote>
          </div>
          <!-- Quote 2 -->
          <div class="item active">
            <blockquote>
              <div class="row">
                <div class="col-sm-8 col-sm-offset-2">

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
                  <small>Someone famous</small>
                </div>
              </div>
            </blockquote>
          </div>
          <!-- Quote 3 -->
          <div class="item">
            <blockquote>
              <div class="row">
                <div class="col-sm-8 col-sm-offset-2">

                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</p>
                  <small>Someone famous</small>
                </div>
              </div>
            </blockquote>
          </div>
        </div>

        <!-- Carousel Buttons Next/Prev -->
        <a href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
        <a href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
      </div>
    </div>
  </div>
</div>

working fiddle here

票数 2

Stack Overflow用户

发布于 2016-12-13 19:20:47

function showAvatar(){
var no_of_avatars=3;

var data=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

var start_index=10;

var msg='Start : ';

start_index=start_index-Math.floor(no_of_avatars/2)+data.length;

for(i=0;i<no_of_avatars;i++)
{
	$('#content-id').append('start_index+i : '+(start_index+i)+'<br>');
	msg+=','+data[((start_index+i)%data.length)];
}
  
$('#content-id').append(msg);
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button onclick="showAvatar()">click to execute</button>
<div id="content-id">
</div>

这可能会对你有帮助。这只是一个登录，你可以用它在中心有数据，但如果你的头像计数不是奇数，那么它不会产生完美的结果，尽管只需要很小的变化。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41118279

复制

相似问题

问Bootstrap证明转盘
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap证明转盘EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap证明转盘
EN