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>
Related
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.
In the code below I want to add 1 to the page variable but every time I click on next button it adds 2 to the variable.
Code in Codepen
var slides = document.querySelectorAll('.slides');
var dots = document.querySelectorAll('.dot');
var page = 0;
function Swiper(page) {
if (page > slides.length) page = 0;
if (page < 0) page = slides.length;
for (let i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
slides[page].classList.add('active');
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove('active-dot');
}
dots[page].classList.add('active-dot');
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove('active-dot');
}
dots[page].classList.add('active-dot');
}
function Slider(slider) {
console.log(page)
console.log(slider)
Swiper(page += slider);
console.log(page += slider)
}
function currentSlide(pagination) {
Swiper(page = pagination);
}
* {
font-family: Raleway;
box-sizing: border-box;
outline: none;
}
body {
min-height: 100vh;
margin: 0;
padding: 16px;
}
/* body>h1,body>h2,body>h3,body>h4,body>h5,body>h6,body>p{
padding-left: 16px;
.btnload:hover{
background-color: #4169E1;
} */
.flexbox {
display: flex;
flex-wrap: wrap;
}
.col-25 {
flex: 25%;
}
.col-50 {
flex: 50%;
}
.col-75 {
flex: 75%;
}
.col-100 {
flex: 100%;
}
button,
input {
outline: none;
}
.container {
max-width: 1000px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.slides {
width: 100%;
height: 100%;
position: absolute;
display: none;
animation: slide 0.4s ease;
}
#keyframes slide {
0% {
opacity: 0.2
}
100% {
opacity: 1
}
}
.active {
display: block;
}
.slides .page-number {
position: absolute;
top: 0;
left: 0;
padding: 12px 8px;
color: white;
}
.slides .desc {
color: white;
position: absolute;
top: 310px;
left: 50%;
}
img {
width: 100%;
height: auto;
}
.container a {
padding: 16px;
color: white;
text-decoration: none;
transition: 0.4s;
font-size: 20px;
top: 150px;
position: absolute;
}
img {
width: 100%;
height: auto;
}
.container a:hover {
background-color: rgba(0, 0, 0, 0.616);
}
.container #right-slide {
right: 0px;
}
.container #left-slide {
left: 0px;
}
.pagination {
display: flex;
max-width: 1000px;
height: 100px;
position: relative;
top: 380px;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.pagination .dot {
border-radius: 50%;
height: 15px;
width: 15px;
cursor: pointer;
margin: 2px;
transition: 0.6s;
}
.pagination .dot:hover {
background-color: rgb(138, 138, 138);
}
.dot {
background-color: #ddd;
}
.active-dot {
background-color: rgb(138, 138, 138);
}
.no-active {
background-color: #ddd;
}
<div class="container">
<div class="slides active">
<div class="page-number">1/4</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" alt="">
<div class="desc">Caption One</div>
</div>
<div class="slides">
<div class="page-number">2/4</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="">
<div class="desc">Caption Two</div>
</div>
<div class="slides">
<div class="page-number">3/4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" alt="">
<div class="desc">Caption Three</div>
</div>
<div class="slides">
<div class="page-number">4/4</div>
<img src="Images/img_mountains_wide.jpg" alt="">
<div class="desc">Caption Four</div>
</div>
<a onclick="Slider(-1)" id="left-slide" href="#">❮</a>
<a onclick="Slider(+1)" id="right-slide" href="#">❯</a>
</div>
<div class="pagination">
<span class="dot dot-color active-dot" onclick="currentSlide(0, event)"></span>
<span class="dot dot-color" onclick="currentSlide(1, event)"></span>
<span class="dot dot-color" onclick="currentSlide(2, event)"></span>
<span class="dot dot-color" onclick="currentSlide(3, event)"></span>
</div>
Swiper(page += slider);
console.log(page += slider)
First you add slider to page (updating the value of page) and pass the result to Swiper.
Then you add slider to (the new value of) page (updating the value of page again) and pass the result to console.log.
As a rule of thumb, combining operations that modify variables with operations that pass them to functions is a good way to confuse yourself.
You might want to split out the actions for clarity.
page += slider;
Swiper(page);
console.log(page);
I think because of this line console.log(page += slider)
It makes the page increase 2 times
function Slider(slider) {
console.log(page)
console.log(slider)
Swiper(page += slider);
console.log(page += slider) // <<<--------------- This line
}
I have a small problem. Div slides and reaching end it's quickly show div 1 without pause. Div 5 cannot see.
$(function(){
var width = '100vw';
var speed = 1500;
var pause = 3000;
var current = 1;
var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
setInterval(function(){
$slides.animate({'margin-left': '-='+width}, speed, function(){
current++;
if(current == $slide.length){
$slides.css('margin-left', 0);
current = 1;
}
});
}, pause);
});
But if I add delay
if(current == $slide.length){
$(this).delay(pause).queue(function(){
$slides.css('margin-left', 0);
});
current = 1;
}
$(function(){
var width = '100vw';
var speed = 1500;
var pause = 3000;
var current = 1;
var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
setInterval(function(){
$slides.animate({'margin-left': '-='+width}, speed, function(){
current++;
if(current == $slide.length){
$(this).delay(pause).queue(function(){
$slides.css('margin-left', 0);
});
current = 1;
}
});
}, pause);
});
.slider {
width: 100%;
height:auto;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 1px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: #bbb;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100vw;
height: 100vh;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
margin: 0 0 0.5rem 0;
position: relative;
border:1px solid green;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #666;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slides">
<div id="slide-1" class="slide">Slide 1</div>
<div id="slide-2" class="slide">Slide 2</div>
<div id="slide-3" class="slide">Slide 3</div>
<div id="slide-4" class="slide">Slide 4</div>
<div id="slide-5" class="slide">Slide 5</div>
</div>
</div>
It's show Div 5 like it needed, but after showing div 1 it's not sliding anymore.
So what can I do to keep looping and shows each div given time?
Maybe someone can show how can make slider slide backwards after reaching last div and slides back to div one?
First : BAD solution for your problem : ( go to Second)
Your animation code stucks in a queue once the current == $slide.length , you should pass the next function as argument in the queue calback then use next() to trigger other function . as below :
if(current == $slide.length){
$(this).delay(pause).queue(function(next){ //<--- here next argument
$slides.css('margin-left', 0);
next(); // <----- next call
});
current = 1;
}
but this will not make the annimation work as expected
Second : proper simple solution
What I suggest is, set the animation left value as variable, then check if it's the last so slide to 0 other wise continue left view-width sliding
See working snippet :
$(function(){
var width = '100vw';
var speed = 1500;
var pause = 3000;
var current = 1;
var $slider = $('.slider');
var $slides = $slider.find('.slides');
var $slide = $slides.find('.slide');
var leftAnnime = '-='+width;
setInterval(function(){
$slides.animate({'margin-left': leftAnnime }, speed, function(){
current++;
if( current == $slide.length ) {
leftAnnime = 0;
current = 0;
} else {
leftAnnime = '-='+width;
}
});
}, pause);
});
.slider {
width: 100%;
height:auto;
text-align: center;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*
scroll-snap-points-x: repeat(300px);
scroll-snap-type: mandatory;
*/
}
.slides::-webkit-scrollbar {
width: 1px;
height: 10px;
}
.slides::-webkit-scrollbar-thumb {
background: #bbb;
}
.slides::-webkit-scrollbar-track {
background: transparent;
}
.slides > div {
scroll-snap-align: start;
flex-shrink: 0;
width: 100vw;
height: 100vh;
background: #eee;
transform-origin: center center;
transform: scale(1);
transition: transform 0.5s;
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
}
.slides > div:target {
/* transform: scale(0.8); */
}
.author-info {
background: rgba(0, 0, 0, 0.75);
color: white;
padding: 0.75rem;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
margin: 0;
}
.author-info a {
color: white;
}
img {
object-fit: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slider > a {
display: inline-flex;
width: 1.5rem;
height: 1.5rem;
background: white;
text-decoration: none;
align-items: center;
justify-content: center;
margin: 0 0 0.5rem 0;
position: relative;
border:1px solid green;
}
.slider > a:active {
top: 1px;
}
.slider > a:focus {
background: #666;
}
/* Don't need button navigation */
#supports (scroll-snap-type) {
.slider > a {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
<div class="slides">
<div id="slide-1" class="slide">Slide 1</div>
<div id="slide-2" class="slide">Slide 2</div>
<div id="slide-3" class="slide">Slide 3</div>
<div id="slide-4" class="slide">Slide 4</div>
<div id="slide-5" class="slide">Slide 5</div>
</div>
</div>
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>
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