I am following this youtube tutorial (https://www.youtube.com/watch?v=MJUssi2c6Ls) and anything to do with javascript just isn’t working. I am trying to follow to part at 27:02 in the video but the slides just aren’t working at all.
This is what is happening to mine
This is the youtube video
I have tried everything but can’t figure it out.
HTML
<!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>Restaurant Web App</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<!-- font link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<!-- css file link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header section -->
<header>
<a href="#" class="logo"><i class="fas fa-untensils"></i>Bibi's Kebab House</a>
<nav class="navbar">
<a class="active" href="#home">home</a>
<a href="#dishes">dishes</a>
<a href="#about">about</a>
<a href="#menu">menu</a>
<a href="#review">review</a>
<a href="#order">order</a>
</nav>
<div class="icons">
<i class="fas fa-bars" id="menu-bars"></i>
<i class="fas fa-search" id="search-icon"></i>
<a href="#" class="fas fa-heart"></a>
<a href="#" class="fas fa-shopping-cart"></a>
</div>
</header>
<!-- end of header section -->
<!-- search form (not working)
<form action="" id="search-form">
<input type="search" placeholder="search here..." name="" id="search-box">
<label for="search-box" class="fas fa-search"></label>
<i class="fas fa-times" id="close"></i>
</form>
-->
<!-- home section -->
<section class="home" id="home">
<div class="swiper-container home-slider">
<div class="swiper-wrapper wrapper">
<div class="swiper-slide slide">
<div class="content">
<span>our special dish</span>
<h3>Special Kebab</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn">order now</a>
</div>
<div class="image">
<img src="images/home-img-1.jpg" alt="">
</div>
</div>
<div class="swiper-slide slide">
<div class="content">
<span>our special dish</span>
<h3>mega burger</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn">order now</a>
</div>
<div class="image">
<img src="images/home-img-2.jpg" alt="">
</div>
</div>
<div class="swiper-slide slide">
<div class="content">
<span>our special dish</span>
<h3>lamb chops</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn">order now</a>
</div>
<div class="image">
<img src="images/home-img-3.jpg" alt="">
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<!-- end of home section -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- js file link -->
<script src="js/script.js"></script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
:root{
--red:#a52a2a;
--black:#192a56;
--light-color:#666;
--box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
}
*{
font-family: 'Nunito', sans-serif;
margin:0; padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none; border: none;
text-transform: capitalize;
transition: all .2s linear;
}
html{
font-size:62.5%;
overflow-x: hidden;
scroll-padding-top:5.5rem;
scroll-behavior: smooth:;
}
section{
padding: 2rem 9%;
}
section:nth-child(even){
background: #eee;
}
/* order now button settings */
.btn{
margin-top: 1rem;
display: inline-block;
font-size: 1.7rem;
color: #fff;
background: var(--black);
border-radius: .5rem;
cursor: pointer;
padding: .8rem 3rem;
}
.btn:hover{
background: var(--red);
}
/* header settings */
header{
position: fixed;
top: 0; left: 0; right: 0;
background: #fff;
padding: 1rem 7%;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1000;
box-shadow: var(--box-shadow);
}
header .logo{
color:var(--black);
font-size: 2.5rem;
font-weight: bolder;
}
header .logo i{
color:var(--red);
}
header .navbar a{
font-size: 1.7rem;
border-radius: .5rem;
padding: .5rem 1.5rem;
color:var(--light-color);
}
header .navbar a.active,
header .navbar a:hover{
color: #fff;
background: var(--red);
}
header .icons i,
header .icons a{
cursor: pointer;
margin-left: .5rem;
height:4.5rem;
line-height: 4.5rem;
width: 4.5rem;
text-align: center;
font-size: 1.7rem;
color: var(--black);
border-radius: 50%;
background: #eee;
}
header .icons i:hover,
header .icons a:hover{
color: #fff;
background: var(--red);
transform: rotate(360deg);
}
header .icons #menu-bars{
display: none;
}
/* search form settings (not working) */
#search-form{
position: fixed;
top: -110; left: 0;
height: 100%; width: 100%;
z-index: 1004;
background: rgba(0, 0, 0,.8);
display: flex;
align-items: center;
justify-content: center;
padding:0 1rem;
}
#search-form.active{
top: 0;
}
#search-form #search-box{
width: 50rem;
border-bottom: .1rem solid #fff;
padding: 1rem 0;
font-size: 3rem;
text-transform: none;
background: none;
}
#search-form #search-box::-webkit-search-cancel-button{
-webkit-appearance: none;
}
#search-form label{
color: #fff;
cursor: pointer;
font-size: 3rem;
}
#search-form label:hover{
color:var(--red);
}
#search-form #close{
position: absolute;
color: fff;
cursor: pointer;
top: 2rem; right: 3rem;
font-size: 5rem;
}
/* home page images settings */
.home .home-slider .slide{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
padding-top: 9rem;
}
.home .home-slider .slide .content{
flex:1 1 45rem;
}
.home .home-slider .slide .image{
flex:1 1 45rem;
}
.home .home-slider .slide .image img{
width: 100%;
}
.home .home-slider .slide .content span{
color: var(--red);
font-size: 2.5rem;
}
.home .home-slider .slide .content h3{
color: var(--black);
font-size: 7rem;
}
.home .home-slider .slide .content p{
color: var(--light-color);
font-size: 2.2rem;
padding: .5rem 0;
line-height: 1.5;
}
.swiper-pagination-buttet-active{
background: var(--red);
}
/* media queries */
@media (max-width:991px){
html{
font-size: 55%;
}
header{
padding: 1rem 2rem;
}
}
@media (max-width:768px){
header .icons #menu-bars{
display: inline-block;
}
header .navbar{
position: absolute;
top: 100%;, left: 0; right: 0;
background: #fff;
border-top: .1rem solid rgba(0, 0, 0,.2);
border-bottom: .1rem solid rgba(0, 0, 0,.2);
padding: 1rem;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .navbar.active{
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .navbar a{
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 2rem;
background: #eee;
}
#search-form #search-box{
width: 90%;
margin: 0 1rem ;
}
@media (max-width:991px){
html{
font-size: 50%;
}
}
JS
let menu = document.querySelector('#menu-bars');
let navbar = document.querySelector('.navbar');
menu.onclick = () =>{
menu.classList.toggle('fa-times');
navbar.classList.toggle('active');
}
window.onscroll = () =>{
menu.classList.remove('fa-times');
navbar.classList.remove('active');
}
document.querySelector('#search-icon').onclick = () =>{
document.querySelector('#search-form').classList.toggle('active')
}
document.querySelector('#close').onclick = () =>{
document.querySelector('#search-form').classList.remove('active')
}
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
New contributor
Rahaat is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.