lorenzo washington
Reputation: 19
swiper doesnt want to swipe on my web page
i am trying to build this eCommerce website but im having trouble using this touch slider called swiper by idangero the swiper element doesnt seem to want to swipe or move here is my code.
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lexend+Exa:wght@100;200;300;400;500;700&family=Lexend:wght@100;200;300;400;500;700&display=swap');
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/jpg" href="images/misslisalogo_crown.JPG"/>
<link rel="stylesheet" href="index_style.css" type="text/css">
<title>MissLisaBeauty | Home</title>
<link rel="stylesheet" href="css/swiper-bundle.min.css">
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
</head>
<body>
<header>
<div class="logo">
<img src="images/misslisalogo_banner.JPG">
</div>
<ul class="navigation">
<a><li>LIPGLOSS</li></a>
<a><li>EYE LASH</li></a>
<a><li>KEYCHAINS</li></a>
<a><li>LIP SCRUB</li></a>
<a><li>PERFUMES</li></a>
<a><li>SALE</li></a>
</ul>
<button type="button" class="user_button"><img src="images/user.png" alt="user"></button>
<button type="button" class="home_button"><img src="images/shopping_cart.png" alt="shopping cart"></button>
<form class="search_bar" action="">
<input type="text" name="q" id="search" placeholder="What Are You Looking For?">
<button type="submit"><img src="images/search.png" alt="search"></button>
</form>
</header>
<div class="featured">
<div class="featured_label">
<p>Featured</p>
</div>
<div class="img_slider">
<div class="slide active">
<img src="images/TEKO7439.JPG" alt="lips gloss">
<div class="info">
<h2>Hydrating Lip Gloss</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex provident eveniet beatae? Fugiat, sapiente. Earum corporis expedita quasi nihil, commodi quisquam laborum magni eius minus sapiente delectus perspiciatis architecto debitis.</p>
</div>
</div>
<div class="slide">
<img src="images/IMG_6016.JPG" alt="lips gloss">
<div class="info">
<h2>Hydrating Lip Gloss</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque accusamus commodi voluptas hic totam quidem labore porro expedita laboriosam nisi! Ipsa natus aut atque, asperiores praesentium at blanditiis. Esse, earum?</p>
</div>
</div>
<div class="slide">
<img src="images/IMG_6017.JPG" alt="lips gloss">
<div class="info">
<h2>Hydrating Lip Gloss</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam reprehenderit numquam fugiat voluptas eum dignissimos id, rem rerum impedit modi provident quia dolorum veritatis quis laudantium vel delectus alias doloremque!</p>
</div>
</div>
<div class="nav">
<div class="btn active"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>
</div>
<div class="shopnow">
<p>Shop Now</p>
</div>
<script type="text/javascript">
var slides = document.querySelectorAll('.slide');
var btns = document.querySelectorAll('.btn');
let currentSlide = 1;
//javascript for silder manual navigation
var manualNav = function(manual){
slides.forEach((slide) => {
slide.classList.remove('active');
btns.forEach((btn) => {
btn.classList.remove('active');
});
});
slides[manual].classList.add('active');
btns[manual].classList.add('active');
}
btns.forEach((btn, i) => {
btn.addEventListener('click', () =>{
manualNav(i);
currentSlide = i;
});
});
//script for auto nav
var repeat = function(activeClass){
let active = document.getElementsByClassName('active');
let i = 1;
var repeater = () => {
setTimeout(function(){
[...active].forEach((activeSlide) => {
activeSlide.classList.remove('active');
});
slides[i].classList.add('active');
btns[i].classList.add('active');
i++;
if(slides.length == i){
i = 0;
}
if(i >= slides.length){
return;
}
repeater();
}, 10000);
}
repeater();
}
repeat();
</script>
</div>
<div class="new_arrivals">
<div class="slideNA_container">
<div class="slide_content swiper swiper-initialized swiper-horizontal" id="swiper">
<div class="card_wrapper swiper-wrapper" id="swiper-wrapper">
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pragination"></div>
</div>
</div >
</div>
<div class="bundles"></div>
<script src="js/new_arrivels.js" type="modules"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-element-bundle.min.js"></script>
</body>
<!-- <script src="js/swiper-bundle.min.js"></script> -->
<!-- <script src="js/swiper-bundle.min.js.map.json"></script> -->
<footer>
</footer>
</html>
and here is the js code
var swiper = new Swiper(".slide_content", {
slidesPerView: 3,
spaceBetween: 30,
observer: true,
observerParents: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
i am new to coding so any help will be great thank you. i followed this tuotorial https://www.youtube.com/watch?v=qOO6lVMhmGc
Upvotes: 0
Views: 1653
Answers (1)
Tomas Lucena
Reputation: 1536
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lexend+Exa:wght@100;200;300;400;500;700&family=Lexend:wght@100;200;300;400;500;700&display=swap');
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MissLisaBeauty | Home</title>
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
<style>
.swiper {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div class="new_arrivals">
<div class="slideNA_container">
<div class="slide_content swiper" id="swiper">
<div class="card_wrapper swiper-wrapper" id="swiper-wrapper">
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
<div class="card swiper-slide">
<div class="image_content">
<span class="overlay">
<div class="card_image">
<img src="images/IMG_6017.JPG" alt="" class="card_img">
</div>
</span>
</div>
<div class="card_content">
<h2 class="name">Lip Gloss</h2>
<p class="description">$5.99<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi enim sapiente</p>
<button class="button">Add to Cart</button>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pragination"></div>
</div>
</div >
</div>
<div class="bundles"></div>
<script type="module">
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.esm.browser.min.js'
const swiper = new Swiper('.swiper', {
// Optional parameters
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
slidesPerView: 3,
spaceBetween: 30,
observer: true,
observerParents: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>
here you have a working example with big part of your code!
Upvotes: 0
Related Questions
- How do you disable browser autocomplete on web form field / input tags?
- Get the size of the screen, current web page and browser window
- How do I refresh a page using JavaScript?
- How do I modify the URL without reloading the page?
- What is the best way to indent text in a DIV when it wraps?
- Saving textarea with breaks, MERN Stack
- How to add dots after certain length of characters in css?