Develop Reference

Netflix kind of carousel ui button recreating divs using getComputedStyle css

I am trying to recreate netflix kind of carousel ui using this wds tutorial (https://www.youtube.com/watch?v=yq4BeRtUHbk) for movie cast details using Reactjs and running through a problem.
I am fetching data from moviedb database and trying to achieve netflix like carousel effect.
the problem is when i click button for changing the slider index using getComputedStyle in css,
I get entire div recreated again several times.
I Fetch the data in the MovieDetails component and pass it to MovieDetailsPage component
export default function MovieDetails() {
const [MovieDetail, setMovieDetail] = useState([])
const [CastDetails, setCastDetails] = useState([])
const { id } = useParams();
const API_Key = '4ee812b6fb59e5f8fc44beff6b8647ed';
console.log('this is id', id);
useEffect(() => {
getDetail();
getCastDetails();
console.log('main');
}, [id])
const getDetail = useCallback(() => {
fetch(`https://api.themoviedb.org/3/movie/${id}?api_key=${API_Key}&language=en-US`)
.then(res => res.json())
.then(data => {
console.log(data, 'data');
setMovieDetail(data)
})
}, [id])
const getCastDetails = useCallback(() => {
fetch(`https://api.themoviedb.org/3/movie/${id}/credits?api_key=${API_Key}&language=en-
US`)
.then(res => res.json())
.then(data => {
setCastDetails(data.cast)
}
)
console.log('get cast details rendered');
}, [id])
useEffect(() => {
console.log(MovieDetail, 'Moviedetils')
}, [MovieDetail])
return (
<div>
<MoviesDetailsPage {...MovieDetail} CastDetails={CastDetails} API_Key={API_Key} />
</div>
)
}
MovieDetailsPage.jsx
export default function MoviesDetailsPage({ id, poster_path, backdrop_path, API_Key,
CastDetails }) {
const API_image = 'https://image.tmdb.org/t/p/w500/';
document.addEventListener('click', e => {
e.preventDefault();
let handle;
if(e.target.matches(".handle")){
handle = e.target
}else{
handle = e.target.closest(".handle")
}
if(handle != null) onHandleClick(handle)
})
function onHandleClick(handle){
const slider = handle.closest(".MovieCastContainer").querySelector(".slider")
console.log(slider, 'sliderindex')
const sliderIndex = parseInt(getComputedStyle(slider).getPropertyValue("--slider-index"))
if(handle.classList.contains("left-handle")){
slider.style.setProperty("--slider-index", sliderIndex - 1)
}
if(handle.classList.contains("right-handle")){
slider.style.setProperty("--slider-index", sliderIndex + 1)
}
}
const castInfo = CastDetails && CastDetails.map(data => <img src={API_image+data.profile_path}
alt={data.name} />)
console.log(CastDetails, 'Castdetails')
return (
<div className="MovieDetailsPageCont">
<div className='MovieDetailsContainer'>
<div className="headerImg"><img src={API_image + backdrop_path}
alt='backdrop_path' style={{ width: '100%', borderRadius: '10px' }} /></div>
<div className="movieid">{id}</div>
</div>
<div className='MovieCastContainer'>
<button className="handle left-handle">
<div className="text">‹</div>
</button>
<div className='slider'>
{
castInfo ? castInfo : '...Loading'
}
</div>
<button className="handle right-handle">
<div className="text">›</div>
</button>
</div>
</div>
)
}
My css page where change the slider index to transfrom to next set of values
*, *::after, *::before{
box-sizing: border-box;
}
:root{
--slider-padding: 5rem;
}
.MovieCastContainer{
display: flex;
justify-content: center;
overflow: hidden;
}
.slider{
--slider-index: 0;
display: flex;
flex-grow: 1;
margin: 0 .25rem;
transform: translateX(calc(var(--slider-index) * -100%));
transition: transform 250ms ease-in-out;
}
.slider > img {
flex: 0 0 25%;
max-width: 25%;
aspect-ratio: 16 / 9;
padding: .25rem;
border-radius: 1rem;
overflow: hidden;
}
.handle{
border: none;
border-radius: 1rem;
flex-grow: 0;
background-color: rgba(0, 0, 0, .25);
z-index: 10;
margin: .25rem 0;
padding: 0 .5rem;
cursor: pointer;
font-size: 5rem;
display: flex;
align-items: center;
justify-content: center;
color: white;
line-height: 0;
transition: font-size 150ms ease-in-out;
}
.left-handle{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.right-handle{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.handle:hover,
.handle:focus {
background-color: rgba(0, 0, 0, .5);
}
.handle:hover .text,
.handle:focus .text{
transform: scale(1.2)
}
Everytime I click next button in ui the I get this
please if you can help out with this any help would be appreciated.

Template Literal Function not working as expected

I have a function that turns an array into modal window links as a template literal.
The code that creates the links works fine outside of the function
But once it gets rendered in the function it no longer works. I can't find any errors, but it does NOT work.
However, if I copy the HTML that the function renders and save that as actual HTML, that works fine on its own.
A good chunk of the JavaScript portion of the code is posted below. A full version is on Codepen.
There are two sections in the example on Codepen:
The first section has the code as it's rendered by the function.
The second section is copied from the Elements tab in Developer Tools and saved as actual HTML.
"use strict";
const modalBtns = document.querySelectorAll(".modal-button");
const modalWin = document.querySelector(".modal-window");
const closeBtn = document.querySelector(".close-modal");
const modal_iframe = document.getElementById("modal_iframe");
modalBtns.forEach((item) => {
item.addEventListener("click", function (e) {
let modal = e.currentTarget;
if (modal.dataset.target) {
let modalID = modal.dataset.target;
document.getElementById(modalID).style.display = "block";
}
if (modal.dataset.iframe) {
modal_iframe.src = modal.dataset.iframe;
document
.querySelector(".button-footer")
.addEventListener("click", function () {
window.open(modal.dataset.iframe, "_blank");
});
}
if (modal.dataset.header) {
document.querySelector(
".modal-header"
).innerHTML = `<h1>${modal.dataset.header}</h1>`;
}
if (modal.dataset.dimensions) {
document
.querySelector(".modal-window")
.setAttribute("style", modal.dataset.dimensions);
}
function loadIframe() {
let frame = document.getElementById("modal_window");
frame.style.height =
frame.contentWindow.document.body.scrollHeight + "px";
}
if (document.querySelector("#modal_window")) {
setTimeout(function () {
loadIframe;
}, 2000);
}
if (modal.dataset.reload && modal.dataset.reload === "1") {
document
.querySelector(".close-modal")
.addEventListener("click", function (e) {
console.log("parent.location.reload() pending...");
parent.location.reload();
});
}
/*======= All EventListeners Below Close Modal ================*/
closeBtn.addEventListener("click", function (e) {
document.querySelector(".modal-background").style.display = "none";
});
window.addEventListener("click", function (e) {
if (e.currentTarget === document.querySelector(".modal-background")) {
document.querySelector(".modal-background").style.display = "none";
}
});
document.body.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
document.querySelector(".modal-background").style.display = "none";
}
});
});
});
const main = document.querySelector("main");
const modal_links = [
{
link: "https://notation.netcentrx.net/staff/",
header: "Musical Staff",
thb: "notation",
w_h: "min-width:60vw;max-width:600px;height:650px",
reload: 0
},
{
link: "https://wsl.netcentrx.net/",
header: "WSL Commands",
thb: "wsl",
w_h: "min-width:60vw;max-width:600px;height:650px",
reload: 0
}
];
let modalLink = "";
function createModalLinks(
link,
modalID,
header,
img,
w_h = "width:90vw;height:600px",
reload = "0"
) {
modalLink = `
<a href="javascript:void(0)" class="modal-button" onclick="console.log('onclick handler:${link}');" data-header="${header}" data-target="${modalID}" data-iframe="${link}" data-dimensions="${w_h};margin-top:20px" data-reload="${reload}">
<img src="https://resume.netcentrx.net/examples/${img}.jpg" title="${img}" width="50">
</a>
`;
return modalLink;
}
let theLinks = "";
modal_links.forEach((item) => {
theLinks += createModalLinks(
item.link,
"modal_window",
item.header,
item.thb,
item.w_h,
item.reload
);
});
main.innerHTML = theLinks;
My apologies in advance for it not being stripped down to just the bare minimum. But in order to replicate the problem, it required more code than it probably should have had. I've been reworking this for the better part of a day without any insight as to what the real problem is. I've been creating functions using template literals just like this for years now, usually with a high success rate. Whatever the problem is, I need to know so I can get past it. The only anomaly that I spotted is that–in the version on Codepen–the only thing that doesn't work in that version is once the modal is displayed clicking on the background does not dismiss the modal like it does elsewhere. If that's significant as to what the problem may be, I'm not sure what the connection is.
Usually when I take the time to painstakingly write everything out like this I typically either spot the problem or figure out an alternative solution so there's no need to actually post a question, but this does not appear to be one of those times. As always, your help is very much appreciated!

