为啥我的轮播顶部的按钮不起作用？

Posted 2023-03-07

【中文标题】为啥我的轮播顶部的按钮不起作用？

【英文标题】：Why are the Buttons at the top of my carousel not working?为什么我的轮播顶部的按钮不起作用？

【发布时间】：2021-02-26 19:36:21

【问题描述】：

为什么我的轮播顶部的按钮不起作用？

在此处查看 codepen 的链接： https://codepen.io/foersterrobert/pen/pobGBJP

我从这里获得了大部分轮播代码：https://css-tricks.com/css-only-carousel/

但不知何故，我的版本中的#jumplinks 不起作用！

希望你能帮忙。

html：

   <div class="slider">
   <a href="#slide-1">1</a>
   <a href="#slide-2">2</a>

   <div id="strom" class="strom">

     <div id="#slide-1">
        <h5 class="intro__text">
          Strom
        </h5>
     </div>

    <div id="#slide-2" class="strom__bundesländer">
       <div class="strom__bundesländer__map">
       <h3 class="intro__title">Bundesländer</h3>
    </div>

   </div>
 </div>
</div>

SCSS：

html 
    scroll-behavior: smooth;


body 
    margin: 0;
    scroll-behavior: smooth;


.slider 
width: 80%;
overflow: hidden;
margin: 40px auto;

& > a 
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    margin: 0 0 0.5rem 0;
    position: relative;
  

& > a:active 
    top: 1px;
  

& > a:focus 
    background: #000;
  


.strom 
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;


&::-webkit-scrollbar 
    width: 10px;
    height: 10px;
  
&::-webkit-scrollbar-thumb 
    background: black;
    border-radius: 10px;
  
&::-webkit-scrollbar-track 
    background: transparent;
  

& > div 
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%;
    margin-right: 50px;
    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.5s;
    position: relative;

    background-color: white;
    border: 1px solid #8a8a85;
    
    

很想听听你的回答。

【参考方案1】：

你在你的身份证上使用了#。只需删除哈希。更正如下。

<div id="slide-1">
        
</div>

<div id="slide-2" class="strom__bundesländer">

</div>

【讨论】：

非常感谢。这真是一个愚蠢的错误。

@RobertFörster 这不是愚蠢。有时它发生了。发生常见错误。如果您得到了答案，那么您可以将其标记为您的答案

【参考方案2】：

您好 Robert，您在 id 值没有“#”前缀的 div 部分犯了错误。删除它。

HTML：

 <div id="slide-1">
    <h5 class="intro__text">
      Strom
    </h5>
 </div>

 <div id="slide-2" class="strom__bundesländer">
   <div class="strom__bundesländer__map">
     <h3 class="intro__title">Bundesländer</h3>
   </div>
</div>