css+js实现卡片式左右切换幻灯片头部效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：css+js实现卡片式左右切换幻灯片头部效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
/* RESET CSS */
* {margin: 0; padding: 0;}

/* CAROUSEL CSS */
.carousel {position: relative;}
.carousel::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: inset 0px 0px 120px 30px rgba(0,0,0,0.35);
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.carousel ul {
  overflow: auto; 
  display: flex; 
  height: 500px;
  max-height: 500px;
  scroll-snap-type: x mandatory;
  scroll-snap-points-y: repeat(100%);
  scroll-snap-align: left;
  scroll-behavior: smooth;
  background: gray;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.carousel ul::-webkit-scrollbar {display: none; /* Hide scrollbar for Chrome, Safari and Opera */} 
.carousel ul li {
  width: 100%; 
  min-width: 100%;
  list-style: none; 
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: bold;
  font-size: 25px;
  text-align: center;
  margin-right: calc(-100% + 300px);
  transition: transform 0.2s linear;
  opacity: 0.3;
  line-height: 1;
  position: relative;
  bottom: 15px;
}
.carousel ul li.selected {opacity: 1; z-index: 9;}
.carousel ul li.selected > div {transform: scale(1.6);}
.carousel ul li > div {
  z-index: 9; 
  margin: 0 auto; 
  max-width: 170px;
  background: white;
  transition: all 0.2s linear;
  transform: scale(0.95);
  padding: 20px 15px;
}
.carousel ul li > div > div {
  background: url(//repo.bfw.wiki/bfwrepo/image/6374680372999.png) center center / cover no-repeat; 
  height: 110px;
  margin-bottom: 15px;
  margin: -20px -15px 15px;
}
.carousel ul li div a {color: white; display: inline-block; background: white; color: white; padding: 8px 15px; font-size: 13px; text-decoration: none; border-radius: 4px; margin-top: 17px; background: black;}

.carousel ol {position: absolute; bottom: 15px; display: flex; justify-content: center; left: 50%; transform: translateX(-50%); z-index: 9;}
.carousel ol li {list-style: none; padding: 0 5px;}
.carousel ol li a {display: block; height: 10px; width: 10px; border: 2px solid white; background: transparent; border-radius: 100%;}
.carousel ol li.selected a {background: white;}
.carousel .prev, .carousel .next {user-select:none; cursor: pointer; font-size: 50px; color: white; position: absolute; left: 0; padding: 15px; top: 50%; transform: translateY(-50%); z-index: 9;}
.carousel .next {left: auto; right: 0;}

/* RESPONSIVE CSS */
@media only screen and (max-width: 600px) {
  .carousel ul li div {display: none;}
}

/* DEMO CSS */
.carousel ul li:nth-child(2) > div > div,
.carousel ul li:nth-child(6) > div > div {background-image: url(//repo.bfw.wiki/bfwrepo/image/637467fb4d3d9.png);}
.carousel ul li:nth-child(3) > div > div,
.carousel ul li:nth-child(7) > div > div {background-image: url(//repo.bfw.wiki/bfwrepo/image/637467f0261b2.png);}
.carousel ul li:nth-child(4) > div > div,
.carousel ul li:nth-child(8) > div > div {background-image: url(//repo.bfw.wiki/bfwrepo/image/637467e803d75.png);}
p, h2 {margin: 15px auto; padding: 0 15px; max-width: 800px;}
h2 {margin-top: 30px;}
</style>




</head>

<body >
  <div class="carousel" duration="7000">
  <ul tabindex="0">
    <li id="c1_slide1"><div><div></div>Nice cat number 1<br /><a href="https://www.google.com">adopt me</a></div></li>  
    <li id="c1_slide2"><div><div></div>Nice cat number 2<br /><a href="https://www.google.com">adopt me</a></div></li>  
    <li id="c1_slide3"><div><div></div>Nice cat number 3<br /><a href="https://www.google.com">adopt me</a></div></li>  
    <li id="c1_slide4"><div><div></div>Nice cat number 4<br /><a href="https://www.google.com">adopt me</a></div></li>  
    <li id="c1_slide5"><div><div></div>Nice cat number 5<br /><a href="https://www.google.com">adopt me</a></div></li>  
    <li id="c1_slide6"><div><div></div>Nice cat number 6<br /><a href="https://www.google.com">adopt me</a></div></li>  
    <li id="c1_slide7"><div><div></div>Nice cat number 7<br /><a href="https://www.google.com">adopt me</a></div></li>  
    <li id="c1_slide8"><div><div></div>Nice cat number 8<br /><a href="https://www.google.com">adopt me</a></div></li>  
  </ul>
  <ol>
    <li><a href="#c1_slide1"></a></li>
    <li><a href="#c1_slide2"></a></li>
    <li><a href="#c1_slide3"></a></li>
    <li><a href="#c1_slide4"></a></li>
    <li><a href="#c1_slide5"></a></li>
    <li><a href="#c1_slide6"></a></li>
    <li><a href="#c1_slide7"></a></li>
    <li><a href="#c1_slide8"></a></li>
  </ol>
  <div class="prev">&lsaquo;</div>
  <div class="next">&rsaquo;</div>
</div>
<h2>Technique</h2>
<p>The above is an unordened list with horizontal overflow set to auto, snap scrolling and hidden scrollbars. You can swipe the carousel with your finger on touch screens through native touch scroll. You can use the arrow keys on your keyboard to scroll the carousel (when the carousel has focus). The bullets are actually anchor links, which trigger a 'scroll-behaviour: smooth' scroll. The script uses a simple setInterval for autoplay which does not fire during hover and can be set on the carousel div in a custom attribute in milliseconds. Also checkout the <a href="" target="_top">Carousel with CSS scroll snap</a>.</p>

<h2>Browser compatibility</h2>
<p>The code is tested on the newest versions of Chrome, Firefox, Chrome mobile and Firefox mobile in april 2021. This code uses fairly new techniques, like scroll snapping. However, I expect this solution to degrade quite graceful. It even looks and works 'okay-ish' without javascript.</p>

<h2>About the author</h2>
<p>I am a <a href="https://www.usecue.com/">website performance expert</a> and for <a href="https://www.usecue.com/portfolio/po.........完整代码请登录后点击上方下载按钮下载查看