The issue appears to just be timing. Your code is executed in order, and the first part gets all of the modal buttons on the page and sets the appropriate event listeners. Then the second part of your code adds 2 modal buttons, which were not present earlier.
By simply wrapping the first part of your code in a function and calling it later (or swapping the order of those two parts of code), everything works as expected.
"use strict";
const _InitModal = () => {
const modalBtns = document.querySelectorAll(".modal-button");
const modalWin = document.querySelector(".modal-window");
const closeBtn = document.querySelector(".close-modal");
const modal_iframe = document.getElementById("modal_iframe");
modalBtns.forEach((item) => {
item.addEventListener("click", function (e) {
console.log("e.currentTarget = " + e.currentTarget);
let modal = e.currentTarget;
console.log("modal = " + modal);
if (modal.dataset.target) {
let modalID = modal.dataset.target;
console.log("modal.dataset.target = " + modal.dataset.target);
document.getElementById(modalID).style.display = "block";
}
if (modal.dataset.iframe) {
modal_iframe.src = modal.dataset.iframe;
document
.querySelector(".button-footer")
.addEventListener("click", function () {
window.open(modal.dataset.iframe, "_blank");
});
}
if (modal.dataset.header) {
document.querySelector(
".modal-header"
).innerHTML = `<h1>${modal.dataset.header}</h1>`;
console.log(`modal.dataset.header = ${modal.dataset.header}`);
}
if (modal.dataset.dimensions) {
document
.querySelector(".modal-window")
.setAttribute("style", modal.dataset.dimensions);
}
function loadIframe() {
let frame = document.getElementById("modal_window");
frame.style.height =
frame.contentWindow.document.body.scrollHeight + "px";
}
if (document.querySelector("#modal_window")) {
setTimeout(function () {
loadIframe;
}, 2000);
}
// e.preventDefault();
if (modal.dataset.reload && modal.dataset.reload === "1") {
document
.querySelector(".close-modal")
.addEventListener("click", function (e) {
console.log("parent.location.reload() pending...");
parent.location.reload();
});
}
/*======= All EventListeners Below Close Modal ================*/
closeBtn.addEventListener("click", function (e) {
document.querySelector(".modal-background").style.display = "none";
});
window.addEventListener("click", function (e) {
console.log("e.currentTarget = " + e.currentTarget);
if (e.currentTarget === document.querySelector(".modal-background")) {
document.querySelector(".modal-background").style.display = "none";
}
});
document.body.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
console.log("e=" + e);
document.querySelector(".modal-background").style.display = "none";
}
});
});
});
}
const main = document.querySelector("main");
const modal_links = [
{
link: "https://notation.netcentrx.net/staff/",
header: "Musical Staff",
thb: "notation",
w_h: "min-width:60vw;max-width:600px;height:650px",
reload: 0
},
{
link: "https://wsl.netcentrx.net/",
header: "WSL Commands",
thb: "wsl",
w_h: "min-width:60vw;max-width:600px;height:650px",
reload: 0
}
];
function createModalLinks(
link,
modalID,
header,
img,
w_h = "width:90vw;height:600px",
reload = "0"
) {
let modalLink = "";
modalLink = `
<a href="javascript:void(0)" class="modal-button" onclick="console.log('onclick handler:${link}');" data-header="${header}" data-target="${modalID}" data-iframe="${link}" data-dimensions="${w_h};margin-top:20px" data-reload="${reload}">
<img src="https://resume.netcentrx.net/examples/${img}.jpg" title="${img}" width="50">
</a>`;
return modalLink;
}
let theLinks = "";
modal_links.forEach((item) => {
theLinks += createModalLinks(
item.link,
"modal_window",
item.header,
item.thb,
item.w_h,
item.reload
);
});
main.innerHTML = theLinks;
_InitModal();
.modal-background {
font-family: sans-serif;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
z-index: 9999;
background: rgba(55, 55, 55, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.modal-window {
position: relative;
background-color: #ffffff;
width: 50%;
margin: 10% auto;
border-radius: 0.5rem;
padding: 0.75rem;
border: 1px groove #ccc;
/* box-shadow: 1px 1px 1px #999, 2px 2px 2px #000; */
}
.close-modal:hover,
.close-modal:focus {
color: rgba(255, 255, 255, 1);
cursor: pointer;
background: red;
transition: 1s;
text-shadow: 1px 1px 1px #999, 2px 2px 2px #000;
}
button.close-modal {
position: absolute;
top: -0.75rem;
right: -0.75rem;
padding: 0.05rem 0.75rem;
background: #999;
color: #ccc;
border-radius: 50%;
border: none;
outline: none;
-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1.5s;
animation-name: animatebottom;
animation-duration: 1.5s;
}
button.close-modal::before {
content: "\D7";
font-size: 2rem;
}
.modal-window {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.5s;
animation-name: animatetop;
animation-duration: 0.5s;
}
.modal-header {
height: 30px;
text-align: center;
width: 100%;
background: #fff;
padding: 0.2rem;
}
.modal-header h1 {
font-size: 1.1rem;
}
.modal-footer {
height: 20px;
text-align: center;
width: 100%;
background: #fff;
padding: 0.2rem;
}
.modal-content {
background-color: #fff;
height: calc(100% - 70px);
border-radius: 0.5rem;
border: 0.1rem groove #ddd;
overflow: hidden;
}
.button-footer {
background: #fff;
border-radius: 0.5rem;
border: 1px outset #aaa;
padding: 0.2rem;
color: #999;
transition: 1s;
cursor: pointer;
}
.button-footer:hover {
background: #fdfdfd;
color: #555;
border: 1px inset #ddd;
text-shadow: 0.05rem 0.05rem 0.05rem #ccc, 0.055rem 0.055rem 0.055rem #999,
0.06rem 0.06rem 0.06rem #333;
transition: 1s;
}
.close-btn:hover {
color: white;
background: #f00;
cursor: pointer;
}
#modal_iframe {
width: 100%;
height: 100%;
}
button.modal-button {
border-radius: 0.5rem;
border: 0px solid #aaa;
padding: 0;
cursor: pointer;
}
.modal-button-img {
border-radius: 0.5rem;
border: 0.1rem groove #444;
cursor: pointer;
}
.sepia:hover {
filter: sepia(150%);
}
/*
.none {
display: none;
}
*/
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
#-webkit-keyframes animatebottom {
from {
top: 0;
opacity: 1;
}
to {
bottom: -300px;
opacity: 0;
}
}
#keyframes animatebottom {
from {
top: 0;
opacity: 1;
}
to {
bottom: -300px;
opacity: 0;
}
}
.container {
border-radius: 0.5rem;
border: 1px solid #aaa;
max-width: 800px;
width: 500px;
margin: 0 auto;
text-align: center;
font-family: sans-serif;
}
main,
aside {
font-family: sans-serif;
max-width: 800px;
width: 500px;
margin: 0 auto;
text-align: center;
}
h2 {
text-align: center;
font-family: sans-serif;
font-weight: normal;
font-size: 1.2rem;
}
span {
font-size: 75%;
background: #ffff0055;
}
<div id="modal_window" class="modal-background">
<div class="modal-window">
<button class="close-modal" data-dismiss="modal"></button>
<div class="modal-header"></div>
<div class="modal-content">
<iframe src="#" id="modal_iframe" frameborder="0">If you'd have had a real browser, I wouldn't be boring you with this now...</iframe>
</div>
<div class="modal-footer"><button class="button-footer">Open In New Tab</button></div>
</div>
</div>
<div class="container">
<h2><code>main</code> Content Rendered By JavaScript</h2>
<main>
Main
</main>
<span>working now</span>
</div>

