代码之家  ›  专栏  ›  技术社区  ›  Laura Sage

Bootstrap 5双转盘定位

twitter-bootstrap jquery javascript
  •  0
  • Laura Sage  · 技术社区  · 3 年前

    我有一个组合旋转木马,大部分都在工作。基本上,我用这个作为时间滑块。我有14个日期要显示。除了缩略图/指示符,我还使用日期。但由于日期太多,我需要将它们显示在单独的行中,但一次只显示活动行。我希望我的代码能清楚地表明我想要实现的目标。我曾经有一个版本在BS3中工作过,但那个页面似乎已经死了,所以我看不到我做了什么。我只记得我基本上做了这里显示的事情。当您单击下一页缩略图的箭头时,由于某种原因,前一页缩略图会滑到新缩略图的后面。此外,我似乎不知道如何将“显示”添加到第一个旋转木马中当前目标的缩略图中。我知道是错的,可能在数学方面。我把它从什么地方拉了出来——不记得在哪里了。 

    // normalize history carousel height //
var maxHeight = 0;
$("#historyCarousel .carousel-item .date-text").each(function() {
  if ($(this).height() > maxHeight) {
    maxHeight = $(this).height();
  }
});
$("#historyCarousel .carousel-item").height(maxHeight);
//end normalize tab content area height //




// history carousel thumbnail/date control //
            $('#historyCarousel').on('slid.bs.carousel', function (e) {
                var active =$(this).find('.active').index();
                var to = $(e.relatedTarget).index();
                
                $('#thumbcarousel').find('.showing').removeClass('showing');
                $('#thumbcarousel').find('[data-slide-to='+active+']').addClass('showing');
            });
            
            $('#historyCarousel').on('slid.bs.carousel', function (e) {
                var active =$(this).find('.active').index();
                var to = $(e.relatedTarget).index();
                
                if(active == 6 && to == 7) {
                    $('#thumbcarousel').carousel('next');
                }
                if(active == 8 && to == 0) {
                    $('#thumbcarousel').carousel('next');
                }
            });
            // end history carousel thumbnail/date control
    /* History Carousel */

#historyCarousel h2 {
  font-weight: 900;
  font-size: 3rem;
}

#historyCarousel .carousel-item .background {
  height: 500px;
}

#historyCarousel .carousel-item .trans-top {
  background-color: rgba(50, 88, 125, .7);
  background-blend-mode: multiply;
  height: 2rem;
  top: 0;
  left: 0;
}

#historyCarousel .carousel-item .background {
  background-size: cover;
  background-position: center center;
}

#historyCarousel .carousel-item h5 {
  font-weight: 600;
  font-size: 3rem;
}

#thumbCarousel {
  margin: -17px 0 0;
  padding: 0 45px;
}

#thumbCarousel .carousel-item .date {
  width: calc(100% / 8);
  display: inline-block;
}

#thumbCarousel .carousel-item .date .circle-indicator {
  background-color: #fff;
  width: 35px;
  height: 35px;
  border-radius: 100%;
  background-color: #fff;
}

#thumbCarousel .carousel-item .date .circle-indicator .circle-interior {
  width: 100%;
  height: 100%;
  opacity: .7;
  background-size: cover;
  background-position: center center;
  border-radius: 100%;
}

#thumbCarousel .carousel-item .date.active .circle-indicator {
  border-style: solid;
  border-width: 3px;
  border-color: #32587d;
  width: 50px;
  height: 50px;
}

#thumbCarousel .date:hover {
  border-color: rgba(255, 255, 255, .5);
  cursor: hand;
}

#thumbCarousel .carousel-control-prev,
#thumbCarousel .carousel-control-next {
  color: #0284b8;
  text-align: center;
  text-shadow: none;
  font-size: 20px;
  width: 30px;
  height: 30px;
  line-height: 20px;
  top: 30%;
  padding: 1%;
}

