so I have copied a piece of code from a tutorial from a youtube video for a simple slider project, I have gone over the code a number of times and can not figure out what is wrong with it. pictures do not show up, and if i change code which on line 46 of JS to starterslide images come but once i get to image three and use right arrow key, i get a plain white page.
const sliderImages = document.querySelectorAll(".slide")
, arrowLeft = document.querySelector ("#arrow-left")
, arrowRight = document.querySelector ("#arrow-right")
;
var current = 0
;
function reset() {
for(let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
function startSlide() {
reset();
sliderImages[0],style.display = "block";
}
function slideLeft () {
reset();
sliderImages[current -1].style.display = "block";
current--;
}
function slideRight(){
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
arrowLeft.addEventListener("click", function() {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
arrowRight.addEventListener("click", function() {
if (current === sliderImages.lenght - 1){
current = -1;
}
slideRight();
});
startSlide();
body, #slider, .wrap, .slide-content{
margin:0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
width:100%;
height:100vh;
overflow-x: hidden;
}
.wrap {
position:relative
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide1 {
background-image: url("images slider/pexels-alan-daysh-5198585.jpg");
}
.slide2 {
background-image: url("images slider/pexels-barikive-5282392.jpg");
}
.slide3 {
background-image: url("images slider/pexels-kei-scampa-3009487.jpg");
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.slide-content span{
font-size: 5rem;
color: white;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent white transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right{
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent white;
right: 0;
margin-right: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='style.css'>
<title>Fullscreen Slider</title>
</head>
<body>
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<span>Image one</span>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image three</span>
</div>
</div>
</div>
<div id='arrow-right' class='arrow'></div>
</div>
</body>
<script src='script.js'></script>
</html>
length spell incorrectly in the code.I have corrected and now it is working fine,
let sliderImages = document.querySelectorAll(".slide");
arrowLeft = document.querySelector("#arrow-left");
arrowRight = document.querySelector("#arrow-right");
current = 0;
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
arrowLeft.addEventListener("click", function() {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
arrowRight.addEventListener("click", function() {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
body,
#slider,
.wrap,
.slide-content {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.wrap {
position: relative
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide1 {
background-image: url("https://images.unsplash.com/photo-1519455953755-af066f52f1a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2261&q=80");
}
.slide2 {
background-image: url("https://images.unsplash.com/photo-1519455953755-af066f52f1a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2261&q=80");
}
.slide3 {
background-image: url("https://images.unsplash.com/photo-1519455953755-af066f52f1a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2261&q=80");
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.slide-content span {
font-size: 5rem;
color: white;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent white transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent white;
right: 0;
margin-right: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen Slider</title>
</head>
<body>
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<span>Image one</span>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image three</span>
</div>
</div>
</div>
<div id='arrow-right' class='arrow'></div>
</div>
</body>
</html>
Prefer to use Modulo operation
const
sliderImages = document.querySelectorAll(".slide")
, arrowLeft = document.querySelector("#arrow-left")
, arrowRight = document.querySelector("#arrow-right")
;
var current = 0 ;
function setSlideMov(mov) {
current = (current + mov + sliderImages.length) % sliderImages.length
sliderImages.forEach((sl,i)=> {
sl.style.display = (i==current) ? 'block' : 'none'
})
}
arrowLeft.addEventListener("click", function () { setSlideMov(-1) })
arrowRight.addEventListener("click", function () { setSlideMov(+1) })
setSlideMov(0);
in context:
const
sliderImages = document.querySelectorAll(".slide")
, arrowLeft = document.querySelector("#arrow-left")
, arrowRight = document.querySelector("#arrow-right")
;
var current = 0 ;
function setSlideMov(mov) {
current = (current + mov + sliderImages.length) % sliderImages.length
sliderImages.forEach((sl,i)=> {
sl.style.display = (i==current) ? 'block' : 'none'
})
}
arrowLeft.addEventListener("click", function () { setSlideMov(-1) })
arrowRight.addEventListener("click", function () { setSlideMov(+1) })
setSlideMov(0);
body,
#slider,
.wrap,
.slide-content {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.wrap {
position: relative
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide1 {
background-image: url("https://picsum.photos/id/251/500/300.jpg");
}
.slide2 {
background-image: url("https://picsum.photos/id/257/500/300.jpg");
}
.slide3 {
background-image: url("https://picsum.photos/id/253/500/300.jpg");
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.slide-content span {
font-size: 5rem;
color: white;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent white transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent white;
right: 0;
margin-right: 30px;
}
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<span>Image one</span>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image three</span>
</div>
</div>
</div>
<div id='arrow-right' class='arrow'></div>
</div>
Related
So here is my code that i need help with
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style8.css" />
<title>Progress Steps</title>
</head>
<body>
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
<script src="script8.js"></script>
</body>
</html>
Here is the css
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
:root {
--line-border-fill: #3498db;
--line-border-empty: #383838;
}
* {
box-sizing: border-box;
}
body {
background-color: #1f1f1f;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
text-align: center;
}
.progress-container { //im trying to use this
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 30px;
max-width: 100%;
width: 350px;
}
.progress-container::before { //im trying to use this
content: '';
background-color: var(--line-border-empty);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 100%;
z-index: -1;
}
.progress { //im trying to use this
background-color: var(--line-border-fill);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 0%;
z-index: -1;
transition: 0.4s ease;
}
.circle {
background-color: #1f1f1f;
color:#e2e2e2;
border-radius: 50%;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--line-border-empty);
transition: 0.4s ease;
}
.circle.active {
border-color: var(--line-border-fill);
}
.btn {
background-color: var(--line-border-fill);
color: #fff;
border: 0;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
padding: 8px 30px;
margin: 5px;
font-size: 14px;
}
.btn:active {
transform: scale(0.98);
}
.btn:focus {
outline: 0;
}
.btn:disabled {
background-color: var(--line-border-empty);
cursor: not-allowed;
}
And here is the javascript. Im not really familiar with javascript. Kind of a newbie at it.
const progress = document.getElementById("progress");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const circles = document.querySelectorAll(".circle");
let currentActive = 1;
next.addEventListener("click", () => {
currentActive++;
if (currentActive > circles.length) {
currentActive = circles.length;
}
update();
});
prev.addEventListener("click", () => {
currentActive--;
if (currentActive < 1) {
currentActive = 1;
}
update();
});
function update() { //here is the part i need help with
}
const actives = document.querySelectorAll(".active");
progress.style.width =
((actives.length - 1) / (circles.length - 1)) * 100 + "%";
if (currentActive === 1) {
prev.disabled = true;
} else if (currentActive === circles.length) {
next.disabled = true;
} else {
prev.disabled = false;
next.disabled = false;
}
Im trying to write a function to update the html when the back or next button is pressed and i need to use the progress css class. I have no idea how to implement it.
You should be able to use the DOM control functions in JavaScript to fix your problem.
Send my answer. Sincerely
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Progress Steps</title>
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
:root {
--line-border-fill: #3498db;
--line-border-empty: #383838;
}
* {
box-sizing: border-box;
}
body {
background-color: #1f1f1f;
font-family: 'Muli', sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
text-align: center;
}
.progress-container {
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 30px;
max-width: 100%;
width: 350px;
}
.progress-container::before {
content: '';
background-color: var(--line-border-empty);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 100%;
z-index: -1;
}
.progress {
background-color: #3498db;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 4px;
width: 0%;
z-index: -1;
transition: 0.4s ease;
}
.circle {
background-color: #1f1f1f;
color:#e2e2e2;
border-radius: 50%;
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--line-border-empty);
transition: 0.4s ease;
}
.circle.active {
border-color: #3498db;
}
.btn {
background-color: #3498db;
color: #fff;
border: 0;
border-radius: 6px;
cursor: pointer;
font-family: inherit;
padding: 8px 30px;
margin: 5px;
font-size: 14px;
}
.btn:active {
transform: scale(0.98);
}
.btn:focus {
outline: 0;
}
.btn:disabled {
background-color: var(--line-border-empty);
cursor: not-allowed;
}
</style>
<body>
<div class="container">
<div id="content" style="border: 1px solid black; margin: 0 auto; width: 300px; height: 100px; background-color: white;">
Content 1
</div>
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<button class="btn" id="prev" disabled>Prev</button>
<button class="btn" id="next">Next</button>
</div>
</body>
<script>
const progress = document.getElementById("progress");
const prev = document.getElementById("prev");
const next = document.getElementById("next");
const content = document.getElementById("content"); // added
const circles = document.querySelectorAll(".circle");
let currentActive = 1;
next.addEventListener("click", () => {
currentActive++;
if (currentActive > circles.length) {
currentActive = circles.length;
}
update(currentActive);
});
prev.addEventListener("click", () => {
currentActive--;
if (currentActive < 1) {
currentActive = 1;
}
update(currentActive);
});
function update(currentStep) {
//here is the part I fixed
let stepItems = document.getElementsByClassName("circle");
for (let i = 0; i < stepItems.length; i++) {
const stepItem = stepItems[i];
if (stepItem.textContent == currentStep) {
stepItem.classList.toggle("active");
}
}
prev.toggleAttribute("disabled", false);
next.toggleAttribute("disabled", false);
if (currentStep == 1) prev.setAttribute("disabled", true);
if (currentStep == 4) next.setAttribute("disabled", true);
content.innerText = "Content" + currentStep;
}
const actives = document.querySelectorAll(".active");
progress.style.width = ((actives.length - 1) / (circles.length - 1)) * 100 + "%";
if (currentActive === 1) {
prev.disabled = true;
} else if (currentActive === circles.length) {
next.disabled = true;
} else {
prev.disabled = false;
next.disabled = false;
}
</script>
</html>
Im not that good at coding but i try some ways to put a transition effect but didint work.
Can you guys help me ?I will appreciate it a lot..........................................................................................................................................................................................................................................................................................................
Java
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function() {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function() {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
css
body,
#slider,
.wrap,
.slide-content {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow-x: hidden;
}
.wrap {
position: relative;
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* .slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
} */
.delimitare {
background-color: r#141313ed;
width: 100%;
height: 100%;
padding-left: 10%;
padding-right: 10%;
}
.content-interior {
background-color: #141313;
width: 100%;
height: 100%;
}
.slide-content span {
font-size: 5rem;
color: #fff;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent #fff transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent #fff;
right: 0;
margin-right: 30px;
}
html
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
</div>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image Two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image Three</span>
</div>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
So far you're doing well!
There's a lot of different ways to accomplish a fading slide, but the CSS "transition" property is an easy way to do it.
The problem here, though, is that you cannot transition the "display" property. Going from "display: block" to "display: none" cannot be transitioned. It either displays or doesn't. On or off, like a boolean.
I have put together a working example by updating the code you provided. Instead of using display to switch between slides, I updated it to change the opacity instead. Opacity can be transitioned, so I added the CSS to handle that as well.
(I also had to set the slide position to absolute so the slides stacked on top of each other.)
Quick side note: when you initially shared your code, you labeled your JavaScript as "Java". Java and JavaScript are two different coding languages so be careful with that in the future.
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
// Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.opacity = "0";
}
}
// Init slider
function startSlide() {
reset();
sliderImages[0].style.opacity = "1";
}
// Show prev
function slideLeft() {
reset();
sliderImages[current - 1].style.opacity = "1";
current--;
}
// Show next
function slideRight() {
reset();
sliderImages[current + 1].style.opacity = "1";
current++;
}
// Left arrow click
arrowLeft.addEventListener("click", function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
// Right arrow click
arrowRight.addEventListener("click", function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
body,
#slider,
.wrap,
.slide-content {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow-x: hidden;
background-color: blue;
}
.wrap {
position: relative;
}
.slide {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.5s ease;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.delimitare {
background-color: r#141313ed;
width: 100%;
height: 100%;
padding-left: 10%;
padding-right: 10%;
}
.content-interior {
background-color: #141313;
width: 100%;
height: 100%;
}
.slide-content span {
font-size: 5rem;
color: #fff;
}
.arrow {
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -35px;
width: 0;
height: 0;
border-style: solid;
z-index: 2;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent #fff transparent transparent;
left: 0;
margin-left: 30px;
}
#arrow-right {
border-width: 30px 0 30px 40px;
border-color: transparent transparent transparent #fff;
right: 0;
margin-right: 30px;
}
<div class="wrap">
<div id="arrow-left" class="arrow">
</div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<span>Image One</span>
</div>
</div>
<div class="slide slide2">
<div class="slide-content">
<span>Image Two</span>
</div>
</div>
<div class="slide slide3">
<div class="slide-content">
<span>Image Three</span>
</div>
</div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
I am a beginner and want to ask how do I move the arrows further apart from the text? Like the left arrow more to the left and the right arrow more to the right? When on full desktop view I want the arrow to be further away from the middle and stay in that position when on response mode. It seems like whatever I do it doesn't work, padding, margin etc.
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
//Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// initialize slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
//show previous
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
//show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
//left arrow click
arrowLeft.addEventListener("click", function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
//right arrow click
arrowRight.addEventListener("click", function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
#slider,
.wrap,
.slide-content {
max-width: 1000px;
position: relative;
margin: auto;
}
.wrap {
position: relative;
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.arrow {
cursor: pointer;
position: absolute;
top: 46%;
width: 0;
height: 0;
border-style: solid;
z-index: 1;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent #cccccc transparent transparent;
left: 0;
}
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent #cccccc;
right: 0;
}
/* Caption text */
.text {
position: relative;
color: #212529;
font-size: 18px;
top: 28px;
width: 100%;
text-align: center;
font-family: "Roboto Condensed", sans-serif;
font-weight: 400;
}
<main class="main">
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="arrow-right" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<div id="container">
<img class="background-image" src="image1" alt="">
</div>
<div class="text">image1</div>
</div>
</div>
<div class="slide slide1">
<div class="slide-content">
<div id="container">
<img class="background-image" src="image2" alt="">
</div>
<div class="text">image2</div>
</div>
</div>
</div>
</div>
</main>
Change the max-width: 1000px; to max-width: 100%;
Currently the width of your slider is at 1000 pixels. If you change it or remove it, then the slider will take up the space and do 100% instead of 1000 pixels
That means, change this:
#slider,
.wrap,
.slide-content {
max-width: 1000px;
position: relative;
margin: auto;
}
to this:
#slider,
.wrap,
.slide-content {
max-width: 100%;
position: relative;
margin: auto;
}
Remove max-width from wrap, .slide-content and #slider
let sliderImages = document.querySelectorAll(".slide"),
arrowLeft = document.querySelector("#arrow-left"),
arrowRight = document.querySelector("#arrow-right"),
current = 0;
//Clear all images
function reset() {
for (let i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = "none";
}
}
// initialize slider
function startSlide() {
reset();
sliderImages[0].style.display = "block";
}
//show previous
function slideLeft() {
reset();
sliderImages[current - 1].style.display = "block";
current--;
}
//show next
function slideRight() {
reset();
sliderImages[current + 1].style.display = "block";
current++;
}
//left arrow click
arrowLeft.addEventListener("click", function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
//right arrow click
arrowRight.addEventListener("click", function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
startSlide();
#slider,
.wrap,
.slide-content {
position: relative;
margin: auto;
}
.wrap {
position: relative;
}
.slide-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.arrow {
cursor: pointer;
position: absolute;
top: 46%;
width: 0;
height: 0;
border-style: solid;
z-index: 1;
}
#arrow-left {
border-width: 30px 40px 30px 0;
border-color: transparent #cccccc transparent transparent;
left: 0;
}
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent #cccccc;
right: 0;
}
/* Caption text */
.text {
position: relative;
color: #212529;
font-size: 18px;
top: 28px;
width: 100%;
text-align: center;
font-family: "Roboto Condensed", sans-serif;
font-weight: 400;
}
<main class="main">
<div class="wrap">
<div id="arrow-left" class="arrow"></div>
<div id="arrow-right" class="arrow"></div>
<div id="slider">
<div class="slide slide1">
<div class="slide-content">
<div id="container">
<img class="background-image" src="image1" alt="">
</div>
<div class="text">image1</div>
</div>
</div>
<div class="slide slide1">
<div class="slide-content">
<div id="container">
<img class="background-image" src="image2" alt="">
</div>
<div class="text">image2</div>
</div>
</div>
</div>
</div>
</main>
Remove max-width: 1000px from #slider, .wrap, .slide-content.
#slider,
.wrap,
.slide-content {
position: relative;
margin: auto;
}
Then the arrows will always be at the side of the page, no matter how wide it is - And therefore as far away from the text/image as possible.
How do I get the text that says "this is just some placeholder text that should let you scroll" to be under the title? I thought seeing as there is a <br> tag after the title, the text would go under it?
(in case it's unclear in the snippet, the background image has an arrow pointing down, indicating that the user should scroll down upon arriving at the home page).
$(document ).ready(function(){
var counter = 0;
$('#menuIcon').click(function(){
counter+=1;
if (counter == 3){
}
});
});
var open = false;
function Drop(n) {
var i;
if (open == false) {
for (i = n; i < 5; i++) {
Drp(i)
}
open = true
} else if (open == true) {
for (i = n; i < 5; i++) {
Cls(i)
}
open = false
}
}
function Drp(n) {
var elem = document.getElementsByClassName("menu-con")[n];
var pos = -1 * window.innerHeight - n * 100;
var id = setInterval(frame, 5);
function frame() {
if (pos >= -10) {
clearInterval(id);
elem.style.top = 0 + 'px';
} else {
pos += 10;
elem.style.top = pos + 'px';
}
}
}
function Cls(n) {
var elems = document.getElementsByClassName("menu-con")[n];
var poss = 0;
var ids = setInterval(frames, 5);
function frames() {
if (poss <= -1 * window.innerHeight) {
clearInterval(ids);
elems.style.top = -1 * window.innerHeight + 'px';
} else {
poss += -7 - n * 2;
elems.style.top = poss + 'px';
}
}
}
* {
box-sizing: border-box;
max-width: 100%;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: bold;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
background-image:url(foo.png);
background-repeat:no-repeat;
background-position: center;
background-size:cover;
background-attachment: fixed;
}
.menuBox {
display: none;
}
.menuBox a {
text-decoration: none;
color: black;
}
.menu-icon {
width: 50px;
height: 50px;
position: fixed;
top: 0;
right: 0;
margin: 10px 15px;
transform: scale(0.8);
padding: 0;
cursor: pointer;
z-index: 20
}
.menu-bar {
width: 50px;
height: 5px;
background: rgb(190, 190, 190);
position: absolute;
transition: all 0.3s;
font-weight: bold;
font-size: 50px
}
.menu-bar1 {
margin-top: 9px
}
.menu-bar2 {
margin-top: 23px
}
.menu-bar3 {
margin-top: 37px
}
.menu-icon.hover .menu-bar1 {
-webkit-transform: rotate(45deg) scaleX(0.7);
margin-top: 22px;
}
.menu-icon.hover .menu-bar2 {
opacity: 0
}
.menu-icon.hover .menu-bar3 {
-webkit-transform: rotate(-45deg) scaleX(0.7);
margin-top: 22px;
}
.menu {
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.menu-con {
-webkit-flex-grow: 1;
flex-basis: 0;
flex-grow: 1;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
position: relative;
top: -100%;
transition: all 0.5s
}
.menu-con a:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
opacity: 1;
background: rgba(0, 0, 0, 0);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.menu-con:hover a:before {
background: rgba(0, 0, 0, 0.2)
}
.menu-con a {
height: 20px;
-webkit-align-self: center;
color: white;
font-size: 25px;
z-index: 2;
cursor: pointer
}
#media screen and (max-width: 600px) {
.menu-con {
min-width: 50%
}
}
#media screen and (max-width: 350px) {
.menu-con {
min-width: 100%
}
}
a {
text-decoration: none;
}
.title {
display:flex;
justify-content: center;
align-items:center;
font-size:50px;
color:white;
}
.homeText {
background-color:darkblue;
display:flex;
justify-content:center;
}
<html class="animated pulse">
<head>
<title>Ben Cohen</title>
<link href=style.css rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
<link href="animate.css" rel=stylesheet>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
<link rel=icon href=icon.png>
</head>
<body>
<div class="menu-icon" onclick="this.classList.toggle('hover');Drop(0)" id="menuIcon">
<div class="menu-bar menu-bar1"></div>
<div class="menu-bar menu-bar2"></div>
<div class="menu-bar menu-bar3"></div>
</div>
<div class="menu">
<div class="menu-con" style="background:red;" href="yayitworks.html">
HOME
</div>
<div class="menu-con" style="background:blue" id="hello">
<a>PORTFOLIO</a>
</div>
<div class="menu-con" style="background:darkorange;">
<a>POUS</a>
</div>
<div class="menu-con" style="background:green;">
<a>HOMEWORK</a>
</div>
<div class="menu-con" style="background:white;">
<a style="color:black">TEST PAGE</a>
</div>
</div>
<div class="homeText">
<div class="title">
THIS IS A TITLE.
</div><br>
<p>this is just some placeholder text that should let you scroll</p>
</div>
</body></html>
Remove display: flex; from your .hometext CSS.
.hometext {
background-color:darkblue;
justify-content:center;
}
You can also specify the flex direction:
.hometext {
background-color:darkblue;
justify-content:center;
display: flex;
flex-direction: column;
More info here...
https://www.w3schools.com/Css/css3_flexbox.asp
& here...
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
I want bullets move when i clicked arrow,i tried to think how to code it but my knowledge and experience is still not enough so i really need help from people.
$(document).ready(function () {
$("#mainTopics").click(function (e) {
e.preventDefault();
e.stopPropagation();
$("#sub-topics").toggle();
});
$("html").on('click', function () {
if ($("#sub-topics").is(':visible')) {
$("#sub-topics").toggle();
}
});
});
var sliderImages = document.querySelectorAll('.slide');
var arrowLeft = document.querySelector('#arrow-left');
var arrowRight = document.querySelector('#arrow-right');
var arrowSlide = document.querySelectorAll('.arrow');
var sliderBullets = document.querySelectorAll('.bullets');
var current = 0;
//reset slideimages
function resetSlide() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
//slide left
function slideLeft() {
resetSlide();
sliderImages[current - 1].style.display = 'block';
current--;
}
//slide right
function slideRight() {
resetSlide();
sliderImages[current + 1].style.display = 'block';
current++;
}
//arrow left
arrowLeft.addEventListener('click', function () {
if (current === 0) {
current = sliderImages.length;
}
slideLeft();
});
//arrow right
arrowRight.addEventListener('click', function () {
if (current === sliderImages.length - 1) {
current = -1;
}
slideRight();
});
//start to slideimages
function startSlide() {
resetSlide();
sliderImages[0].style.display = 'block';
}
//called startslide function
startSlide();
body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 800px;
height: 400px;
margin: auto;
margin-top: 40px;
}
.slide-contain {
position: absolute;
left: 50%;
bottom: 50%;
transform: translate3d(-50%,-50%,0);
text-align: center;
}
.slide-contain span {
color: white;
}
/*arrow*/
.arrow {
position: absolute;
cursor: pointer;
top: 200px;
width: 0;
height: 0;
border-style: solid;
}
.arrow:hover {
background-color: #e0dede;
transition: background-color 0.6s ease;
}
/*arrow-left*/
#arrow-left {
position: absolute;
border-width: 30px 40px 30px 0px;
border-color: transparent gray transparent transparent;
left: 0;
margin-left: 300px;
}
/*arrow-right*/
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent gray;
right: 0;
margin-right: 300px;
}
/*bullets*/
#slidebullet {
position: relative;
top: -30px;
text-align: center;
}
.bullets {
display: inline-block;
background-color: gray;
width: 15px;
height: 15px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.6s ease;
}
.active, .bullets:hover {
background-color: #e0dede;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header></header>
<nav>
<div id="main-menu">
<ul>
<li>Logo</li>
<li>Home</li>
<li>
Topics
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="slidebullet">
<div id="bullet1" class="bullets"></div>
<div id="bullet2" class="bullets"></div>
<div id="bullet3" class="bullets"></div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
Above is the code that i have learned from website asked people and youtube.
My website now the arrows work fine can change to other slides,but the bullets are not moving the same time like arrows.
Your goal can be reached by adding the following javascript code to your js file:
for (var i=0 ;i<sliderBullets.length;i++)
{
bullet=sliderBullets[i];
bullet.addEventListener("click",function(){
var i=this.id;
i=i.replace("bullet","");
current=parseInt(i)-1;
resetSlide();
sliderImages[current].style.display = 'block';
});
}
Try this one , its very easy .
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h