我试图建立这个电子商务网站，但我有麻烦使用这个触摸滑块称为swiper由idangero的swiper元素似乎不想滑动或移动这里是我的代码。
<!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>下面是js代码
var swiper = new Swiper(".slide_content", {
slidesPerView: 3,
spaceBetween: 30,
observer: true,
observerParents: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});我是新的编码，所以任何帮助将是伟大的，谢谢你。我遵循了这个教程https://www.youtube.com/watch?v=qOO6lVMhmGc
1条答案
按热度按时间yzuktlbb1#
这里有一个包含大部分代码工作示例！