Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS & JavaScript) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "How To Create An Animated Website Image Carousel | CSS & JavaScript", we will learn how to create it following these simple easy steps. From the header navigation to the footer element, we will dissolve all of them here.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Finally, download the Images and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
HTML
<div class="slider-container">
<button id="prev">
<ion-icon name="chevron-back-outline"></ion-icon>
</button>
<div class="slider">
<div class="slides">
<div class="slide-texts">
<h1>
Alone is not lonely when you find contentment in your own company
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Accusantium hic facilis maxime blanditiis esse voluptatum maiores
corporis sapiente tempora nostrum, nobis explicabo eaque quibusdam
laboriosam reiciendis ex commodi officia et.
</p>
<a href="#">Discover More</a>
</div>
<img src="./img/img1.jpg" alt="Image 1" />
</div>
<div class="slides">
<div class="slide-texts">
<h1>
Sometimes, the loneliest moments lead to the most profound
discoveries
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad,
maxime repudiandae? Possimus quod porro quidem doloribus esse ut
autem vero dicta tempore perferendis itaque dolores beatae dolore,
architecto error sit!
</p>
<a href="#">Discover More</a>
</div>
<img src="./img/img2.jpg" alt="Image 2" />
</div>
<div class="slides">
<div class="slide-texts">
<h1>
I may be alone, but my thoughts keep me company and my dreams
light the way
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat
eum, aliquam voluptatum quis quibusdam ea illum minima quisquam
labore facilis veritatis cupiditate, aperiam et quae porro
dolores! Ipsum, pariatur quas?
</p>
<a href="#">Discover More</a>
</div>
<img src="./img/img3.jpg" alt="Image 3" />
</div>
<div class="slides">
<div class="slide-texts">
<h1>
In the quiet of my solitude, I find the strength to build a life
that’s truly my own
</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis
impedit laborum corporis, quae obcaecati consequatur
necessitatibus corrupti alias cumque unde, vitae nostrum, soluta
sint rem sequi! Illo at consectetur repellendus.
</p>
<a href="#">Discover More</a>
</div>
<img src="./img/img4.jpg" alt="Image 4" />
</div>
</div>
<button id="next">
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
</div>
<div class="thumbnails">
<img tabindex="0" src="./img/img1.jpg" alt="" />
<img tabindex="1" src="./img/img2.jpg" alt="" />
<img tabindex="2" src="./img/img3.jpg" alt="" />
<img tabindex="3" src="./img/img4.jpg" alt="" />
</div>
Add the following CSS codes to your style.css file to make your website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website.
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f5f5f5;
margin: 0;
}
.slider-container {
width: 100vw;
height: 100vh;
overflow: hidden;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
}
.slider {
display: flex;
height: 100%;
transition: transform 1s ease;
}
.slider .slides {
min-width: 100%;
position: relative;
}
.slider img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
.slider::-webkit-scrollbar {
display: none;
}
.slider-container button {
position: absolute;
width: 70px;
height: 70px;
background: #232121;
color: #f5f5f5;
border-radius: 50%;
z-index: 1;
border: none;
font-size: 2.5em;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border: 1px solid #f5f5f5;
}
.slider-container button#next {
right: 20px;
}
.slider-container button#prev {
left: 20px;
}
.slide-texts {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
color: #f5f5f5;
padding-left: 10%;
}
.slide-texts h1 {
max-width: 900px;
font-size: 2.7em;
text-transform: capitalize;
}
.slide-texts p {
max-width: 1000px;
font-size: 1.2em;
line-height: 1.7em;
margin: 20px 0;
}
.slide-texts a {
text-decoration: none;
color: #f5f5f5;
background: #151515;
padding: 10px 20px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 2px;
cursor: pointer;
font-size: 1em;
display: inline-block;
margin-top: 20px;
}
/* Thumbnails */
.thumbnails {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 1em;
}
.thumbnails img {
width: 100px;
height: 70px;
object-fit: cover;
object-position: center;
border-radius: 10px;
opacity: 0.5;
cursor: pointer;
transition: 0.3s ease;
}
.thumbnails img.active {
transform: scale(1.3);
opacity: 1;
border: 1px solid #f5f5f5;
}
Finally add the following script code to your script.css file to add functionality to your website
JAVASCRIPT
const slider = document.querySelector(".slider");
const prevBtn = document.getElementById("prev");
const nextBtn = document.getElementById("next");
const slides = document.querySelectorAll(".slides");
//This should be done after the slider functionality works;
const thumbnailImg = document.querySelectorAll(".thumbnails img");
let currentSlide = 0;
const updateSlider = (index) => {
slides.forEach((e) => e.classList.remove("active"));
slides[index].classList.add("active");
//Read the above comments;
thumbnailImg.forEach((img) => img.classList.remove("active"));
thumbnailImg[index].classList.add("active");
slider.style.transform = `translateX(-${index * 100}%)`;
};
prevBtn.addEventListener("click", (e) => {
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
console.log(currentSlide);
updateSlider(currentSlide);
});
nextBtn.addEventListener("click", (e) => {
currentSlide = (currentSlide + 1) % slides.length;
console.log(currentSlide);
updateSlider(currentSlide);
});
//Automatically adds the active class to the first image thumbnail
window.addEventListener("DOMContentLoaded", (e) => {
thumbnailImg[currentSlide].classList.add("active");
});
thumbnailImg.forEach((img) =>
img.addEventListener("click", (e) => {
const index = e.currentTarget.getAttribute("tabIndex");
console.log(index);
updateSlider(index);
})
);
Conclusion and Final word
Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can "Create An Animated Website Image Carousel | CSS & JavaScript". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.
Happy Coding Journey 🚀
1 Comments
meric
ReplyDeleteWe are happy to hear from you.