Question

我正在尝试通过在其中合并几个滑块来创建网站：在自举滑块中包含七个CSS滑块。一切正常，但是我有一个问题：

我希望CSS滑块始终位于我的右页= Bootstrap滑块中（这是负担）。
但是我想将Bootstrap滑块（在我的情况下，这是带有草莓的白色条）的按钮固定在我的左侧容器上。我希望他们以任何决议坚持在两个集团之间，女巫工作正常。

我曾经将CSS滑块居中，但它使用来移动按钮，我不希望那样。知道我在搞什么。感谢您的帮助。

这是我的代码（我已尽力清除了它）：

/* ----------------------------------------------------------
    -------------------------------------------------------------
    MAIN
    -------------------------------------------------------------
    ------------------------------------------------------------- */

.container-fluid {
  padding: 0;
}

.row {
  margin: 0;
  height: 100vh;
  position: relative;
}


/* ----------------------------------------------------------
    -------------------------------------------------------------
    SPLIT LEFT
    -------------------------------------------------------------
    ------------------------------------------------------------- */

#wrapper {
  height: 100vh;
}


/* ----------------------------------------------------------
    -------------------------------------------------------------
    KITS & DESCRIPTIONS
    -------------------------------------------------------------
    ------------------------------------------------------------- */

.carousel-inner aside {
  text-align: center;
  margin-top: 16px;
  font-size: 20px;
  font-weight: bold;
  line-height: 28px;
  color: #D87489;
  letter-spacing: 1px;
}

.carousel-inner .link-more {
  text-align: center;
  margin-top: 12px;
  font-size: 16px;
  opacity: .5;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.carousel-inner .link-more a {
  color: #000;
}

.carousel-inner .link-more:hover {
  opacity: .9;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.carousel-inner .link-more i {
  font-size: 19px;
  opacity: .8;
  transform: rotate(-45deg);
  font-weight: bold;
  padding-right: 5px;
}


/* ---------------------------------------------------
    SLIDER BT 
    ---------------------------------------------------- */

.carousel-indicators li img {
  position: relative;
  transition: all ease .2s;
  display: block;
}

.carousel-indicators li img:hover {
  opacity: .9;
  transition: all ease .2s;
}

.bouton-dv-fraise,
.bouton-dv-fraise i,
a.fraise-link {
  color: #E7918B !important;
}

.carousel-indicators li::after,
.carousel-indicators li::before {
  display: none;
}


/*
    .carousel {
        width: 400px;
        height: 400px;
        margin: auto !important;
    }
    */

.carousel ul {
  width: calc(178px - 65px);
  height: 698px;
  padding: 26px 33px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FFF;
  margin-top: 50vh;
  margin-left: -57px;
  transform: translateY(-50%);
  list-style-type: none;
}

.carousel-item {
  width: 280px!important;
}

.carousel-indicators {
  display: block;
  position: relative;
}

.carousel-indicators li {
  height: auto;
  width: 100%;
}

.carousel-indicators img {
  height: 50px;
  margin: 26px 0px 40px -5px;
}

.carousel-control-prev-icon,
.carousel-control-next {
  display: none;
}


/* ----------------------------------------------------------
    -------------------------------------------------------------
    SLIDER CSS INNER
    -------------------------------------------------------------
    ------------------------------------------------------------- */

.slider {
  height: 500px;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.slider__nav {
  width: 10px;
  height: 10px;
  margin: 36px 12px;
  border-radius: 50%;
  z-index: 10;
  outline: 6px solid #D87489;
  opacity: .47;
  outline-offset: -6px;
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slider__nav:checked {
  -webkit-animation: check 0.4s linear forwards;
  animation: check 0.4s linear forwards;
  opacity: 1 !important;
}

.slider__nav:checked:nth-of-type(1)~.slider__inner {
  left: 0%;
}

.slider__nav:checked:nth-of-type(2)~.slider__inner {
  left: -100%;
}

.slider__nav:checked:nth-of-type(3)~.slider__inner {
  left: -200%;
}

.slider__nav:checked:nth-of-type(4)~.slider__inner {
  left: -300%;
}

.slider__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  -webkit-transition: left 0.4s;
  transition: left 0.4s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}

.slider__contents {
  height: 100%;
  padding: 2rem;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.slider__image {
  font-size: 2.7rem;
  color: #2196F3;
}

.slider__caption {
  font-weight: 500;
  margin: 2rem 0 1rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}

.slider__txt {
  color: #999;
  margin-bottom: 3rem;
  max-width: 300px;
}

@-webkit-keyframes check {
  50% {
    outline-color: #333;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #333;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

@keyframes check {
  50% {
    outline-color: #333;
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: #333;
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

<header>
  <div>
    <div>
      <div>
        <div data-ride="carousel" data-interval="false">
          <ul>
            <li data-target="#carouselExampleIndicators" data-slide-to="0"><img src="https://keeth.fr/wp-content/uploads/2018/10/icon-fraise-couleur.png" alt="" /></li>
          </ul>
          <div>
            <div>
              <div><input title="slide1" checked="checked" name="slider-fraise" type="radio" /> <input title="slide2" name="slider-fraie" type="radio" />
                <div>
                  <div><img src="https://keeth.fr/wp-content/uploads/2018/10/pack-fraise.png" alt="" /></div>
                  <div><img src="https://keeth.fr/wp-content/uploads/2018/10/pack-fraise.png" alt="" /></div>
                </div>
              </div>
              <aside><a href="https://keeth.fr/produit/kit-de-blanchiment-dentaire-gout-fraise/">Kit de blanchiment dentaire<br />go&ucirc;t fraise tendresse</a></aside>
              <div><a href="https://keeth.fr/produit/kit-de-blanchiment-dentaire-gout-fraise/"> en savoir plus</a></div>
            </div>
          </div>
          <a href="#carouselExampleIndicators" data-slide="prev"> Previous </a> <a href="#carouselExampleIndicators" data-slide="next"> Next </a></div>
      </div>
      <a href="#carouselExampleIndicators" data-slide="prev"> Previous </a> <a href="#carouselExampleIndicators" data-slide="next"> Next </a></div>
  </div>
</header>

我尽力将其弄清楚，我只放了一张幻灯片:) 如有需要，请随时询问更多信息。感谢您的支持；;

Here is the website（如果需要）。

Answer 1

这实际上可能有效。我知道这不是最好的答案，但是：p ....

更改此

<div class="content-header">

到

<div class="content-header" style="width: 600px;">

和修改

.carousel-inner {
    width: 280px;
    margin: auto;
    padding-top: 50px;
}
.carousel-item {
    width: 280px!important;
    margin: auto;
}

在您的style.css中。

Answer 2

好吧，我看到了一个错误的答案，我看到了一些错误的代码，所以...这是我的错误解决方案。

自动为内容标题和轮播内部添加边距0。

现在将按钮放回原处（.carousel-indicators）：

丢失负的左边距
左移：0左移：calc（200px-31vw）;
在该元素上也放空白边距，然后在内容标题上放空白边距。

再一次，我不推荐这种解决方案，但是您的代码已经非常时髦，也许这就是您的解决方案

Answer 3

感谢Aditya Jangid，我建立了一个好的解决方案。我将.content-header设置为58％（与Bootstrap类一样，但它并没有移动我的全部设计），并且将.carousel-item的边距设置为auto。

我知道我的代码不是很干净，但是，这是我的第一个使用js和BT的代码，我仍然在学习；）这是一种崩溃测试哈哈。谢谢你的支持！你是最好的。

如何在不触摸ul部分的情况下使引导程序滑块的内容居中？

3 个答案: