Positionieren von Ankerelementen an der Seite meiner Flexbox

Question

Ich habe zwei Fragen zu meinem Flexbox-Schieberegler, der unter "Meine Fähigkeiten" steht.

1. Wie kann ich meine Ankerelemente für die Bewegung zwischen den Schlitten so positionieren, dass sie auf der linken und rechten Seite meines Schieber erscheinen und nicht an der Spitze. Ich habe versucht, Ränder in meiner .slider > a Klasse zu ändern, aber das scheint nicht zu funktionieren.

2. Wenn Sie auf die Ankerelemente klicken, um zwischen den Folien zu wechseln, springt Ihr Bildschirm automatisch auf den Schieberegler in der Mitte des Bildschirms. Wie kann ich das beheben?

Hier ist der Schieber CSS:

.slider { 
 
    width: 840px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
    margin: 0 auto; 
 
    margin-top: 20px; 
 
    
 
} 
 

 
.slides { 
 
    display: flex; 
 
    overflow-x: auto; 
 
    
 
    border-radius: 5px; 
 
    
 
    scroll-behavior: smooth; 
 
    
 
    -webkit-overflow-scrolling: touch; 
 
    scroll-snap-points-x: repeat(840px); 
 
    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 { 
 
    flex-shrink: 0; 
 
    width: 210px; 
 
    height: 210px; 
 
    border-radius: 10px; 
 
    background: #eee; 
 
    transform-origin: center center; 
 
    position: relative; 
 
    
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    font-size: 100px; 
 
} 
 

 
.slider > a { 
 
    display: inline-flex; 
 
    width: 1.5rem; 
 
    height: 1.5rem; 
 
    background: grey; 
 
    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; 
 
}

Answer 1

Ist das, was Sie benötigen? Legen Sie Ihre "<" vor dem Rutschen Behälter und ">" nach den Folien Container und fügen Sie die folgende CSS to your slider:

.slider{ 
    display:flex; 
    align-items:center; 
} 

Fiddle: https://codepen.io/anon/pen/mpezyW

Was, warum es das springt Mitte, das bin ich mir nicht sicher.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
.bg-img { 
 
    opacity: 0.95; 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.27)), url(http://i.pi.gy/5mWAw.jpg); 
 
    height: 100%; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 

 
.centered { 
 
    text-align: center; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.slider { 
 
    width: 840px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    box-sizing: border-box; 
 
    margin: 0 auto; 
 
    margin-top: 20px; 
 
} 
 

 
.slider { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.slides { 
 
    display: flex; 
 
    overflow-x: auto; 
 
    border-radius: 5px; 
 
    scroll-behavior: smooth; 
 
    -webkit-overflow-scrolling: touch; 
 
    scroll-snap-points-x: repeat(840px); 
 
    scroll-snap-type: mandatory; 
 
    margin: 20px; 
 
} 
 

 
.slides::-webkit-scrollbar { 
 
    width: 10px; 
 
    height: 10px; 
 
} 
 

 
.slides::-webkit-scrollbar-thumb { 
 
    background: black; 
 
    border-radius: 10px; 
 
} 
 

 
.slides::-webkit-scrollbar-track { 
 
    background: transparent; 
 
} 
 

 
.slides>div { 
 
    flex-shrink: 0; 
 
    width: 210px; 
 
    height: 210px; 
 
    border-radius: 10px; 
 
    background: #eee; 
 
    transform-origin: center center; 
 
    position: relative; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    font-size: 100px; 
 
} 
 

 
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: grey; 
 
    text-decoration: none; 
 
    align-items: center; 
 
    justify-content: center; 
 
    border-radius: 50%; 
 
    margin: 0 0 0.5rem 0; 
 
    position: relative; 
 
} 
 

 
.slider>a:active { 
 
    bottom: 1px; 
 
} 
 

 
.slider>a:focus { 
 
    background: #000; 
 
} 
 

 

 
/* Don't need button navigation */ 
 

 
@supports (scroll-snap-type) { 
 
    .slider>a { 
 
    display: none; 
 
    } 
 
} 
 

 
h1 { 
 
    font-family: 'Lato', sans-serif; 
 
    color: white; 
 
    font-weight: 600; 
 
    font-size: 100px; 
 
} 
 

 
h2 { 
 
    font-family: 'Lato', sans-serif; 
 
    color: black; 
 
    font-size: 40px; 
 
    text-align: center; 
 
} 
 

 
.grid { 
 
    display: grid; 
 
    grid-template-columns: 370px 1fr 1fr 1fr 370px; 
 
    grid-template-areas: ". title title title ." ". about about about ." ". sidebar content content ." ". footer footer footer. "; 
 
} 
 

 
.title { 
 
    grid-area: title; 
 
    padding-top: 50px; 
 
    padding-bottom: 50px; 
 
    background-color: #FFFFFF; 
 
} 
 

 
.about { 
 
    grid-area: about; 
 
    padding-top: 50px; 
 
    padding-bottom: 50px; 
 
    background-color: #EBEBEB; 
 
    grid-column-start: 1; 
 
    grid-column-end: 6; 
 
} 
 

 
.sidebar { 
 
    grid-area: sidebar; 
 
} 
 

 
.content { 
 
    grid-area: content; 
 
} 
 

 
.footer { 
 
    grid-area: footer; 
 
}

<div class="bg-img"> 
 
    <h1 class="centered">Lorem ipsum,<br>dolor sit amet.</h1> 
 
</div> 
 

 
<div class="grid"> 
 
    <div class="title"> 
 
    <h2>My skills</h2> 
 

 
    <div class="slider"> 
 

 
     <a href="#slide-1">&lt;</a> 
 

 
     <div class="slides"> 
 
     <div id="slide-1"> 
 
      1 
 
     </div> 
 
     <div> 
 
      2 
 
     </div> 
 
     <div> 
 
      3 
 
     </div> 
 
     <div> 
 
      4 
 
     </div> 
 
     <div> 
 
      5 
 
     </div> 
 
     <div id="slide-2"> 
 
      6 
 
     </div> 
 
     </div> 
 
     <a href="#slide-2">&gt;</a> 
 
    </div> 
 

 
    </div> 
 
    <div class="about"> 
 
    <h2>About Me</h2> 
 
    </div> 
 
    <div class="sidebar">Sidebar</div> 
 
    <div class="content">Content 
 
    <p>A</p> 
 
    <p>B</p> 
 
    </div> 
 
    <div class="footer">Footer</div> 
 
</div>