1

我有一个正在构建的线框。

在此处输入图像描述

我一直在寻找实现这种滑块格式的方法，但我的搜索仅限于看起来与我正在构建的不同的轮播滑块。

我遇到的一些链接看起来很有用： 显然我需要 10 个声望来共享超过 2 个链接，所以我从链接中删除了前缀......

-css3.bradshawenterprises.com/sliding/

-jqueryrain.com/2014/12/bee3d-slider-touch-enabled-pure-js-plugin/

-cssslider.com/carousel-slider-17.html

-jqueryrain.com/demo/3d-slider-carousel/

-codepen.io/Rowno/pen/Afykb

-desandro.github.io/3dtransforms/docs/card-flip.html

要注意：

该站点主要使用 Bootstrap 构建，但 Bootstrap 似乎没有实现这种滑块格式的方法。

我已经尝试过其中的一些方法，例如jquery 的.carousel() 和 .carouselSlider() 但即使加载了 jQuery，我也收到错误消息说这些不是函数并且无法呈现与旋转木马。

到现在为止，我回到了第一方，发现自己使用自定义 position:absolute、top:、left: 和 z-index: CSS 值从头开始构建它，这似乎非常低效，因为我必须解决动画方面的问题幻灯片，此自定义 CSS 目前不支持。

此外，目前这可能不太重要，虽然我只是想找到最好和最有效的方法来构建它，但这些幻灯片应该是按顺序进行的，以便逐步形成过程。（即：用户在完成当前表单/幻灯片之前不能转到下一张幻灯片）。

几个问题：

-描述我的设计的最合适/相关的搜索词是什么？

  • “轮播滑块”是正确的术语还是我应该寻找动画/过渡？

我当前的代码：

.tab{
	height:1em;
	width:5%;
	background-color: rgba(16, 185, 228, 0.8);
}

.rectangle {
	position: absolute;
	left:25%;
	top:40%;
	/*width: 641px;*/
	width: 50%;
	/*height: 250px;*/
	height: 18em;
	border-radius: 4px;
	margin-top: 1em;
	background-color: #f3f0f0;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}

.rectangle-copy {
	position: absolute;
	left:-22%;
	top:-95%;
	width: 144%;
	height: 18em;
	z-index: -2;
	margin: 0 auto;
	border-radius: 4px;
	background-color: rgba(243, 239, 239, 0.6);
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
.rectangle-copy2 {
	position: absolute;
	left:-19%;
	top:-108%;
	width: 138%;
	height: 18em;
	z-index: -4;
	margin: 0 auto;
	border-radius: 4px;
	background-color: rgba(243, 239, 239, 0.6);
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
.rectangle-copy3 {
	position: absolute;
	left:-16%;
	top:-119%;
	width: 132%;
	height: 18em;
	z-index: -6;
	margin: 0 auto;
	border-radius: 4px;
	background-color: rgba(243, 239, 239, 0.6);
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}

.rectangle-copy4 {
	position: absolute;
	left:-16%;
	top:-119%;
	width: 128%;
	height: 18em;
	z-index: -6;
	margin: 0 auto;
	border-radius: 4px;
	background-color: rgba(243, 239, 239, 0.6);
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}



   fieldset {
      border: 0;
    }
    label {
      display: block;
      margin: 30px 0 0 0;
    }
    .overflow {
      height: 200px;
    }
  <!-- for the blue tabs/dots -->
  <!-- <div id="tab-container">
    <div id="tab1" class="tab"></div>
    <div id="tab2" class="tab"></div>
    <div id="tab3" class="tab"></div>
    <div id="tab4" class="tab"></div>
    <div id="tab5" class="tab"></div>
    <div id="tab6" class="tab"></div>
    <div id="tab7" class="tab"></div>
    <div id="tab8" class="tab"></div>
  </div> -->

  <div class="rectangle">

    <div class="form-group col-xs-8 col-xs-offset-2" style="margin-top:5em;">
      <center><label>Select your job</label></center>

      <select class="form-control">
        <option>&nbsp;</option>
        <option class="form-control">option 1</option>
        <option>option 2</option>
        <option>option 3</option>
        <option>option 4</option>
        <option>option 5</option>
      </select>
      <div id="rect2" class="rectangle-copy"></div>
      <div id="rect3" class="rectangle-copy2"></div>
      <div id="rect4" class="rectangle-copy3"></div>
      <div id="rect4" class="rectangle-copy4"></div>
      <div id="rect4" class="rectangle-copy5"></div>
    </div>

 </div>

结论：

- 所以，是的，我现在的代码显然效率低下，在尝试集成自定义 JS/JQuery 代码以使实际滑块动画/功能正常工作时，这将是一个主要问题。有几种方法可以做到这一点，但在我投入大量时间到我最终发现客观上缺乏选择的一套方法之前，四处询问似乎是最好的举措。

4

0 回答 0