幻灯片div中的定位元素

时间：2019-04-15 11:10:36

标签： css css-grid

我正在尝试创建幻灯片，并按照下面的图像示例使文本元素与图像内嵌。我正在尝试使用显示网格来显示元素，但是我已经坚持了很长时间

有人有什么建议吗？

What I am attempting to achieve

这是我的笔https://codepen.io/anon/pen/XQeGMZ

HTML 

<div class="bareEditorial">
    <div class="slideshow-container">
<h1>Bare Boutique Campaign</h1>
 <div class="mySlides fade">

<div class="numbercounter">
<div class="numbertext">1 / 3</div>
</div>

<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c7118acc830251242312b94/1550915797860/web+7.jpg?format=2500w" onclick="plusSlides(1)">
  </div>
</div>

<div class="mySlides fade">
<div class="numbertext">2 / 3</div>

<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/5c7116541905f442e8f008e0/5c7124951905f442e8f048fd/1550918837321/web+3.jpg?format=1000w" onclick="plusSlides(1)">
    </div>
</div>

<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c711846ec212dd3a55665b8/1550915727165/web+5.jpg?format=2500w" onclick="plusSlides(1)">
</div>
</div>

<div class="nextprevious">   
<a class="prev" onclick="plusSlides(-1)">Next</a>

<a class="next" onclick="plusSlides(1)">Previous</a>
</div>   
</div>
</div>

CSS 

.bareEditorial {
  margin: 0;
  width: 100vw;
  background-color: #e2be9f;
  display: block;
  position: relative;
  height: 100%;
}

.image {
  width: 38vw;
  grid-column-start: 2;
}

/* Slideshow container */
.slideshow-container {
  width: 100%;
  padding: 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 100px;
}

.numbercounter {
  grid-column-start: 1;
  display: inline-block;
}

.nextprevious {
  grid-column-start: 1;
  grid-row-start: 2;
  display: inline-block;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  color: white;
  font-weight: 400;
  font-size: 18px;
  display: inline-block;
  user-select: none;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #fff;
  font-size: 12px;
  padding: 8px 12px;
  display: inline-block;
  grid-column-start: 1;
}

3 个答案:

答案 0 :(得分：2)

由于使用的是JS，因此可以将数字与next/previous放在同一包装器中，并动态更改值。

我还更正了一些与网格有关的值，并删除了无用的样式 

var slideIndex = 1;
var indexes = document.querySelectorAll(".numbertext span");
var slides = document.getElementsByClassName("mySlides");
indexes[1].innerHTML = slides.length;

showSlides(slideIndex);


function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  indexes[0].innerHTML = slideIndex;
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex - 1].style.display = "block";
}
body {
  margin: 0;
  overflow-x: hidden;
  font-family: helvetica, sans-serif;
  background-color: #fff;
}

* {
  font-weight: 400;
}

img {
  margin: 0;
  padding: 0;
  max-width: 100%;
}


/*///////////////////// 2.BARE EDITORIAL /////////////////////*/

.bareEditorial {
  background-color: #e2be9f;
}

.wrapper {
  padding: 100px;
}

.mySlides {
  grid-column-start: 2;
  grid-row:1/span 2; /*added this*/
}

.image {
  width: 38vw;
}


/* Slideshow container */