setInterval doesn't work correctly when choose different value

Please. help. How to correct the code. When you select a value and press stop, and then select another value, the value at which it stopped last time is displayed immediately, and then the countdown starts from the new value. And when there’s a countdown, how to make it so that when the time runs out or when we press stop, the div, which changes the background, always initially remains green(when the value is even, it remains red at the end), i.e. when setInterval was done, everything looked in its original state.
const amountOfRotation = document.querySelector('.feature-block-list');
const countdownNumbValue = document.querySelector('.countdown-numb-value');
const countdown = document.querySelector('.countdown');
const autoButton = document.querySelector('.auto-button');
const countdownTxt = document.querySelector('.countdown-txt');
const changeColor = document.querySelector('.change-color');
amountOfRotation.addEventListener('click', ({
target: {
dataset
}
}) => {
autoButton.classList.add('stop');
countdown.classList.remove('stop');
amountOfRotation.classList.add('disable-btn');
let timerId = setInterval(() => {
countdownNumbValue.innerHTML = dataset.count--;
changeColor.classList.toggle('red');
if (dataset.count < 0) {
clearInterval(timerId);
countdown.classList.add('stop');
autoButton.classList.remove('stop');
amountOfRotation.classList.remove('disable-btn');
};
}, 1500);
countdownTxt.addEventListener('click', () => {
clearInterval(timerId);
countdown.classList.add('stop');
autoButton.classList.remove('stop');
amountOfRotation.classList.remove('disable-btn');
})
});
.feature-block-paragraph {
margin-left: 6px;
}
.feature-block-paragraph li {
color: #ffd100;
}
.feature-block-paragraph ul li:hover {
color: black;
cursor: pointer;
}
.countdown-txt {
color: #3d0000;
cursor: pointer;
}
.countdown {
display: flex;
align-items: center;
margin-left: 9%;
}
.countdown-numb {
border: 1px solid black;
border-radius: 50px;
color: #ffd100;
display: flex;
align-items: center;
justify-content: center;
height: 20px;
}
.stop {
display: none;
}
.disable-btn {
pointer-events: none;
opacity: 0.4;
}
.change-color {
border: 1px solid black;
border-radius: 100%;
background: green;
width: 20px;
height: 20px;
}
.red {
background: red;
}
<div class="feature-block-paragraph">
<ul class="feature-block-list">
<li class="sound-div" data-count="25">25</li>
<li class="sound-div" data-count="20">20</li>
<li class="sound-div" data-count="15">15</li>
<li class="sound-div" data-count="10">10</li>
<li class="sound-div" data-count="5">5</li>
</ul>
</div>
<div class="auto-button">
<span class="auto-button-txt">AUTO</span>
</div>
<div class="countdown stop">
<div class="countdown-numb">
<span class="countdown-numb-value"></span>
</div>
<span class="countdown-txt">STOP</span>
</div>
<div class="change-color">
</div>

