Make dots active on Slider The Next CEO of Stack OverflowMake a div fill the height of the remaining screen spaceHow to make div not larger than its contents?Make a div into a linkHow do I make the first letter of a string uppercase in JavaScript?How to make a div 100% height of the browser window?Make the cursor a hand when a user hovers over a list itemHow do I make a placeholder for a 'select' box?Make body have 100% of the browser heightHow to make Twitter Bootstrap menu dropdown on hover rather than clickHow can I make Bootstrap columns all the same height?
Inappropriate reference requests from Journal reviewers
How do I transpose the first and deepest levels of an arbitrarily nested array?
What happened in Rome, when the western empire "fell"?
How to invert MapIndexed on a ragged structure? How to construct a tree from rules?
What does convergence in distribution "in the Gromov–Hausdorff" sense mean?
Does it take more energy to get to Venus or to Mars?
Why am I allowed to create multiple unique pointers from a single object?
Plot of histogram similar to output from @risk
If Nick Fury and Coulson already knew about aliens (Kree and Skrull) why did they wait until Thor's appearance to start making weapons?
What connection does MS Office have to Netscape Navigator?
Won the lottery - how do I keep the money?
If the heap is zero-initialized for security, then why is the stack merely uninitialized?
Would this house-rule that treats advantage as a +1 to the roll instead (and disadvantage as -1) and allows them to stack be balanced?
Is it ever safe to open a suspicious html file (e.g. email attachment)?
Do I need to enable Dev Hub in my PROD Org?
Preparing Indesign booklet with .psd graphics for print
What is the result of assigning to std::vector<T>::begin()?
Anatomically Correct Strange Women In Ponds Distributing Swords
Help understanding this unsettling image of Titan, Epimetheus, and Saturn's rings?
Indicator light circuit
How do I go from 300 unfinished/half written blog posts, to published posts?
Rotate a column
In excess I'm lethal
Written every which way
Make dots active on Slider
The Next CEO of Stack OverflowMake a div fill the height of the remaining screen spaceHow to make div not larger than its contents?Make a div into a linkHow do I make the first letter of a string uppercase in JavaScript?How to make a div 100% height of the browser window?Make the cursor a hand when a user hovers over a list itemHow do I make a placeholder for a 'select' box?Make body have 100% of the browser heightHow to make Twitter Bootstrap menu dropdown on hover rather than clickHow can I make Bootstrap columns all the same height?
I have this Slider example created with pure JS.
The slider is working great. The only thing left to do would be to activate the three dots so when the 1st slide opens, 1st dot activates, showing different color than the other dots, and so on. Also, you should be able to open the correct slide when clicking dots, so 1st dot opens 1st slide, 2nd dot 2nd slide, and so on.
Could you help me to achieve this? You can find the source code below.
const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');
const offers = document.getElementById('offers');
const link = document.getElementById('links');
let colors = ['#7f86ff', '#2932d1', '#00067f'];
let currentSlide = 0;
let texts = ['Change1', 'Change2', 'Change3'];
let currentText = 0;
let links = ['<a href="https:www.google.com">Link1</a>', '<a href="https:www.is.fi">Link2</a>', '<a href="https:www.betsson.com">Link3</a>'];
let currentLink = 0;
function updateSlide(direction)
currentSlide =
(colors.length + currentSlide + direction)
% colors.length;
container.style.backgroundColor = colors[currentSlide];
container.animate([opacity:'0.1', opacity:'1.0'],
duration: 200, fill:'forwards')
function updateText(direction)
currentText =
(texts.length + currentText + direction)
% texts.length;
offers.innerHTML = texts[currentText];
offers.animate([transform:'translateY(-50px)', opacity:'0.0', transform:'translateY(0)', opacity:'1.0'],
duration: 200, fill:'forwards')
function updateLink(direction)
currentLink =
(links.length + currentLink + direction)
% links.length;
link.innerHTML = links[currentLink];
link.animate([transform:'scale(0,0)', transform:'scale(1.1)'],
duration: 200, fill:'forwards')
updateSlide(0);
updateText(0);
updateLink(0);
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
function nextSlide()
updateSlide(+1);
updateText(+1);
updateLink(+1);
clearInterval(myInterval);
function prevSlide()
updateSlide(-1);
updateText(-1);
updateLink(-1);
clearInterval();
clearInterval(myInterval);
var myInterval = window.setInterval(function()
updateSlide(+1),updateText(+1),updateLink(+1); ,
8000);body
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
.images
background-color: #4047c9;
flex: 0 0 80%;
min-height: 70vh;
border-radius: 10px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
color: white;
#links
text-decoration: none;
color: white;
border: solid 2px white;
border-radius: 3px;
padding: 5px 10px;
#links:hover
background-color: #000238;
a
color: white;
text-decoration: none;
.dots
display: flex;
margin-top: 120px;
margin-bottom: 50px;
#dot1, #dot2, #dot3
width: 20px;
height: 20px;
background-color: rgb(147, 151, 249);
border-radius: 50%;
margin: 0px 5px;
cursor: pointer;
#dot1:active, #dot2:active, #dot3:active
background-color: #fff;
.btn
display: inline-block;
background: white;
color: black;
padding: 10px;
border: none;
cursor: pointer;
.prevBtn
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
.nextBtn
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%);
.btn:active
background-color: grey;
color: white;
.btn:hover
background-color: grey;
color: white;
<body>
<div class="images">
<button type="button" class="btn prevBtn">Prev Btn</button>
<button type="button" class="btn nextBtn">Next Btn</button>
<h1 id="offers">Changing text</h1>
<a href="#" id="links">Links</a>
<div class="dots">
<span id="dot1"></span>
<span id="dot2"></span>
<span id="dot3"></span>
</div>
</div>
</body>javascript html css slider
asked Mar 7 at 15:40
TaneTane
215
add a comment |
I have this Slider example created with pure JS.
The slider is working great. The only thing left to do would be to activate the three dots so when the 1st slide opens, 1st dot activates, showing different color than the other dots, and so on. Also, you should be able to open the correct slide when clicking dots, so 1st dot opens 1st slide, 2nd dot 2nd slide, and so on.
Could you help me to achieve this? You can find the source code below.
const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');
const offers = document.getElementById('offers');
const link = document.getElementById('links');
let colors = ['#7f86ff', '#2932d1', '#00067f'];
let currentSlide = 0;
let texts = ['Change1', 'Change2', 'Change3'];
let currentText = 0;
let links = ['<a href="https:www.google.com">Link1</a>', '<a href="https:www.is.fi">Link2</a>', '<a href="https:www.betsson.com">Link3</a>'];
let currentLink = 0;
function updateSlide(direction)
currentSlide =
(colors.length + currentSlide + direction)
% colors.length;
container.style.backgroundColor = colors[currentSlide];
container.animate([opacity:'0.1', opacity:'1.0'],
duration: 200, fill:'forwards')
function updateText(direction)
currentText =
(texts.length + currentText + direction)
% texts.length;
offers.innerHTML = texts[currentText];
offers.animate([transform:'translateY(-50px)', opacity:'0.0', transform:'translateY(0)', opacity:'1.0'],
duration: 200, fill:'forwards')
function updateLink(direction)
currentLink =
(links.length + currentLink + direction)
% links.length;
link.innerHTML = links[currentLink];
link.animate([transform:'scale(0,0)', transform:'scale(1.1)'],
duration: 200, fill:'forwards')
updateSlide(0);
updateText(0);
updateLink(0);
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
function nextSlide()
updateSlide(+1);
updateText(+1);
updateLink(+1);
clearInterval(myInterval);
function prevSlide()
updateSlide(-1);
updateText(-1);
updateLink(-1);
clearInterval();
clearInterval(myInterval);
var myInterval = window.setInterval(function()
updateSlide(+1),updateText(+1),updateLink(+1); ,
8000);body
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
.images
background-color: #4047c9;
flex: 0 0 80%;
min-height: 70vh;
border-radius: 10px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
color: white;
#links
text-decoration: none;
color: white;
border: solid 2px white;
border-radius: 3px;
padding: 5px 10px;
#links:hover
background-color: #000238;
a
color: white;
text-decoration: none;
.dots
display: flex;
margin-top: 120px;
margin-bottom: 50px;
#dot1, #dot2, #dot3
width: 20px;
height: 20px;
background-color: rgb(147, 151, 249);
border-radius: 50%;
margin: 0px 5px;
cursor: pointer;
#dot1:active, #dot2:active, #dot3:active
background-color: #fff;
.btn
display: inline-block;
background: white;
color: black;
padding: 10px;
border: none;
cursor: pointer;
.prevBtn
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
.nextBtn
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%);
.btn:active
background-color: grey;
color: white;
.btn:hover
background-color: grey;
color: white;
<body>
<div class="images">
<button type="button" class="btn prevBtn">Prev Btn</button>
<button type="button" class="btn nextBtn">Next Btn</button>
<h1 id="offers">Changing text</h1>
<a href="#" id="links">Links</a>
<div class="dots">
<span id="dot1"></span>
<span id="dot2"></span>
<span id="dot3"></span>
</div>
</div>
</body>javascript html css slider
asked Mar 7 at 15:40
TaneTane
215
add a comment |
I have this Slider example created with pure JS.
The slider is working great. The only thing left to do would be to activate the three dots so when the 1st slide opens, 1st dot activates, showing different color than the other dots, and so on. Also, you should be able to open the correct slide when clicking dots, so 1st dot opens 1st slide, 2nd dot 2nd slide, and so on.
Could you help me to achieve this? You can find the source code below.
const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');
const offers = document.getElementById('offers');
const link = document.getElementById('links');
let colors = ['#7f86ff', '#2932d1', '#00067f'];
let currentSlide = 0;
let texts = ['Change1', 'Change2', 'Change3'];
let currentText = 0;
let links = ['<a href="https:www.google.com">Link1</a>', '<a href="https:www.is.fi">Link2</a>', '<a href="https:www.betsson.com">Link3</a>'];
let currentLink = 0;
function updateSlide(direction)
currentSlide =
(colors.length + currentSlide + direction)
% colors.length;
container.style.backgroundColor = colors[currentSlide];
container.animate([opacity:'0.1', opacity:'1.0'],
duration: 200, fill:'forwards')
function updateText(direction)
currentText =
(texts.length + currentText + direction)
% texts.length;
offers.innerHTML = texts[currentText];
offers.animate([transform:'translateY(-50px)', opacity:'0.0', transform:'translateY(0)', opacity:'1.0'],
duration: 200, fill:'forwards')
function updateLink(direction)
currentLink =
(links.length + currentLink + direction)
% links.length;
link.innerHTML = links[currentLink];
link.animate([transform:'scale(0,0)', transform:'scale(1.1)'],
duration: 200, fill:'forwards')
updateSlide(0);
updateText(0);
updateLink(0);
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
function nextSlide()
updateSlide(+1);
updateText(+1);
updateLink(+1);
clearInterval(myInterval);
function prevSlide()
updateSlide(-1);
updateText(-1);
updateLink(-1);
clearInterval();
clearInterval(myInterval);
var myInterval = window.setInterval(function()
updateSlide(+1),updateText(+1),updateLink(+1); ,
8000);body
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
.images
background-color: #4047c9;
flex: 0 0 80%;
min-height: 70vh;
border-radius: 10px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
color: white;
#links
text-decoration: none;
color: white;
border: solid 2px white;
border-radius: 3px;
padding: 5px 10px;
#links:hover
background-color: #000238;
a
color: white;
text-decoration: none;
.dots
display: flex;
margin-top: 120px;
margin-bottom: 50px;
#dot1, #dot2, #dot3
width: 20px;
height: 20px;
background-color: rgb(147, 151, 249);
border-radius: 50%;
margin: 0px 5px;
cursor: pointer;
#dot1:active, #dot2:active, #dot3:active
background-color: #fff;
.btn
display: inline-block;
background: white;
color: black;
padding: 10px;
border: none;
cursor: pointer;
.prevBtn
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
.nextBtn
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%);
.btn:active
background-color: grey;
color: white;
.btn:hover
background-color: grey;
color: white;
<body>
<div class="images">
<button type="button" class="btn prevBtn">Prev Btn</button>
<button type="button" class="btn nextBtn">Next Btn</button>
<h1 id="offers">Changing text</h1>
<a href="#" id="links">Links</a>
<div class="dots">
<span id="dot1"></span>
<span id="dot2"></span>
<span id="dot3"></span>
</div>
</div>
</body>javascript html css slider
asked Mar 7 at 15:40
TaneTane
215
I have this Slider example created with pure JS.
The slider is working great. The only thing left to do would be to activate the three dots so when the 1st slide opens, 1st dot activates, showing different color than the other dots, and so on. Also, you should be able to open the correct slide when clicking dots, so 1st dot opens 1st slide, 2nd dot 2nd slide, and so on.
Could you help me to achieve this? You can find the source code below.
const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');
const offers = document.getElementById('offers');
const link = document.getElementById('links');
let colors = ['#7f86ff', '#2932d1', '#00067f'];
let currentSlide = 0;
let texts = ['Change1', 'Change2', 'Change3'];
let currentText = 0;
let links = ['<a href="https:www.google.com">Link1</a>', '<a href="https:www.is.fi">Link2</a>', '<a href="https:www.betsson.com">Link3</a>'];
let currentLink = 0;
function updateSlide(direction)
currentSlide =
(colors.length + currentSlide + direction)
% colors.length;
container.style.backgroundColor = colors[currentSlide];
container.animate([opacity:'0.1', opacity:'1.0'],
duration: 200, fill:'forwards')
function updateText(direction)
currentText =
(texts.length + currentText + direction)
% texts.length;
offers.innerHTML = texts[currentText];
offers.animate([transform:'translateY(-50px)', opacity:'0.0', transform:'translateY(0)', opacity:'1.0'],
duration: 200, fill:'forwards')
function updateLink(direction)
currentLink =
(links.length + currentLink + direction)
% links.length;
link.innerHTML = links[currentLink];
link.animate([transform:'scale(0,0)', transform:'scale(1.1)'],
duration: 200, fill:'forwards')
updateSlide(0);
updateText(0);
updateLink(0);
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
function nextSlide()
updateSlide(+1);
updateText(+1);
updateLink(+1);
clearInterval(myInterval);
function prevSlide()
updateSlide(-1);
updateText(-1);
updateLink(-1);
clearInterval();
clearInterval(myInterval);
var myInterval = window.setInterval(function()
updateSlide(+1),updateText(+1),updateLink(+1); ,
8000);body
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
.images
background-color: #4047c9;
flex: 0 0 80%;
min-height: 70vh;
border-radius: 10px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
color: white;
#links
text-decoration: none;
color: white;
border: solid 2px white;
border-radius: 3px;
padding: 5px 10px;
#links:hover
background-color: #000238;
a
color: white;
text-decoration: none;
.dots
display: flex;
margin-top: 120px;
margin-bottom: 50px;
#dot1, #dot2, #dot3
width: 20px;
height: 20px;
background-color: rgb(147, 151, 249);
border-radius: 50%;
margin: 0px 5px;
cursor: pointer;
#dot1:active, #dot2:active, #dot3:active
background-color: #fff;
.btn
display: inline-block;
background: white;
color: black;
padding: 10px;
border: none;
cursor: pointer;
.prevBtn
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
.nextBtn
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%);
.btn:active
background-color: grey;
color: white;
.btn:hover
background-color: grey;
color: white;
<body>
<div class="images">
<button type="button" class="btn prevBtn">Prev Btn</button>
<button type="button" class="btn nextBtn">Next Btn</button>
<h1 id="offers">Changing text</h1>
<a href="#" id="links">Links</a>
<div class="dots">
<span id="dot1"></span>
<span id="dot2"></span>
<span id="dot3"></span>
</div>
</div>
</body>const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');
const offers = document.getElementById('offers');
const link = document.getElementById('links');
let colors = ['#7f86ff', '#2932d1', '#00067f'];
let currentSlide = 0;
let texts = ['Change1', 'Change2', 'Change3'];
let currentText = 0;
let links = ['<a href="https:www.google.com">Link1</a>', '<a href="https:www.is.fi">Link2</a>', '<a href="https:www.betsson.com">Link3</a>'];
let currentLink = 0;
function updateSlide(direction)
currentSlide =
(colors.length + currentSlide + direction)
% colors.length;
container.style.backgroundColor = colors[currentSlide];
container.animate([opacity:'0.1', opacity:'1.0'],
duration: 200, fill:'forwards')
function updateText(direction)
currentText =
(texts.length + currentText + direction)
% texts.length;
offers.innerHTML = texts[currentText];
offers.animate([transform:'translateY(-50px)', opacity:'0.0', transform:'translateY(0)', opacity:'1.0'],
duration: 200, fill:'forwards')
function updateLink(direction)
currentLink =
(links.length + currentLink + direction)
% links.length;
link.innerHTML = links[currentLink];
link.animate([transform:'scale(0,0)', transform:'scale(1.1)'],
duration: 200, fill:'forwards')
updateSlide(0);
updateText(0);
updateLink(0);
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
function nextSlide()
updateSlide(+1);
updateText(+1);
updateLink(+1);
clearInterval(myInterval);
function prevSlide()
updateSlide(-1);
updateText(-1);
updateLink(-1);
clearInterval();
clearInterval(myInterval);
var myInterval = window.setInterval(function()
updateSlide(+1),updateText(+1),updateLink(+1); ,
8000);body
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
.images
background-color: #4047c9;
flex: 0 0 80%;
min-height: 70vh;
border-radius: 10px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
color: white;
#links
text-decoration: none;
color: white;
border: solid 2px white;
border-radius: 3px;
padding: 5px 10px;
#links:hover
background-color: #000238;
a
color: white;
text-decoration: none;
.dots
display: flex;
margin-top: 120px;
margin-bottom: 50px;
#dot1, #dot2, #dot3
width: 20px;
height: 20px;
background-color: rgb(147, 151, 249);
border-radius: 50%;
margin: 0px 5px;
cursor: pointer;
#dot1:active, #dot2:active, #dot3:active
background-color: #fff;
.btn
display: inline-block;
background: white;
color: black;
padding: 10px;
border: none;
cursor: pointer;
.prevBtn
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
.nextBtn
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%);
.btn:active
background-color: grey;
color: white;
.btn:hover
background-color: grey;
color: white;
<body>
<div class="images">
<button type="button" class="btn prevBtn">Prev Btn</button>
<button type="button" class="btn nextBtn">Next Btn</button>
<h1 id="offers">Changing text</h1>
<a href="#" id="links">Links</a>
<div class="dots">
<span id="dot1"></span>
<span id="dot2"></span>
<span id="dot3"></span>
</div>
</div>
</body>const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');
const offers = document.getElementById('offers');
const link = document.getElementById('links');
let colors = ['#7f86ff', '#2932d1', '#00067f'];
let currentSlide = 0;
let texts = ['Change1', 'Change2', 'Change3'];
let currentText = 0;
let links = ['<a href="https:www.google.com">Link1</a>', '<a href="https:www.is.fi">Link2</a>', '<a href="https:www.betsson.com">Link3</a>'];
let currentLink = 0;
function updateSlide(direction)
currentSlide =
(colors.length + currentSlide + direction)
% colors.length;
container.style.backgroundColor = colors[currentSlide];
container.animate([opacity:'0.1', opacity:'1.0'],
duration: 200, fill:'forwards')
function updateText(direction)
currentText =
(texts.length + currentText + direction)
% texts.length;
offers.innerHTML = texts[currentText];
offers.animate([transform:'translateY(-50px)', opacity:'0.0', transform:'translateY(0)', opacity:'1.0'],
duration: 200, fill:'forwards')
function updateLink(direction)
currentLink =
(links.length + currentLink + direction)
% links.length;
link.innerHTML = links[currentLink];
link.animate([transform:'scale(0,0)', transform:'scale(1.1)'],
duration: 200, fill:'forwards')
updateSlide(0);
updateText(0);
updateLink(0);
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
function nextSlide()
updateSlide(+1);
updateText(+1);
updateLink(+1);
clearInterval(myInterval);
function prevSlide()
updateSlide(-1);
updateText(-1);
updateLink(-1);
clearInterval();
clearInterval(myInterval);
var myInterval = window.setInterval(function()
updateSlide(+1),updateText(+1),updateLink(+1); ,
8000);body
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
.images
background-color: #4047c9;
flex: 0 0 80%;
min-height: 70vh;
border-radius: 10px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
color: white;
#links
text-decoration: none;
color: white;
border: solid 2px white;
border-radius: 3px;
padding: 5px 10px;
#links:hover
background-color: #000238;
a
color: white;
text-decoration: none;
.dots
display: flex;
margin-top: 120px;
margin-bottom: 50px;
#dot1, #dot2, #dot3
width: 20px;
height: 20px;
background-color: rgb(147, 151, 249);
border-radius: 50%;
margin: 0px 5px;
cursor: pointer;
#dot1:active, #dot2:active, #dot3:active
background-color: #fff;
.btn
display: inline-block;
background: white;
color: black;
padding: 10px;
border: none;
cursor: pointer;
.prevBtn
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
.nextBtn
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%);
.btn:active
background-color: grey;
color: white;
.btn:hover
background-color: grey;
color: white;
<body>
<div class="images">
<button type="button" class="btn prevBtn">Prev Btn</button>
<button type="button" class="btn nextBtn">Next Btn</button>
<h1 id="offers">Changing text</h1>
<a href="#" id="links">Links</a>
<div class="dots">
<span id="dot1"></span>
<span id="dot2"></span>
<span id="dot3"></span>
</div>
</div>
</body>javascript html css slider
javascript html css slider
asked Mar 7 at 15:40
TaneTane
215
asked Mar 7 at 15:40
TaneTane
215
asked Mar 7 at 15:40
TaneTane
215
asked Mar 7 at 15:40
TaneTane
215
asked Mar 7 at 15:40
TaneTane
215
215
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
First off, according to
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user.
So if you want your dots to be active, you’ll have to write a different way of giving them an active state since they are currently <span> tags, I would recommend giving them a class of .active, and adding in Javascript code to add that class on to them, or adding in that style programmatically within the Javascript function.
Based on your other request though, you will most likely also have to make the dots an <a> tag or something along those lines so you can add functionality on to them to let clicking on the dots bring you to any slide. Something probably along the lines of:
function dot1Click()
updateSlide(1);
updateText(1);
updateLink(1);
dot1.style.backgroundColor = #fff;
Then you should have something along the lines of what you want. I'll return to this question when I have more time to iron out a code snippet, but I wanted to give you something to help you get started!
answered Mar 7 at 18:47
zachstockmalzachstockmal
113
Thank you for your answer! I will try this out.
– Tane
Mar 8 at 8:45
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55047613%2fmake-dots-active-on-slider%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
First off, according to
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user.
So if you want your dots to be active, you’ll have to write a different way of giving them an active state since they are currently <span> tags, I would recommend giving them a class of .active, and adding in Javascript code to add that class on to them, or adding in that style programmatically within the Javascript function.
Based on your other request though, you will most likely also have to make the dots an <a> tag or something along those lines so you can add functionality on to them to let clicking on the dots bring you to any slide. Something probably along the lines of:
function dot1Click()
updateSlide(1);
updateText(1);
updateLink(1);
dot1.style.backgroundColor = #fff;
Then you should have something along the lines of what you want. I'll return to this question when I have more time to iron out a code snippet, but I wanted to give you something to help you get started!
answered Mar 7 at 18:47
zachstockmalzachstockmal
113
Thank you for your answer! I will try this out.
– Tane
Mar 8 at 8:45
add a comment |
First off, according to
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user.
So if you want your dots to be active, you’ll have to write a different way of giving them an active state since they are currently <span> tags, I would recommend giving them a class of .active, and adding in Javascript code to add that class on to them, or adding in that style programmatically within the Javascript function.
Based on your other request though, you will most likely also have to make the dots an <a> tag or something along those lines so you can add functionality on to them to let clicking on the dots bring you to any slide. Something probably along the lines of:
function dot1Click()
updateSlide(1);
updateText(1);
updateLink(1);
dot1.style.backgroundColor = #fff;
Then you should have something along the lines of what you want. I'll return to this question when I have more time to iron out a code snippet, but I wanted to give you something to help you get started!
answered Mar 7 at 18:47
zachstockmalzachstockmal
113
Thank you for your answer! I will try this out.
– Tane
Mar 8 at 8:45
add a comment |
First off, according to
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user.
So if you want your dots to be active, you’ll have to write a different way of giving them an active state since they are currently <span> tags, I would recommend giving them a class of .active, and adding in Javascript code to add that class on to them, or adding in that style programmatically within the Javascript function.
Based on your other request though, you will most likely also have to make the dots an <a> tag or something along those lines so you can add functionality on to them to let clicking on the dots bring you to any slide. Something probably along the lines of:
function dot1Click()
updateSlide(1);
updateText(1);
updateLink(1);
dot1.style.backgroundColor = #fff;
Then you should have something along the lines of what you want. I'll return to this question when I have more time to iron out a code snippet, but I wanted to give you something to help you get started!
answered Mar 7 at 18:47
zachstockmalzachstockmal
113
First off, according to
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user.
So if you want your dots to be active, you’ll have to write a different way of giving them an active state since they are currently <span> tags, I would recommend giving them a class of .active, and adding in Javascript code to add that class on to them, or adding in that style programmatically within the Javascript function.
Based on your other request though, you will most likely also have to make the dots an <a> tag or something along those lines so you can add functionality on to them to let clicking on the dots bring you to any slide. Something probably along the lines of:
function dot1Click()
updateSlide(1);
updateText(1);
updateLink(1);
dot1.style.backgroundColor = #fff;
Then you should have something along the lines of what you want. I'll return to this question when I have more time to iron out a code snippet, but I wanted to give you something to help you get started!
answered Mar 7 at 18:47
zachstockmalzachstockmal
113
answered Mar 7 at 18:47
zachstockmalzachstockmal
113
answered Mar 7 at 18:47
zachstockmalzachstockmal
113
answered Mar 7 at 18:47
zachstockmalzachstockmal
113
113
Thank you for your answer! I will try this out.
– Tane
Mar 8 at 8:45
add a comment |
Thank you for your answer! I will try this out.
– Tane
Mar 8 at 8:45
Thank you for your answer! I will try this out.
– Tane
Mar 8 at 8:45
Thank you for your answer! I will try this out.
– Tane
Mar 8 at 8:45
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55047613%2fmake-dots-active-on-slider%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
