A simple slider(carousel) using vanilla JavaScript: vitaSlider
Sliders are a common feature for websites. many JavaScript libraries have this feature already implemented. Today I will take you through the process of building your own custom slider, that is very simple to use and customize.
Create a new folder and open it using using your favorite editor. In the new folder you created, create an additional folder for images and three files as follows:
A folder called “img”
A JavaScript file “script.js”
A JavaScript file “script.js”
A CSS file “style.css” and an “index.html” file
In the index.html file, inside the head element, reference your css and javascript files as shown:
<html lang=”en-US”>
<head>
<title>Simple Slider</title>
<link rel=”stylesheet” href=”css/style.css” />
<script type=”text/javascript” src=”js/script.js”></script>
</head>
…
</html>
Your JS file is now referenced in your HTML web page. You can write JavaScript application logic in this file that will run on your web page.
Create Figure Elements For Carousel
Within the body element, add a new section element after the header element add:
<body>
<header>
…
</header>
<section>
</section>
</body>
Within the section element, add a new figure element:
<section id=”carousel”>
<figure>
</figure>
</section>
Within the new figure element, add a new img element:
<figure>
<img />
</figure>
Update the new img element by setting the src attribute to the value img/picurename.png:
Update the new img element by setting the alt attribute to the value of your choice. Within the new figure element, add a new figcaption element: Update the new figcaption element by setting the content to any caption of your choice.
Your index.html page will look like this
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<link rel=”stylesheet” href=”style.css”>
<script src=”script.js”></script>
<title>Document</title>
</head>
<body>
<section id=”carousel”>
<figure class=”visible”>
<img src=”img/car.png” alt=”Efficient Cars”>
<figcaption>2020, scientists promised us electric cars </figcaption>
</figure>
<figure class=”hidden”>
<img src=”img/health.png” alt=” Health is wealth”>
<figcaption>Health iswealth</figcaption>
</figure>
<figure class=”hidden”>
<img src=”img/nature.png” alt=” Nature”>
<figcaption> Hurricane Threatens to Touch Down on the East Coast This Weekend</figcaption>
</figure>
</section>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Ipsa distinctio alias, nobis numquam repudiandae possimus
nam aliquid vel rerum soluta quam! Esse molestias hic neque
incidunt recusandae fuga, omnis laborum?
</body>
</html>
Apply Carousel CSS Styles to target the img elements that are direct descendants of figure elements that are direct descendants of the section element with an id of carousel. This rule set should include the following declarations:
This rule will hide the figure elements by default.
section#carousel > figure > img {
display: none;
margin: 0px auto;
}
Add a CSS rule set that targets the img elements that are direct descendants of figure elements referencing the visible class that are direct descendants of the section element with an id of carousel. This rule set should include the following declarations:
This rule will show only the figure elements that reference the class visible.
section#carousel > figure.visible > img {
display: block;
position: relative;
overflow: hidden;
}
Add a CSS rule set that targets the figcaption elements that are direct descendants of figure elements that are direct descendants of the section element with an id of carousel. This rule set should include the following declarations:
This rule will hide the figcaption elements by default.
section#carousel > figure > figcaption {
display: none;
}
Add a CSS rule set that targets the figcaption elements that are direct descendants of figure elements referencing the visible class that are direct descendants of the section element with an id of carousel. This rule set should include the following declarations:
This rule will show only the figcaption elements that reference the class visible.
section#carousel > figure.visible > figcaption {
display: block;
text-align: center;
font-weight: bold;
font-size: 1.5em;
}
Your style.css should look like this:
body {
font-family: Itim;
color: aqua;
text-align: center;
}
section#carousel>figure>img {
display: none;
margin: 0px;
}
section#carousel>figure.visible>img {
display: block;
overflow: hidden;
position: relative;
margin: 0px auto;
}
section#carousel>figure>figcaption {
display: none;
}
section#carousel>figure.visible>figcaption {
display: block;
text-align: center;
font-weight: bold;
font-size: 1.5em;
}
Implement Carousel JavaScript
Add a new variable named slideInterval with the initial value set to 4000;
Add a new variable named slideInterval with the initial value set to 4000;
var slideInterval = 4000;
Create a new function named getFigures.
Create a new function named getFigures.
function getFigures() {
}
In the getFigures function, retrieve all of the figure elements within the section element using the id of carousel. Return the resulting array as the result of this function.
function getFigures() {
return document.getElementById(‘carousel’).getElementsByTagName(‘figure’);
}
return document.getElementById(‘carousel’).getElementsByTagName(‘figure’);
}
Create a new function named moveForward. Implement the new function with the following logic:
This function iterates over the figure elements in the section element. It removes the visible class from the current figure element, then adds the class to the next figure element. Once complete, it uses the setTimeout function to invoke itself again after a specified amount of time (4000 milliseconds = 4 seconds).
function moveForward() {
var pointer = 0;
var figures = getFigures();
for (var i = 0; i < figures.length; i++) {
if (figures[i].className == ‘visible’) {
figures[i].className = ‘hidden’;
pointer = i;
}
}
if (++pointer == figures.length) {
pointer = 0;
}
figures[pointer].className = ‘visible’;
setTimeout(moveForward, slideInterval);
}
Create a new function named startPlayback.
function startPlayback() {
}
In the startPlayback function, use the setTimeout function in JavaScript to invoke the moveForward method after a specified amount of time. Use the slideInterval variable for the time interval.
function startPlayback() {
setTimeout(moveForward, slideInterval);
}
In the last line of the JavaScript file, invoke the startPlayback function.
startPlayback();
The JavaScript logic simply adds the visible CSS class to the next image in the rotation approximately every 4 seconds, and adds the hidden CSS class to others.
Thanks as I hope this little tutorial helps you. Download and star the full version of this code at my github repository.
Don’t forget share because sharing is caring… Follow me on twitter @vita_developer for more wonderful updates, and on my blog for more gist.
Don’t forget share because sharing is caring… Follow me on twitter @vita_developer for more wonderful updates, and on my blog for more gist.
No comments
Post a Comment
Comment, and tell people what you think