To fix the first problem, assign the data-count value to the DIV in the click handler, not just the interval function.
I've also changed the code to decrement and check innerHTML rather than dataset.count. The way you did it you can't reuse the same count, because data-count is permanently changed by the decrement code.
To fix the second problem, just remove the red class when the timer runs out.
const amountOfRotation = document.querySelector('.feature-block-list');
const countdownNumbValue = document.querySelector('.countdown-numb-value');
const countdown = document.querySelector('.countdown');
const autoButton = document.querySelector('.auto-button');
const countdownTxt = document.querySelector('.countdown-txt');
const changeColor = document.querySelector('.change-color');
amountOfRotation.addEventListener('click', ({
target: {
dataset
}
}) => {
autoButton.classList.add('stop');
countdown.classList.remove('stop');
amountOfRotation.classList.add('disable-btn');
countdownNumbValue.innerHTML = dataset.count
let timerId = setInterval(() => {
countdownNumbValue.innerHTML--;
changeColor.classList.toggle('red');
if (countdownNumbValue.innerHTML <= 0) {
clearInterval(timerId);
countdown.classList.add('stop');
autoButton.classList.remove('stop');
amountOfRotation.classList.remove('disable-btn');
changeColor.classList.remove('red');
};
}, 1500);
countdownTxt.addEventListener('click', () => {
clearInterval(timerId);
countdown.classList.add('stop');
autoButton.classList.remove('stop');
amountOfRotation.classList.remove('disable-btn');
changeColor.classList.remove('red');
})
});
.feature-block-paragraph {
margin-left: 6px;
}
.feature-block-paragraph li {
color: #ffd100;
}
.feature-block-paragraph ul li:hover {
color: black;
cursor: pointer;
}
.countdown-txt {
color: #3d0000;
cursor: pointer;
}
.countdown {
display: flex;
align-items: center;
margin-left: 9%;
}
.countdown-numb {
border: 1px solid black;
border-radius: 50px;
color: #ffd100;
display: flex;
align-items: center;
justify-content: center;
height: 20px;
}
.stop {
display: none;
}
.disable-btn {
pointer-events: none;
opacity: 0.4;
}
.change-color {
border: 1px solid black;
border-radius: 100%;
background: green;
width: 20px;
height: 20px;
}
.red {
background: red;
}
<div class="feature-block-paragraph">
<ul class="feature-block-list">
<li class="sound-div" data-count="25">25</li>
<li class="sound-div" data-count="20">20</li>
<li class="sound-div" data-count="15">15</li>
<li class="sound-div" data-count="10">10</li>
<li class="sound-div" data-count="5">5</li>
</ul>
</div>
<div class="auto-button">
<span class="auto-button-txt">AUTO</span>
</div>
<div class="countdown stop">
<div class="countdown-numb">
<span class="countdown-numb-value"></span>
</div>
<span class="countdown-txt">STOP</span>
</div>
<div class="change-color">
</div>

