Positioning elements within a slideshow div - css

Question

I am attempting to create a slideshow and have the text elements sit inline with the images as per the image example below. I am trying to use display grid to display the elements but I have been stuck on this for ages
Does anyone have any suggestions?
Here is my pen 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;
}

Answer 1

Since you are using JS, you can put the numbers in same wrapper as next/previous and dynamically change the values.
I have also corrected some values related to your grid and removed useless styles
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>

Answer 2

.nextprevious {
grid-column-start: 1;
grid-row-start: 2;
display: inline-block;
margin: -40px 0 0 0;
}
if you just want to align with the slide you can use minus margin and align but if you want to maintain grid i think the structure have to be changed the way you develope the html structure may not get you the output

Answer 3

Made some changes to the HTML: structure Flattened it.
Made changes to the CSS: Used grid areas.
Made changes to JavaScript: Change class names instead of styles.
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>