Creating JavaScript slideshows with arrow navigation brings an engaging, interactive experience to any website. Showing slideshows not only increases visual appeal But also helps users navigate smoothly. With JavaScript, you can add extra features like automation and navigation arrows. To make your slideshow dynamic and easy to use, in this guide, we’ll dive into creating a fully functional slideshow. Optimized for all device sizes and complete with a responsive, automated design. Navigating with arrows And transform the way your website looks with modern, stylish, and easy-to-use slideshows.
Key Features Javascript Slideshow
- Responsive Design: Smoothly adapts to any device size. This ensures a smooth viewing experience on desktops, tablets, and mobile phones.
- Arrow Navigation: Allows users to manually control the slideshow. Switch between pictures with left and right arrows.
- Autoplay Option: The slideshow can advance automatically. Great for galleries or featured image blogs.
- Customizable Pagination Dots: Add extra control and style. This allows users to jump to the desired slide.
- Looping Slides: The slideshow loops continuously. Increase user engagement and reduce sudden pauses.
Project Explanation
In this project, We will create a JavaScript slideshow using Swiper.js, a powerful JavaScript library known for its smooth transitions and responsive design capabilities. The slideshow will feature images of a handful of trending foods along with their associated prices and ratings. Suitable for restaurants or food-related websites.
Each slide has high-quality images. Overlay text with a price And the rating section, with the Swiper.js library, we can add navigation with arrows. Automation functionality and page breaks easily These features are highly customizable and allow for easy integration into website designs.
After this project, You’ll have a complete JavaScript slideshow combined with intuitive controls and a responsive layout. This operation is simple but versatile. Suitable for various applications For personal and professional websites Start creating this slideshow today and bring modernity and interactivity to your site!
Resources Of Javascript Slideshow
- Technology: HTML, CSS, Javascript, Swiper
- External Resources: Remix Icon, Swiperjs
- Responsive: Yes
Related Content You Might Enjoy
- Build a JavaScript Slideshow with Arrows, Autoplay & Dots
- Image Slider HTML CSS: A Complete Beginner’s Guide
- Build a Stunning Image Slider with HTML and CSS
- Create An Image Carousel with HTML, CSS & JavaScript
- How to Use JS Slider for Each Slide To Remove Active Efficiently
- Top 13 Slick Slider Examples for Modern Web Design
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>food slideshow with javascript</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.min.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section id="tranding">
<div class="container">
<h2 class="text-center section-heading">Tranding food</h2>
</div>
<div class="container">
<div class="swiper tranding-slider">
<div class="swiper-wrapper">
<!-- Slide-start -->
<div class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<img
src="https://i.postimg.cc/ydSDVWGc/burget-French-Fry.jpg"
alt="Tranding"
/>
</div>
<div class="tranding-slide-content">
<h1 class="food-price">$20</h1>
<div class="tranding-slide-content-bottom">
<h2 class="food-name">Burger Deal</h2>
<h3 class="food-rating">
<span>4.5</span>
<div class="rating">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
</h3>
</div>
</div>
</div>
<!-- Slide-end -->
<!-- Slide-start -->
<div class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<img
src="https://i.postimg.cc/13PwJ0jT/cake.jpg"
alt="Tranding"
/>
</div>
<div class="tranding-slide-content">
<h1 class="food-price">$20</h1>
<div class="tranding-slide-content-bottom">
<h2 class="food-name">Chocklet Cake</h2>
<h3 class="food-rating">
<span>4.5</span>
<div class="rating">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
</h3>
</div>
</div>
</div>
<!-- Slide-end -->
<!-- Slide-start -->
<div class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<img
src="https://i.postimg.cc/vTFcDbRj/color-Fruits.jpg"
alt="Tranding"
/>
</div>
<div class="tranding-slide-content">
<h1 class="food-price">$40</h1>
<div class="tranding-slide-content-bottom">
<h2 class="food-name">Mix Food</h2>
<h3 class="food-rating">
<span>4.5</span>
<div class="rating">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
</h3>
</div>
</div>
</div>
<!-- Slide-end -->
<!-- Slide-start -->
<div class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<img
src="https://i.postimg.cc/9QJRb6TR/different-Soup.jpg"
alt="Tranding"
/>
</div>
<div class="tranding-slide-content">
<h1 class="food-price">$15</h1>
<div class="tranding-slide-content-bottom">
<h2 class="food-name">Thy Soup</h2>
<h3 class="food-rating">
<span>4.5</span>
<div class="rating">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
</h3>
</div>
</div>
</div>
<!-- Slide-end -->
<!-- Slide-start -->
<div class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<img
src="https://i.postimg.cc/VNhSQXKz/fruit2.jpg"
alt="Tranding"
/>
</div>
<div class="tranding-slide-content">
<h1 class="food-price">$15</h1>
<div class="tranding-slide-content-bottom">
<h2 class="food-name">Color Fruits</h2>
<h3 class="food-rating">
<span>4.5</span>
<div class="rating">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
</h3>
</div>
</div>
</div>
<!-- Slide-end -->
<!-- Slide-start -->
<div class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<img
src="https://i.postimg.cc/YqNmGGCx/healthy-Diet.jpg"
alt="Tranding"
/>
</div>
<div class="tranding-slide-content">
<h1 class="food-price">$20</h1>
<div class="tranding-slide-content-bottom">
<h2 class="food-name">French Fry</h2>
<h3 class="food-rating">
<span>4.5</span>
<div class="rating">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
</h3>
</div>
</div>
</div>
<!-- Slide-end -->
<!-- Slide-start -->
<div class="swiper-slide tranding-slide">
<div class="tranding-slide-img">
<img
src="https://i.postimg.cc/3wfG8sx5/fish.jpg"
alt="Tranding"
/>
</div>
<div class="tranding-slide-content">
<h1 class="food-price">$8</h1>
<div class="tranding-slide-content-bottom">
<h2 class="food-name">Fish Fry</h2>
<h3 class="food-rating">
<span>4.5</span>
<div class="rating">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
</h3>
</div>
</div>
</div>
<!-- Slide-end -->
</div>
<div class="tranding-slider-control">
<div class="swiper-button-prev slider-arrow">
<i class="ri-arrow-left-line"></i>
</div>
<div class="swiper-button-next slider-arrow">
<i class="ri-arrow-right-line"></i>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</section>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
:root {
--primary: #ff8000;
--white: #faf6e3;
--bg: #243642;
}
html {
font-size: 62.5%;
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
}
@media (min-width: 1440px) {
html {
zoom: 1.5;
}
}
@media (min-width: 2560px) {
html {
zoom: 1.7;
}
}
@media (min-width: 3860px) {
html {
zoom: 2.5;
}
}
::-webkit-scrollbar {
width: 1.3rem;
}
::-webkit-scrollbar-thumb {
border-radius: 1rem;
background: #797979;
transition: all 0.5s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
background: #222224;
}
::-webkit-scrollbar-track {
background: #f9f9f9;
}
body {
font-size: 1.6rem;
background: var(--bg);
}
.container {
max-width: 124rem;
padding: 0 1rem;
margin: 0 auto;
}
.text-center {
text-align: center;
}
.section-heading {
font-size: 3rem;
color: var(--primary);
padding: 2rem 0;
text-transform: capitalize;
}
#tranding {
padding: 4rem 0;
}
@media (max-width: 1440px) {
#tranding {
padding: 7rem 0;
}
}
#tranding .tranding-slider {
height: 52rem;
padding: 2rem 0;
position: relative;
}
@media (max-width: 500px) {
#tranding .tranding-slider {
height: 45rem;
}
}
.tranding-slide {
width: 37rem;
height: 42rem;
position: relative;
}
@media (max-width: 500px) {
.tranding-slide {
width: 28rem !important;
height: 36rem !important;
}
.tranding-slide .tranding-slide-img img {
width: 28rem !important;
height: 36rem !important;
}
}
.tranding-slide .tranding-slide-img img {
width: 37rem;
height: 42rem;
border-radius: 2rem;
object-fit: 100% 100%;
}
.tranding-slide .tranding-slide-content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 2rem;
transition: all 250ms;
}
.tranding-slide .tranding-slide-content:hover {
background-color: transparent;
}
.tranding-slide-content .food-price {
position: absolute;
top: 2rem;
right: 2rem;
color: var(--white);
}
.tranding-slide-content .tranding-slide-content-bottom {
position: absolute;
bottom: 2rem;
left: 2rem;
color: var(--white);
}
.food-rating {
padding-top: 1rem;
display: flex;
gap: 1rem;
}
.rating i {
color: var(--primary);
}
.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
display: none;
}
.tranding-slider-control {
position: relative;
bottom: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.tranding-slider-control .swiper-button-next {
left: 58% !important;
transform: translateX(-58%) !important;
}
@media (max-width: 990px) {
.tranding-slider-control .swiper-button-next {
left: 70% !important;
transform: translateX(-70%) !important;
}
}
@media (max-width: 450px) {
.tranding-slider-control .swiper-button-next {
left: 80% !important;
transform: translateX(-80%) !important;
}
}
@media (max-width: 990px) {
.tranding-slider-control .swiper-button-prev {
left: 30% !important;
transform: translateX(-30%) !important;
}
}
@media (max-width: 450px) {
.tranding-slider-control .swiper-button-prev {
left: 20% !important;
transform: translateX(-20%) !important;
}
}
.tranding-slider-control .slider-arrow {
background: var(--white);
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
left: 42%;
transform: translateX(-42%);
filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}
.tranding-slider-control .slider-arrow i {
font-size: 2rem;
color: #222224;
}
.tranding-slider-control .slider-arrow::after {
content: "";
}
.tranding-slider-control .swiper-pagination {
position: relative;
width: 15rem;
bottom: 1rem;
}
.tranding-slider-control .swiper-pagination .swiper-pagination-bullet {
filter: drop-shadow(0px 8px 24px rgba(18, 28, 53, 0.1));
}
.tranding-slider-control .swiper-pagination .swiper-pagination-bullet-active {
background: var(--primary);
}
const TrandingSlider = new Swiper(".tranding-slider", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
loop: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
modifier: 2.5,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
Code & Preview
You can download the source code files for free by clicking the Source Code button. Additionally, you can edit and view a live demo by clicking the Edit With Codepen button below.
