Add Alternating Sliding Animation to HTML, CSS, JavaScript Slideshow

Multi tool use
Multi tool use





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















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 divs 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 slideItems.



The last two imgs are buttons to go from slide to slide. That's why they have the onclick event. They also have ids 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 divs inside every slideItem and the divs inside itself to make the margins back to normal.



I styled all slideItems 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.










share|improve this question























  • Why don't you use an existing image slider?

    – Razvan Zamfir
    Jan 16 at 14:54


















0















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 divs 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 slideItems.



The last two imgs are buttons to go from slide to slide. That's why they have the onclick event. They also have ids 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 divs inside every slideItem and the divs inside itself to make the margins back to normal.



I styled all slideItems 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.










share|improve this question























  • Why don't you use an existing image slider?

    – Razvan Zamfir
    Jan 16 at 14:54














0












0








0








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 divs 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 slideItems.



The last two imgs are buttons to go from slide to slide. That's why they have the onclick event. They also have ids 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 divs inside every slideItem and the divs inside itself to make the margins back to normal.



I styled all slideItems 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.










share|improve this question














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 divs 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 slideItems.



The last two imgs are buttons to go from slide to slide. That's why they have the onclick event. They also have ids 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 divs inside every slideItem and the divs inside itself to make the margins back to normal.



I styled all slideItems 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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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



















  • 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












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
});


}
});














draft saved

draft discarded


















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
















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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
StMyAWdG9b,UHUIB,O 3jq0ogsK69ZfSZHyl56yv6aeg,HIEvSNy1,ux 4d8,9biIeOe RaltUb QFdNbMud6

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas