Slider 带箭头的导航 (HTML,CSS,JAVASCRIPT)

Question

我正在制作这样的 slider 导航：

目前我现在能做到的就是这个

 * { box-sizing: border-box; }.slider { width: 300px; text-align: center; overflow: hidden; }.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* scroll-snap-points-x: repeat(300px); scroll-snap-type: mandatory; */ }.slides::-webkit-scrollbar { width: 10px; height: 10px; }.slides::-webkit-scrollbar-thumb { background: black; border-radius: 10px; }.slides::-webkit-scrollbar-track { background: transparent; }.slides > div { scroll-snap-align: start; flex-shrink: 0; width: 300px; height: 300px; margin-right: 50px; border-radius: 10px; background: #eee; transform-origin: center center; transform: scale(1); transition: transform 0.5s; position: relative; display: flex; justify-content: center; align-items: center; font-size: 100px; }.slides > div:target { /* transform: scale(0.8); */ }.author-info { background: rgba(0, 0, 0, 0.75); color: white; padding: 0.75rem; text-align: center; position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; }.author-info a { color: white; } img { object-fit: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }.slider > a { display: inline-flex; width: 1.5rem; height: 1.5rem; background: white; text-decoration: none; align-items: center; justify-content: center; border-radius: 50%; margin: 0 0 0.5rem 0; position: relative; }.slider > a:active { top: 1px; }.slider > a:focus { background: #000; } /* Don't need button navigation */ @supports (scroll-snap-type) {.slider > a { display: none; } } html, body { height: 100%; overflow: hidden; } body { display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, #74ABE2, #5563DE); font-family: 'Ropa Sans', sans-serif; }

 <div class="slider"> <a href="#slide-1">1</a> <a href="#slide-2">2</a> <a href="#slide-3">3</a> <a href="#slide-4">4</a> <a href="#slide-5">5</a> <div class="slides"> <div id="slide-1"> 1 </div> <div id="slide-2"> 2 </div> <div id="slide-3"> 3 </div> <div id="slide-4"> 4 </div> <div id="slide-5"> 5 </div> </div> </div>

但我需要的正是上图。 如何做到这一点？ 我只是前端新手，所以基本上我还在从头开始学习 css。

Answer 1

您可以使用jquery并添加一些 CSS

 jQuery(document).ready(function($) { var slideCount = $('#slider ul li').length; var slideWidth = $('#slider ul li').width(); var slideHeight = $('#slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider').css({ width: slideWidth, height: slideHeight }); $('#slider ul').css({ width: sliderUlWidth, marginLeft: -slideWidth }); $('#slider ul li:last-child').prependTo('#slider ul'); function moveLeft() { $('#slider ul').animate({ left: +slideWidth }, 200, function() { $('#slider ul li:last-child').prependTo('#slider ul'); $('#slider ul').css('left', ''); }); }; function moveRight() { $('#slider ul').animate({ left: -slideWidth }, 200, function() { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); }); }; $('a.control_prev').click(function() { moveLeft(); }); $('a.control_next').click(function() { moveRight(); }); });

 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600); html { border-top: 5px solid #fff; background: #58DDAF; color: #2a2a2a; } html, body { margin: 0; padding: 0; font-family: 'Open Sans'; } h1 { color: #fff; text-align: center; font-weight: 300; } #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; } #slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } #slider ul li { position: relative; display: block; float: left; margin-left: 39px; padding: 0; width: 10%; height: 33%; background: #ccc; text-align: center; line-height: 60px; border-radius: 100px; } a.control_prev, a.control_next { position: absolute; z-index: 999; display: block; padding: 4% 2%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 600; font-size: 18px; opacity: 0.8; cursor: pointer; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease; } a.control_prev { border-radius: 0 2px 2px 0; } a.control_next { right: 0; border-radius: 2px 0 0 2px; }.slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; }

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <div id="slider"> <a href="#" class="control_next">>></a> <a href="#" class="control_prev"> <</a> <ul> <li>SLIDE 1</li> <li style="background: #aaa;">SLIDE 2</li> <li>SLIDE 3</li> <li style="background: #aaa;">SLIDE 4</li> </ul> </div>