#thumbCarousel .carousel-control-prev:hover,
#thumbCarousel .carousel-control-prev:focus,
#thumbCarousel .carousel-control-prev:active,
#thumbCarousel .carousel-control-next:hover,
#thumbCarousel .carousel-control-next:focus,
#thumbCarousel .carousel-control-next:active {
  color: #333;
}

#thumbCarousel .carousel-control-prev .fa,
#thumbCarousel .carousel-control-next .fa {
  font: normal normal normal 30px/26px FontAwesome;
}

#thumbCarousel .carousel-control-prev {
  background-color: rgba(0, 0, 0, 0);
  bottom: auto;
  font-size: 20px;
  left: 0;
  position: absolute;
  top: 30%;
  width: 30px;
}

#thumbCarousel .carousel-control-prev {
  background-color: rgba(0, 0, 0, 0);
  background-image: none;
  z-index: 99999;
}

#thumbCarousel .showing {
  font-weight: bold;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="historyCarousel" class="container-fluid carousel slide m-0 p-0">

  <div class="carousel-inner">

    <div class="carousel-item active orange-bkg">
      <div class="row jusify-content-center">
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?hippy,flowers');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">1979</h5>
            <p class="pb-5 text-white">text here</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?grunge,music');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">1993</h5>
            <p class="pb-5 text-white">more text here</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?friends,eating');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">1995</h5>
            <p class="pb-5 text-white">text here</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?y2k,celebrate');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2001</h5>
            <p class="pb-5 text-white">Some more text here</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?babies,cute');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2005</h5>
            <p class="pb-5 text-white">Text text text</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?rainbow,dogs');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2007</h5>
            <p class="pb-5 text-white">Text-o-rama</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?bicycle,cats');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2008</h5>
            <p class="pb-5 text-white">Text goes here</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?computers,bunnies');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2010</h5>
            <p class="pb-5 text-white">Text TEXT</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?teal,birds');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2011</h5>
            <p class="pb-5 text-white">It's more text</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?portrait,ocean');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2014</h5>
            <p class="pb-5 text-white">ACK MORE TEXT</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?flying,butterfly');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2017</h5>
            <p class="pb-5 text-white">Too many slides</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?trees,snow');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2018</h5>
            <p class="pb-5 text-white">Are we done yet?</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?mountains,river');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2020</h5>
            <p class="pb-5 text-white">Just one more</p>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-item orange-bkg">
      <div class="row jusify-content-center">
        <div class="position-absolute w-100 p-0 m-0 align-self-start trans-top"></div>
        <div class="col-12 col-md-7 background" style="background-image: url('https://source.unsplash.com/1600x900/?paris,love');"></div>
        <div class="col-12 col-md-5 align-self-center">
          <div class="date-text m-5 p-3">
            <h5 class="text-white pt-5 w-100">2021</h5>
            <p class="pb-5 text-white">Aaaaand it's done</p>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
<!-- end HistoryCarousel -->




