Add Alternating Sliding Animation to HTML, CSS, JavaScript Slideshow

Multi tool use
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I created a slideshow, looks ok, but rough.
I used HTML, CSS, and JavaScript.
I firstly, want to add an alternating sliding animation.
DEFINE: Alternating Sliding Animation
That means if I go to the previous slide, it will transition from right to left, but if I go the next slide, it will transition from left to right.
I tried getting help from Google, but the answers don't make sense.
I'll show the entire rough slideshow code:
The basic HTML structure:
<div id="slideShow">
<div class="slideItem" style="background-image: url(img1.jpg);">
<div>
<h1>Item 1</h1>
<p>Lorem ispum dorat... I don't know latin.</p>
</div>
</div>
<div class="slideItem" style="background-image: url(img2.jpg);">
<div>
<h1>Item 2</h1>
<p>Lorem ispum dorat... I don't know latin.</p>
</div>
</div>
<div class="slideItem" style="background-image: url(img3.jpg);">
<div>
<h1>Item 3</h1>
<p>Lorem ispum dorat... I don't know latin.</p>
</div>
</div>
<img src="left.png" id="left" onclick="addIndex(false);" />
<img src="right.png" id="right" onclick="addIndex(true);" />
</div>
The div
with id
of slideShow
is just the container for all the items.
All div
s inside slideShow
with the id
of slideItem
are the slide items you see.
I also added a div
inside every single slideItem
for margin control.
I used a separate style
element for the background images and I added some text inside the slideItem
s.
The last two img
s are buttons to go from slide to slide. That's why they have the onclick
event. They also have id
s left
and right
for external CSS styling purposes.
The Styling, The CSS:
* {
margin: 0;
word-wrap: break-word;
}
#slideShow div div, #slideShow div div * {
margin: 8px;
}
#slideShow div {
width: 100%;
height: 15cm;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
filter: progoid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/ssimg1.jpg", sizingMethod="scale");
-ms-filter: progoid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/ssimg1.jpg", sizingMethod="scale");
}
#slideShow div:not(:first-of-type) {
display: none;
}
#slideShow #left, #slideShow #right {
position: absolute;
display: block;
top: 50%;
width: auto;
margin-top: 1cm;
padding: 5mm;
transition: background-color 250ms;
-webkit-transition: background-color 250ms;
-moz-transition: background-color 250ms;
-o-transition: background-color 250ms;
}
#slideShow #right {
right: 0;
}
#slideShow #left:hover, #slideShow #right:hover {
background-color: #000;
cursor: pointer;
}
Firstly, I used *
to clear the margin of everything using margin: 0
for some purposes like sticking the slideshow to the edge of the window.
Next, I assigned margin: 8px
to the content of the div
s inside every slideItem
and the div
s inside itself to make the margins back to normal.
I styled all slideItem
s to make it full width, big enough, and modify the background image so it's full screen inside the slideItem
.
Making only the first slide show using display: none
. I used :not(:first-of-type)
so that all slides use display: none
excluding the first slide.
For the control buttons, I used position: absolute
so that they don't appear at the bottom and display: block
to make them button-like.
I used padding: 5mm
to make them nice big blocks.
I used the rest to adjust the control button's position and I added a transition
for the background image.
The right button uses right: 0
so it is aligned to the right instead of the left.
They have the hover
event to become black while the mouse is on the buttons. I also added code to change the cursor image to whatever you see while hovering your mouse over an a
link.
Finally, The JavaScript:
var imageIndex = 0;
var totalSlides = 2;
var slides = document.getElementsByClassName("slideItem");
displayImage(imageIndex);
function addIndex(coo) {
if(coo == true) {
imageIndex++;
displayImage(imageIndex);
if(imageIndex > totalSlides) {
imageIndex = 0;
displayImage(imageIndex);
}
}
else if(coo == false) {
imageIndex--;
displayImage(imageIndex);
if(imageIndex < 0) {
imageIndex = totalSlides;
displayImage(imageIndex);
}
}
}
function displayImage(index) {
if(index == 0) {
slides[0].style.display = "block";
slides[1].style.display = "none";
slides[2].style.display = "none";
}
else if(index == 1) {
slides[0].style.display = "none";
slides[1].style.display = "block";
slides[2].style.display = "none";
}
else if(index == 2) {
slides[0].style.display = "none";
slides[1].style.display = "none";
slides[2].style.display = "block";
}
}
imageIndex
is a counter of the current slide. Its value is 0
and that means 1
.
totalSlides
tells the total number of slides. The value is 2
but that means 3
.
At the beginning, I add displayImage(imageIndex)
to show the first slide. (I did that on CSS, and I know!)
The addIndex
function changes the index (value of imageIndex
) depending on its argument named coo
which means check or oppos.
If coo
is true
, then it'll add the index, but if it's false
, the index goes down.
The code includes displayIndex(imageIndex)
, so that the slide changes along with the index.
You've been seeing me mention displayIndex(imageIndex)
many times.
displayIndex
is a function to show the slides depending on the index number and hides all the others.
javascript html css css-transitions css-animations
add a comment |
I created a slideshow, looks ok, but rough.
I used HTML, CSS, and JavaScript.
I firstly, want to add an alternating sliding animation.
DEFINE: Alternating Sliding Animation
That means if I go to the previous slide, it will transition from right to left, but if I go the next slide, it will transition from left to right.
I tried getting help from Google, but the answers don't make sense.
I'll show the entire rough slideshow code:
The basic HTML structure:
<div id="slideShow">
<div class="slideItem" style="background-image: url(img1.jpg);">
<div>
<h1>Item 1</h1>
<p>Lorem ispum dorat... I don't know latin.</p>
</div>
</div>
<div class="slideItem" style="background-image: url(img2.jpg);">
<div>
<h1>Item 2</h1>
<p>Lorem ispum dorat... I don't know latin.</p>
</div>
</div>
<div class="slideItem" style="background-image: url(img3.jpg);">
<div>
<h1>Item 3</h1>
<p>Lorem ispum dorat... I don't know latin.</p>
</div>
</div>
<img src="left.png" id="left" onclick="addIndex(false);" />
<img src="right.png" id="right" onclick="addIndex(true);" />
</div>
The div
with id
of slideShow
is just the container for all the items.
All div
s inside slideShow
with the id
of slideItem
are the slide items you see.
I also added a div
inside every single slideItem
for margin control.
I used a separate style
element for the background images and I added some text inside the slideItem
s.
The last two img
s are buttons to go from slide to slide. That's why they have the onclick
event. They also have id
s left
and right
for external CSS styling purposes.
The Styling, The CSS:
* {
margin: 0;
word-wrap: break-word;
}
#slideShow div div, #slideShow div div * {
margin: 8px;
}
#slideShow div {
width: 100%;
height: 15cm;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
filter: progoid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/ssimg1.jpg", sizingMethod="scale");
-ms-filter: progoid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/ssimg1.jpg", sizingMethod="scale");
}
#slideShow div:not(:first-of-type) {
display: none;
}
#slideShow #left, #slideShow #right {
position: absolute;
display: block;
top: 50%;
width: auto;
margin-top: 1cm;
padding: 5mm;
transition: background-color 250ms;
-webkit-transition: background-color 250ms;
-moz-transition: background-color 250ms;
-o-transition: background-color 250ms;
}
#slideShow #right {
right: 0;
}
#slideShow #left:hover, #slideShow #right:hover {
background-color: #000;
cursor: pointer;
}
Firstly, I used *
to clear the margin of everything using margin: 0
for some purposes like sticking the slideshow to the edge of the window.
Next, I assigned margin: 8px
to the content of the div
s inside every slideItem
and the div
s inside itself to make the margins back to normal.
I styled all slideItem
s to make it full width, big enough, and modify the background image so it's full screen inside the slideItem
.
Making only the first slide show using display: none
. I used :not(:first-of-type)
so that all slides use display: none
excluding the first slide.
For the control buttons, I used position: absolute
so that they don't appear at the bottom and display: block
to make them button-like.
I used padding: 5mm
to make them nice big blocks.
I used the rest to adjust the control button's position and I added a transition
for the background image.
The right button uses right: 0
so it is aligned to the right instead of the left.
They have the hover
event to become black while the mouse is on the buttons. I also added code to change the cursor image to whatever you see while hovering your mouse over an a
link.
Finally, The JavaScript:
var imageIndex = 0;
var totalSlides = 2;
var slides = document.getElementsByClassName("slideItem");
displayImage(imageIndex);
function addIndex(coo) {
if(coo == true) {
imageIndex++;
displayImage(imageIndex);
if(imageIndex > totalSlides) {
imageIndex = 0;
displayImage(imageIndex);
}
}
else if(coo == false) {
imageIndex--;
displayImage(imageIndex);
if(imageIndex < 0) {
imageIndex = totalSlides;
displayImage(imageIndex);
}
}
}
function displayImage(index) {
if(index == 0) {
slides[0].style.display = "block";
slides[1].style.display = "none";
slides[2].style.display = "none";
}
else if(index == 1) {
slides[0].style.display = "none";
slides[1].style.display = "block";
slides[2].style.display = "none";
}
else if(index == 2) {
slides[0].style.display = "none";
slides[1].style.display = "none";
slides[2].style.display = "block";
}
}
imageIndex
is a counter of the current slide. Its value is 0
and that means 1
.
totalSlides
tells the total number of slides. The value is 2
but that means 3
.
At the beginning, I add displayImage(imageIndex)
to show the first slide. (I did that on CSS, and I know!)
The addIndex
function changes the index (value of imageIndex
) depending on its argument named coo
which means check or oppos.
If coo
is true
, then it'll add the index, but if it's false
, the index goes down.
The code includes displayIndex(imageIndex)
, so that the slide changes along with the index.
You've been seeing me mention displayIndex(imageIndex)
many times.
displayIndex
is a function to show the slides depending on the index number and hides all the others.
javascript html css css-transitions css-animations
Why don't you use an existing image slider?
– Razvan Zamfir
Jan 16 at 14:54
add a comment |
I created a slideshow, looks ok, but rough.
I used HTML, CSS, and JavaScript.
I firstly, want to add an alternating sliding animation.
DEFINE: Alternating Sliding Animation
That means if I go to the previous slide, it will transition from right to left, but if I go the next slide, it will transition from left to right.
I tried getting help from Google, but the answers don't make sense.
I'll show the entire rough slideshow code:
The basic HTML structure:
<div id="slideShow">
<div class="slideItem" style="background-image: url(img1.jpg);">
<div>
<h1>Item 1</h1>
<p>Lorem ispum dorat... I don't know latin.</p>
</div>
</div>
<div class="slideItem" style="background-image: url(img2.jpg);">
<div>
<h1>Item 2</h1>
<p>Lorem ispum dorat... I don't know latin.</p>
</div>
</div>
<div class="slideItem" style="background-image: url(img3.jpg);">
<div>
<h1>Item 3</h1>
<p>Lorem ispum dorat... I don't know latin.</p>
</div>
</div>
<img src="left.png" id="left" onclick="addIndex(false);" />
<img src="right.png" id="right" onclick="addIndex(true);" />
</div>
The div
with id
of slideShow
is just the container for all the items.
All div
s inside slideShow
with the id
of slideItem
are the slide items you see.
I also added a div
inside every single slideItem
for margin control.
I used a separate style
element for the background images and I added some text inside the slideItem
s.
The last two img
s are buttons to go from slide to slide. That's why they have the onclick
event. They also have id
s left
and right
for external CSS styling purposes.
The Styling, The CSS:
* {
margin: 0;
word-wrap: break-word;
}
#slideShow div div, #slideShow div div * {
margin: 8px;
}
#slideShow div {
width: 100%;
height: 15cm;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
filter: progoid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/ssimg1.jpg", sizingMethod="scale");
-ms-filter: progoid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/ssimg1.jpg", sizingMethod="scale");
}
#slideShow div:not(:first-of-type) {
display: none;
}
#slideShow #left, #slideShow #right {
position: absolute;
display: block;
top: 50%;
width: auto;
margin-top: 1cm;
padding: 5mm;
transition: background-color 250ms;
-webkit-transition: background-color 250ms;
-moz-transition: background-color 250ms;
-o-transition: background-color 250ms;
}
#slideShow #right {
right: 0;
}
#slideShow #left:hover, #slideShow #right:hover {
background-color: #000;
cursor: pointer;
}
Firstly, I used *
to clear the margin of everything using margin: 0
for some purposes like sticking the slideshow to the edge of the window.
Next, I assigned margin: 8px
to the content of the div
s inside every slideItem
and the div
s inside itself to make the margins back to normal.
I styled all slideItem
s to make it full width, big enough, and modify the background image so it's full screen inside the slideItem
.
Making only the first slide show using display: none
. I used :not(:first-of-type)
so that all slides use display: none
excluding the first slide.
For the control buttons, I used position: absolute
so that they don't appear at the bottom and display: block
to make them button-like.
I used padding: 5mm
to make them nice big blocks.
I used the rest to adjust the control button's position and I added a transition
for the background image.
The right button uses right: 0
so it is aligned to the right instead of the left.
They have the hover
event to become black while the mouse is on the buttons. I also added code to change the cursor image to whatever you see while hovering your mouse over an a
link.
Finally, The JavaScript:
var imageIndex = 0;
var totalSlides = 2;
var slides = document.getElementsByClassName("slideItem");
displayImage(imageIndex);
function addIndex(coo) {
if(coo == true) {
imageIndex++;
displayImage(imageIndex);
if(imageIndex > totalSlides) {
imageIndex = 0;
displayImage(imageIndex);
}
}
else if(coo == false) {
imageIndex--;
displayImage(imageIndex);
if(imageIndex < 0) {
imageIndex = totalSlides;
displayImage(imageIndex);
}
}
}
function displayImage(index) {
if(index == 0) {
slides[0].style.display = "block";
slides[1].style.display = "none";
slides[2].style.display = "none";
}
else if(index == 1) {
slides[0].style.display = "none";
slides[1].style.display = "block";
slides[2].style.display = "none";
}
else if(index == 2) {
slides[0].style.display = "none";
slides[1].style.display = "none";
slides[2].style.display = "block";
}
}
imageIndex
is a counter of the current slide. Its value is 0
and that means 1
.
totalSlides
tells the total number of slides. The value is 2
but that means 3
.
At the beginning, I add displayImage(imageIndex)
to show the first slide. (I did that on CSS, and I know!)
The addIndex
function changes the index (value of imageIndex
) depending on its argument named coo
which means check or oppos.
If coo
is true
, then it'll add the index, but if it's false
, the index goes down.
The code includes displayIndex(imageIndex)
, so that the slide changes along with the index.
You've been seeing me mention displayIndex(imageIndex)
many times.
displayIndex
is a function to show the slides depending on the index number and hides all the others.
javascript html css css-transitions css-animations
I created a slideshow, looks ok, but rough.
I used HTML, CSS, and JavaScript.
I firstly, want to add an alternating sliding animation.
DEFINE: Alternating Sliding Animation
That means if I go to the previous slide, it will transition from right to left, but if I go the next slide, it will transition from left to right.
I tried getting help from Google, but the answers don't make sense.
I'll show the entire rough slideshow code:
The basic HTML structure:
<div id="slideShow">
<div class="slideItem" style="background-image: url(img1.jpg);">
<div>
<h1>Item 1</h1>
<p>Lorem ispum dorat... I don't know latin.</p>
</div>
</div>
<div class="slideItem" style="background-image: url(img2.jpg);">
<div>
<h1>Item 2</h1>
<p>Lorem ispum dorat... I don't know latin.</p>
</div>
</div>
<div class="slideItem" style="background-image: url(img3.jpg);">
<div>
<h1>Item 3</h1>
<p>Lorem ispum dorat... I don't know latin.</p>
</div>
</div>
<img src="left.png" id="left" onclick="addIndex(false);" />
<img src="right.png" id="right" onclick="addIndex(true);" />
</div>
The div
with id
of slideShow
is just the container for all the items.
All div
s inside slideShow
with the id
of slideItem
are the slide items you see.
I also added a div
inside every single slideItem
for margin control.
I used a separate style
element for the background images and I added some text inside the slideItem
s.
The last two img
s are buttons to go from slide to slide. That's why they have the onclick
event. They also have id
s left
and right
for external CSS styling purposes.
The Styling, The CSS:
* {
margin: 0;
word-wrap: break-word;
}
#slideShow div div, #slideShow div div * {
margin: 8px;
}
#slideShow div {
width: 100%;
height: 15cm;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
filter: progoid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/ssimg1.jpg", sizingMethod="scale");
-ms-filter: progoid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/ssimg1.jpg", sizingMethod="scale");
}
#slideShow div:not(:first-of-type) {
display: none;
}
#slideShow #left, #slideShow #right {
position: absolute;
display: block;
top: 50%;
width: auto;
margin-top: 1cm;
padding: 5mm;
transition: background-color 250ms;
-webkit-transition: background-color 250ms;
-moz-transition: background-color 250ms;
-o-transition: background-color 250ms;
}
#slideShow #right {
right: 0;
}
#slideShow #left:hover, #slideShow #right:hover {
background-color: #000;
cursor: pointer;
}
Firstly, I used *
to clear the margin of everything using margin: 0
for some purposes like sticking the slideshow to the edge of the window.
Next, I assigned margin: 8px
to the content of the div
s inside every slideItem
and the div
s inside itself to make the margins back to normal.
I styled all slideItem
s to make it full width, big enough, and modify the background image so it's full screen inside the slideItem
.
Making only the first slide show using display: none
. I used :not(:first-of-type)
so that all slides use display: none
excluding the first slide.
For the control buttons, I used position: absolute
so that they don't appear at the bottom and display: block
to make them button-like.
I used padding: 5mm
to make them nice big blocks.
I used the rest to adjust the control button's position and I added a transition
for the background image.
The right button uses right: 0
so it is aligned to the right instead of the left.
They have the hover
event to become black while the mouse is on the buttons. I also added code to change the cursor image to whatever you see while hovering your mouse over an a
link.
Finally, The JavaScript:
var imageIndex = 0;
var totalSlides = 2;
var slides = document.getElementsByClassName("slideItem");
displayImage(imageIndex);
function addIndex(coo) {
if(coo == true) {
imageIndex++;
displayImage(imageIndex);
if(imageIndex > totalSlides) {
imageIndex = 0;
displayImage(imageIndex);
}
}
else if(coo == false) {
imageIndex--;
displayImage(imageIndex);
if(imageIndex < 0) {
imageIndex = totalSlides;
displayImage(imageIndex);
}
}
}
function displayImage(index) {
if(index == 0) {
slides[0].style.display = "block";
slides[1].style.display = "none";
slides[2].style.display = "none";
}
else if(index == 1) {
slides[0].style.display = "none";
slides[1].style.display = "block";
slides[2].style.display = "none";
}
else if(index == 2) {
slides[0].style.display = "none";
slides[1].style.display = "none";
slides[2].style.display = "block";
}
}
imageIndex
is a counter of the current slide. Its value is 0
and that means 1
.
totalSlides
tells the total number of slides. The value is 2
but that means 3
.
At the beginning, I add displayImage(imageIndex)
to show the first slide. (I did that on CSS, and I know!)
The addIndex
function changes the index (value of imageIndex
) depending on its argument named coo
which means check or oppos.
If coo
is true
, then it'll add the index, but if it's false
, the index goes down.
The code includes displayIndex(imageIndex)
, so that the slide changes along with the index.
You've been seeing me mention displayIndex(imageIndex)
many times.
displayIndex
is a function to show the slides depending on the index number and hides all the others.
javascript html css css-transitions css-animations
javascript html css css-transitions css-animations
asked Jan 3 at 21:46


PrOScANneRDiVPrOScANneRDiV
16
16
Why don't you use an existing image slider?
– Razvan Zamfir
Jan 16 at 14:54
add a comment |
Why don't you use an existing image slider?
– Razvan Zamfir
Jan 16 at 14:54
Why don't you use an existing image slider?
– Razvan Zamfir
Jan 16 at 14:54
Why don't you use an existing image slider?
– Razvan Zamfir
Jan 16 at 14:54
add a comment |
0
active
oldest
votes
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%2f54030245%2fadd-alternating-sliding-animation-to-html-css-javascript-slideshow%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f54030245%2fadd-alternating-sliding-animation-to-html-css-javascript-slideshow%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
sY V3wineoo Q7i fmFR 05r3DzY8WybYesa2mI,hBScW
Why don't you use an existing image slider?
– Razvan Zamfir
Jan 16 at 14:54