JS / CSS issue with Div Slider and Display:Table-Cell

I have a Div slider that rotates a set of Divs in and out of focus. Everything was working fine until I tried switching everything to (table / table-cell) in order to keep them all the Divs the same height in CSS. Now they still rotate out but one div remains visible with a reduced width off to the side of the stage. I get a sense that its position related but just can't figure out what's causing the issue.
Affected Page - https://www.harpercollege.edu/dev/blog-slider-test.php
JS Code:
$('.blog-posts').wrapInner('<div class="blog-posts-stage" />');
// Calculate Conditions & Set Vars
// var playTimer = 9,
slideQty = $('.well').length,
slideWidth = $('.well').width(),
stageWidth = $('.blog-posts-stage').width(),
contWidth = $('.blog-posts').width();
if ((slideQty * slideWidth) < contWidth) {
$('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
$('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
$('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
$('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}
$(window).resize(function() {
var slideQty = $('.well').length,
slideWidth = $('.well').width(),
stageWidth = $('.blog-posts-stage').width(),
contWidth = $('.blog-posts').width();
if ((slideQty * slideWidth) < contWidth) {
$('.blog-posts-prev').addClass('blog-posts-prev-disabled').removeClass('blog-posts-prev');
$('.blog-posts-next').addClass('blog-posts-next-disabled').removeClass('blog-posts-next');
} else {
$('.blog-posts-prev-disabled').addClass('blog-posts-prev').removeClass('blog-posts-prev-disabled');
$('.blog-posts-next-disabled').addClass('blog-posts-next').removeClass('blog-posts-next-disabled');
}
});
$('.blog-posts-next').on('click', function(event) {
event.preventDefault();
$('.blog-posts-stage').animate({
left: -(slideWidth)
}, 500, function() {
$('.well:first').appendTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: '0px'
});
});
});
$('.blog-posts-prev').on('click', function(event) {
event.preventDefault();
$('.well:last').prependTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: -(slideWidth)
});
$('.blog-posts-stage').animate({
left: '0px'
}, 500, function() {});
});
function moveForward() {
$('.blog-posts-stage').animate({
left: -(slideWidth)
}, 500, function() {
$('.well:first').appendTo('.blog-posts-stage');
$('.blog-posts-stage').css({
left: '0px'
});
});
}
var timer = setInterval(moveForward, playTimer);
$('.blog-posts, .blog-posts-prev, .blog-posts-next').hover(function(ev) {
// clearInterval(timer);
}, function(ev) {
// timer = setInterval( moveForward, playTimer);
});
CSS Code:
<style>
.blog-posts {
width: 100%;
background: #eee;
font-size: 0;
position: relative;
}
.blog-posts-prev,
.blog-posts-next {
display: inline-block;
background: #eee;
color: #000;
text-decoration: none;
padding: 10px;
margin: 5px 0;
}
.blog-posts-prev:hover,
.blog-posts-next:hover {
background: #ccc;
}
.blog-posts-prev-disabled,
.blog-posts-next-disabled {
display: inline-block;
background: #eee;
color: #ccc;
text-decoration: none;
padding: 10px;
margin: 5px 0;
}
.blog-posts-stage {
position: relative;
white-space: normal;
width: 100%;
height: 100%;
float: none;
}
.well {
background: #ccc;
box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255);
width: 100%;
font-size: 12px;
text-align: left;
display: table-cell;
height: 100%;
width: 100%;
}
.well .row .col-sm-12.col-md-12 h2 {
float: left;
margin-top: 0px;
}
</style>

