First, use Swiper to enable left-right swiping!
Use HTML and CSS to implement a text and image layout display!
Code:
隐藏内容：会员可查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Music demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper@8/swiper-bundle.js"> </script>
<style>
html,
body {
position: relative;
height: 100%;
max-width:466px
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 16px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
body {
background: #eee;
}
.swiper {
width: 100%;
height: 300px;
margin: 20px 0;
}
.swiper-slide ul{
height:300px;
width:100%;
list-style: none;
margin: 0;
padding: 0;
}
.swiper-slide ul li{
height: 100px;
}
.musicLeft{
width: 20%;
float: left;
height: 100%;
background: #e6e7eb;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.musicRight{
width: 80%;
float: right;
height: 100%;
background: #e6e7eb;
position: relative;
}
.musicBox{
float: left;
height: 100%;
width: 100%;
}
.musicBox img{
width:80px;
height:80px;
border-radius: 10px;
}
.musicRight h3 , p{
text-align: left;
padding: 0 0 0 20px;
}
.musicRight h3{
margin: 0;
padding: 0;
position: absolute;
top: 30%;
transform: translate(10px,-50%);
font-weight: unset;
font-size: 18px;
}
.musicRight p{
margin: 0;
padding: 0;
position: absolute;
top: 60%;
transform: translate(10px,-50%);
color: #605c56;
}
.musicRight font{
background: #edd2db;
padding: 2px;
font-size: 14px;
border-radius: 6px;
color: #c41d1d;
margin-right: 6px;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul>
<li>
<div class="musicBox">
<div class="musicLeft">
<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
</div>
<div class="musicRight">
<h3>如果当时</h3>
<p><font>古风热门榜第一名</font>许嵩</p>
</div>
</div>
</li>
<li>
<div class="musicBox">
<div class="musicLeft">
<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
</div>
<div class="musicRight">
<h3>素颜</h3>
<p><font>流行热门榜第一名</font>许嵩</p>
</div>
</div>
</li>
<li>
<div class="musicBox">
<div class="musicLeft">
<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
</div>
<div class="musicRight">
<h3>悬溺</h3>
<p>葛东琪 </p>
</div>
</div>
</li>
</ul>
</div>
<div class="swiper-slide">
<ul>
<li>
<div class="musicBox">
<div class="musicLeft">
<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
</div>
<div class="musicRight">
<h3>如果当时</h3>
<p><font>古风热门榜第一名</font>许嵩</p>
</div>
</div>
</li>
<li>
<div class="musicBox">
<div class="musicLeft">
<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
</div>
<div class="musicRight">
<h3>素颜</h3>
<p><font>流行热门榜第一名</font>许嵩</p>
</div>
</div>
</li>
<li>
<div class="musicBox">
<div class="musicLeft">
<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
</div>
<div class="musicRight">
<h3>悬溺</h3>
<p>葛东琪 </p>
</div>
</div>
</li>
</ul>
</div>
<div class="swiper-slide">
<ul>
<li>
<div class="musicBox">
<div class="musicLeft">
<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
</div>
<div class="musicRight">
<h3>如果当时</h3>
<p><font>古风热门榜第一名</font>许嵩</p>
</div>
</div>
</li>
<li>
<div class="musicBox">
<div class="musicLeft">
<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
</div>
<div class="musicRight">
<h3>素颜</h3>
<p><font>流行热门榜第一名</font>许嵩</p>
</div>
</div>
</li>
<li>
<div class="musicBox">
<div class="musicLeft">
<img src="https://www.4s5.cn/wp-content/uploads/2023/02/f8a70c8797142232.jpg">
</div>
<div class="musicRight">
<h3>悬溺</h3>
<p>葛东琪 </p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</script>
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
</body>
</html>