<!-- Thumbnail Carousel -->
<div id="thumbCarousel" class="carousel slide" data-interval="false">
  <div class="carousel-inner">
    <div class="row carousel-item active d-flex justify-content-center">

      <div data-bs-target="#historyCarousel" data-bs-slide-to="0" class="showing date active px-3 d-inline-block" aria-current="true" aria-label="1979">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?hippy,flowers');"></div>
        </div>
        <div class="circle-date text-center">1979</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="1" class="date px-3 d-inline-block" aria-label="1993">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?grunge,music');"></div>
        </div>
        <div class="circle-date text-center">1993</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="2" class="date px-3 d-inline-block" aria-label="1995">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?friends,eating');"></div>
        </div>
        <div class="circle-date text-center">1995</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="3" class="date px-3 d-inline-block" aria-label="2001">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?y2k,celebrate');"></div>
        </div>
        <div class="circle-date text-center">2001</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="4" class="date px-3 d-inline-block" aria-label="2005">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?babies,cute');"></div>
        </div>
        <div class="circle-date text-center">2005</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="5" class="date px-3 d-inline-block" aria-label="2007">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?rainbow,dogs');"></div>
        </div>
        <div class="circle-date text-center">2007</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="6" class="date px-3 d-inline-block" aria-label="2008">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?bicycle,cats');"></div>
        </div>
        <div class="circle-date text-center">2008</div>
      </div>

    </div>

    <div class="row carousel-item display-content-center">

      <div data-bs-target="#historyCarousel" data-bs-slide-to="7" class="date px-3 d-inline-block" aria-label="2010">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?computers,bunnies');"></div>
        </div>
        <div class="circle-date text-center">2010</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="8" class="date px-3 d-inline-block" aria-label="2011">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?teal,birds');"></div>
        </div>
        <div class="circle-date text-center">2011</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="9" class="date px-3 d-inline-block" aria-label="2014">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?portrait,ocean');"></div>
        </div>
        <div class="circle-date text-center">2014</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="10" class="date px-3 d-inline-block" aria-label="2017">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?flying,butterfly');"></div>
        </div>
        <div class="circle-date text-center">2017</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="11" class="date px-3 d-inline-block" aria-label="2018">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?trees,snow');"></div>
        </div>
        <div class="circle-date text-center">2018</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="12" class="date px-3 d-inline-block" aria-label="2020">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?mountains,river');"></div>
        </div>
        <div class="circle-date text-center">2020</div>
      </div>

      <div data-bs-target="#historyCarousel" data-bs-slide-to="13" class="date px-3 d-inline-block" aria-label="2021">
        <div class="circle-indicator m-auto">
          <div class="circle-interior" style="background-image: url('https://source.unsplash.com/1600x900/?paris,love');"></div>
        </div>
        <div class="circle-date text-center">2021</div>
      </div>

    </div>
  </div>

  <a class="carousel-control-prev" href="#thumbcarousel" role="button" data-bs-target="#thumbCarousel" data-bs-slide="prev">
    <div class="fa-2x">
      <i class="fas fa-angle-left" data-fa-transform="shrink-8" aria-hidden="true"></i>
    </div>
  </a>
  <a class="carousel-control-next" href="#thumbcarousel" role="button" data-bs-target="#thumbCarousel" data-bs-slide="next">
    <div class="fa-2x">
      <i class="fas fa-angle-right" data-fa-transform="shrink-8" aria-hidden="true"></i>
    </div>
  </a>
</div>
<!-- /thumbcarousel -->
    0 回复  |  直到 3 年前
        1
  •  1
  •   Carol Skelly    3 年前

    额外的CSS和jQuery有很多作用。我清理了标记并简化了jQuery事件处理程序。这样可以保持两个转盘同步。 

    $('#thumbCarousel').on('slide.bs.carousel', function (e) {
  // advance main carousel
  var nextSlide = e.to
  $('#myCarousel').carousel(nextSlide*7)
})

$('#myCarousel').on('slid.bs.carousel', function (e) {
  // sync thumb years carousel
  var currSlide = e.to
  if (currSlide===6) {
      $('#thumbCarousel').carousel(1)
  }
  else if (currSlide===0) {
      $('#thumbCarousel').carousel(0)
  }
})

    Working demo

    推荐文章
    xajetin  ·  导航不更改滚动上的颜色
    2 年前
    Noor ul ain Ibrahim  ·  如何在一行中制作两个大小相同的按钮?
    2 年前
    Bryan Santos  ·  固定表头与引导
    2 年前
    Nicolas Berthier  ·  Bootstrap 5基于内容的包装
    2 年前
    tym  ·  根据用户偏好显示字段
    2 年前
    Sheryar Khan  ·  如何仅使用html、css、bootstrap、javascript/jquery创建html页面?
    2 年前
    Pavel  ·  当验证DIV可见时,引导网格会移动
    6 年前
    Sam  ·  在标题中嵌入Bootstrap 3导航栏
    6 年前
    Alexander David  ·  折叠卡打开,然后立即再次关闭
    6 年前
    Sandeep Bhardwaj  ·  div的一致行为,与设备分辨率无关
    6 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号