You could just use a lightbox library and save yourself the effort, but if you really want to do this why not try flex?
.blog-posts-stage {
display: flex;
flex-direction: row;
overflow: hidden;
}
.well-large {
flex-shrink: 0;
}

Javascript Slideshow Functions Not Working

I would please like an explanation to why the slideshow is not working. Below I have used an interval to perpetually change the slideshow, if userClick is false. The white and squared buttons (made of divs) are set to call upon two functions; slideRight() or slideLeft() and clicked(). When the buttons are clicked however, the clicked() function does not seem to change the variable, based on the data on top of the page.
<body>
<div class="page-wrapper">
<header>
<div class="headContent">
<h1 class="titleText">Slideshow</h1>
<h2 class="subTitleText">A slideshow made with JavaScript.</h2>
<p>userClick <span id="uc"></span></p>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
</ul>
</nav>
</header>
<div class="body-wrapper">
<h1 class="titleText">Slideshow</h1>
<div id="slideshow">
<div id="leftSlide" onclick="leftSlide(); clicked()"></div>
<div id="rightSlide" onclick="rightSlide(); clicked()"></div>
</div>
<p>The image is not invoked by a tag, but invoked by the background property using Javascript.</p>
</div>
<footer>
<p id="footerText">© 2017 <br>Designed by JastineRay</p>
</footer>
</div>
<script language="javascript">
// Slide function
var slide = ["minivan", "lifeinthecity", "sunsetbodyoflove"];
var slideTo = 1;
window.onload = getSlide();
// Previous Image
function leftSlide() {
if (slideTo != 0) {
slideTo = slideTo - 1;
} else if (slideTo == 0) {
slideTo = slide.length - 1;
} else {
alert('SLIDE ERROR');
}
getSlide();
}
// Next Image
function rightSlide() {
if (slideTo != (slide.length - 1)) {
slideTo = slideTo + 1;
} else if (slideTo == (slide.length - 1)) {
slideTo = 0;
} else {
alert('SLIDE ERROR');
}
getSlide();
}
function getSlide() {
imageURL = 'url(images/' + slide[slideTo] + '.jpg)';
document.getElementById("slideshow").style.backgroundImage = imageURL;
}
// Interval Slideshow & Check if user clicked (timeout)
var userClick = false;
window.onload = slideInterval(5000);
// Start Slideshow
function slideInterval(interval) {
while (userClick = false) {
setInterval(function() {
rightSlide();
}, interval)
}
}
// Stop Slideshow and start timeout
function clicked() {
userClick = true;
setTimeout(function() {
userClick = false;
slideInterval();
}, 2000)
}
window.onload = function() {
setInterval(document.getElementById("uc").innerHTML = userClick), 100
}
</script>
</body>
CSS coding below.
* {
margin: 0;
padding: 0;
}
.page-wrapper {
width: 100%;
}
// Class Styling
.titleText {
font-family: monospace;
font-size: 40px;
}
.subTitleText {
font-family: monospace;
font-size: 20px;
font-weight: normal;
}
// Header Styling
header {
height: 500px;
}
.headContent {
margin: 30px 7%;
}
// Navigation Styling
nav {
overflow: hidden;
}
nav ul {
background: black;
background: linear-gradient(#595959, black);
list-style-type: none;
font-size: 0;
padding-left: 13.33%;
margin: 40px 0;
}
nav ul li {
padding: 15px 20px;
border-right: 1px solid #595959;
border-left: 1px solid #595959;
color: white;
display: inline-block;
font-size: 20px;
font-family: sans-serif;
}
// Body Styling
.body-wrapper {
}
.body-wrapper > .titleText {
text-align: center;
font-size: 50px;
}
#slideshow {
overflow: hidden;
margin: 20px auto;
border: 2px solid blue;
height: 350px;
max-width: 800px;
background-size: cover;
background-position: center;
position: relative;
}
#leftSlide {
position: absolute;
left: 40px;
top: 175px;
background-color: white;
height: 40px;
width: 40px;
}
#rightSlide {
position: absolute;
left: 100px;
top: 175px;
background-color: white;
height: 40px;
width: 40px;
}
// Footer Styling

Try changing the checking part to:
window.onload = function() {
setInterval(function () {
document.getElementById("uc").innerHTML = userClick;
}, 100);
}
The first argument of setInterval has to be a function (something that can be called), not a generic piece of code.