.slideshow-container {
  padding: 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.nextprevious {
  grid-column-start: 1;
  grid-row-start: 2;
  margin-top: auto; /*added this*/
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  color: white;
  font-weight: 400;
  font-size: 18px;
  display: inline-block;
  user-select: none;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #fff;
  font-size: 12px;
  padding: 8px 12px;
  display:inline-block;
}


/* Fading animation */

.fade {
  animation-name: fade;
  animation-duration: 1s;
}


@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

.wrapper {
  padding: 100px;
}
<div class="parallax"></div>


<div class="bareEditorial">

  <div class="slideshow-container">


    <h1>Bare Boutique Campaign</h1>

    <div class="mySlides fade">
      <div class="image">
        <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c7118acc830251242312b94/1550915797860/web+7.jpg?format=2500w" onclick="plusSlides(1)">
      </div>


    </div>

    <div class="mySlides fade">

      <div class="image">
        <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/5c7116541905f442e8f008e0/5c7124951905f442e8f048fd/1550918837321/web+3.jpg?format=1000w" onclick="plusSlides(1)">
      </div>

    </div>

    <div class="mySlides fade">

      <div class="image">
        <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c711846ec212dd3a55665b8/1550915727165/web+5.jpg?format=2500w" onclick="plusSlides(1)">
      </div>

    </div>


    <div class="nextprevious">
      <a class="prev" onclick="plusSlides(-1)">Previous</a>

      <a class="next" onclick="plusSlides(1)">Next</a>
      <div class="numbertext">(<span>3</span> / <span>3</span>)</div>
    </div>

  </div>


</div>

答案 1 :(得分：0)

.nextprevious {
    grid-column-start: 1;
    grid-row-start: 2;
    display: inline-block;
    margin: -40px 0 0 0;
}

如果您只想与幻灯片对齐，则可以使用负边距并对齐，但是如果您要保持网格，我认为必须更改结构，以开发html结构的方式可能无法获得输出

答案 2 :(得分：0)

对HTML进行了一些更改：结构将其展平。
对CSS进行了更改：使用的网格区域。
对JavaScript进行了更改：更改类名称而不是样式。 

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides((slideIndex += n));
}

function currentSlide(n) {
  showSlides((slideIndex = n));
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }

  for (var slide of slides) {
    slide.classList.remove("active");
  }
  for (var dot of dots) {
    dot.classList.remove("active");
  }
  slides[slideIndex - 1].classList.add("active");
  dots[slideIndex - 1].classList.add("active");
}
.mySlides {
  display: none;
}

.mySlides.active {
  display: block;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: helvetica, sans-serif;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

* {
  font-weight: 400;
}

img {
  margin: 0;
  padding: 0;
  max-width: 100%;
}


/*///////////////////// 2.BARE EDITORIAL /////////////////////*/

.bareEditorial {
  margin: 0;
  width: 100vw;
  background-color: #e2be9f;
  display: block;
  position: relative;
  height: 100%;
}

.wrapper {
  padding: 100px;
}

.mySlides {
  grid-area: image;
  justify-self: end;
  align-self: end;
}

.image {
  width: 38vw;
}


/* Slideshow container */

.slideshow-container {
  width: 100%;
  padding: 80px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: min-content min-content auto auto;
  grid-template-areas: "title title title image" "prev next count image";
  /*   grid-template-columns: repeat(2, 1fr); */
}

.slideshow-container h1 {
  grid-area: title;
}

.dot {
  grid-area: count;
  display: none;
  align-self: end;
  white-space: nowrap;
  color: #fff;
  font-size: 12px;
  padding: 8px 12px 0;
}

.dot.active {
  display: block;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  color: white;
  font-weight: 400;
  font-size: 18px;
  display: inline-block;
  user-select: none;
  display: flex;
  align-items: flex-end;
}

.prev {
  grid-area: prev;
  padding: 8px 12px 0;
}

.next {
  grid-area: next;
  padding: 8px 12px 0;
}


/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

.wrapper {
  padding: 100px;
}
<div class="parallax"></div>

<div class="bareEditorial">

  <div class="slideshow-container">

    <h1>Bare Boutique Campaign</h1>

    <div class="mySlides fade">
      <div class="image">
        <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c7118acc830251242312b94/1550915797860/web+7.jpg?format=2500w" onclick="plusSlides(1)">
      </div>
    </div>
    <div class="dot">1 / 3</div>

    <div class="mySlides fade">
      <div class="image">
        <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/5c7116541905f442e8f008e0/5c7124951905f442e8f048fd/1550918837321/web+3.jpg?format=1000w" onclick="plusSlides(1)">
      </div>
    </div>
    <div class="dot">2 / 3</div>

    <div class="mySlides fade">
      <div class="image">
        <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c711846ec212dd3a55665b8/1550915727165/web+5.jpg?format=2500w" onclick="plusSlides(1)">
      </div>
    </div>
    <div class="dot">3 / 3</div>

    <a class="prev" onclick="plusSlides(-1)">Previous</a>
    <a class="next" onclick="plusSlides(1)">Next</a>

  </div>

</div>

相关问题
最新问题