Question

我很难使两个按钮同时贴在两侧。

这是css文件

#projects h2{
    color:#374054;
    margin-bottom:10px;
}

#projects{
    background-color:#f9f8fd;
    padding:10px 10px;
    border-bottom:1px solid #dcd9d9;
    text-align:center;
}

.projects {
    position: relative;
}

.slider {
    max-width: 100%;
    height: 500px;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-scroll-snap-type: x mandatory;
    position: relative;
}


[aria-label="projects"]:focus {
    outline: 4px solid DodgerBlue;
    outline-offset: -3px;
}

[aria-label="projects"] ul {
    display: flex;
}

[aria-label="projects"] li {
    list-style: none;
    flex: 0 0 100%;
    padding: 2rem;
    height: 60vh;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

[aria-label="projects"] figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

[aria-label="projects"] img {
    max-height: calc(100% - 2rem);
    max-width: 100%;
    margin-top: 2rem;
}

#instructions {
  position: relative;
}

#instructions p {
  padding: 1rem;
  text-align: center;
  color: #fefefe;
  background-color: #111;
}

#focus, #hover, #hover-and-focus, #touch {
  display: none;
}

[aria-label="projects"]:hover:focus + #instructions #hover-and-focus {
  display: block;
}

#instructions svg {
  height: 1.5rem;
  width: 1.5rem;
  fill: #fff;
  vertical-align: -0.5rem;
}

.touch #instructions p {
  display: none !important;
}

.touch #instructions #touch {
  display: block !important;
}

[aria-label="projects controls"] li {
  list-style: none;
}

[aria-label="projects controls"] button {
  /* position:absolute; */
  top: 0;
  background: #111;
  color: #fff;
  border: 2px solid #111;
  border-radius: 0;
  width: 3rem;
  height: calc(60vh + 4px);
}

#previous {
  left: 0;
}

#next {
  right: 0;
}

button svg {
  width: 2rem;
  height: 2rem;
}

这是html文件

<div id="projects">
        <h2 class="heading">Projects</h2>
        <svg style="display:none">
            <symbol id="arrow-left" viewBox="0 0 10 10">
                <path fill="currentColor" d="m9 4h-4v-2l-4 3 4 3v-2h4z"/>
            </symbol>
            <symbol id="arrow-right" viewBox="0 0 10 10">
                <path fill="currentColor" d="m1 4h4v-2l4 3-4 3v-2h-4z"/>
            </symbol>
        </svg>
        <div class="projects">
            <div class="slider" aria-describedby="instructions" role="region" aria-label="projects">
                <ul>
                    <li>
                        <figure>
                            <img src="images/1.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="images/2.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="images/3.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="images/4.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="images/5.jpg">
                        </figure>
                    </li>
                </ul>
            </div>
            <div id="instructions">
                <p id="hover-and-focus">
                    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
                    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
                </p>
            </div>
        </div>
    </div>

这是js文件


     const projects = document.querySelector('[aria-label="projects"]')
     const slides = projects.querySelectorAll('li')
     const instructions = document.getElementById('instructions')

     const observerSettings = {
       root: projects,
       rootMargin: '-10px'
     }

     if ('IntersectionObserver' in window) {
       const callback = (slides, observer) => {
         Array.prototype.forEach.call(slides, function(entry) {
           entry.target.classList.remove('visible')
           if (!entry.intersectionRatio > 0) {
             return
           }
           let img = entry.target.querySelector('img')
           if (img.dataset.src)  {
             img.setAttribute('src', img.dataset.src)
             img.removeAttribute('data-src')
           }
           entry.target.classList.add('visible')
         })
       }

       const observer = new IntersectionObserver(callback, observerSettings)
       Array.prototype.forEach.call(slides, t => observer.observe(t))

       const controls = document.createElement('ul')
       controls.setAttribute('aria-label', 'projects controls')
       controls.innerHTML = `
       <li>
         <button id="previous" aria-label="previous">
           <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
         </button>
       </li>
       <li>
         <button id="next" aria-label="next">
           <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
         </button>
       </li>
       `

       instructions.parentNode.insertBefore(controls, instructions.nextElementSibling)
       instructions.parentNode.style.padding = '0 3rem'

       function scrollIt (slideToShow) {
         let scrollPos = Array.prototype.indexOf.call(slides, slideToShow) * (projects.scrollWidth / slides.length)
         projects.scrollLeft = scrollPos
       }

       function showSlide (dir, slides) {
         let visible = document.querySelectorAll('[aria-label="projects"] .visible')
         let i = dir === 'previous' ? 0 : 1

         if (visible.length > 1) {
           scrollIt(visible[i])
         } else {
           let newSlide = i === 0 ? visible[0].previousElementSibling : visible[0].nextElementSibling
           if (newSlide) {
             scrollIt(newSlide)
           }
         }
       }

       controls.addEventListener('click', function (e) {
         showSlide(e.target.closest('button').id, slides)
       })

     } else {
       Array.prototype.forEach.call(slides, function (s) {
         let img = s.querySelector('img')
         img.setAttribute('src', img.getAttribute('data-src'))
       })
     }

我想制作一张带有控制按钮以左右控制的幻灯片图片。但是，两个按钮都放在图像的正下方，并在中心对齐，左按钮在顶部，右按钮在底部。我不知道该怎么解决。

Answer 1

you place the buttons inside the slider wrapper the left before the ul of images and right after and you use position absolute

#projects h2{
    color:#374054;
    margin-bottom:10px;
}

#projects{
    background-color:#f9f8fd;
    padding:10px 10px;
    border-bottom:1px solid #dcd9d9;
    text-align:center;
}

.projects {
    position: relative;
}

.slider {
    max-width: 100%;
    height: 500px;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-scroll-snap-type: x mandatory;
    position: relative;
}


[aria-label="projects"]:focus {
    outline: 4px solid DodgerBlue;
    outline-offset: -3px;
}

[aria-label="projects"] ul {
    display: flex;
}

[aria-label="projects"] li {
    list-style: none;
    flex: 0 0 100%;
    padding: 2rem;
    height: 60vh;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

[aria-label="projects"] figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

[aria-label="projects"] img {
    max-height: calc(100% - 2rem);
    max-width: 100%;
    margin-top: 2rem;
}

#instructions {
  position: relative;
}

#instructions p {
  padding: 1rem;
  text-align: center;
  color: #fefefe;
  background-color: #111;
}

#focus, #hover, #hover-and-focus, #touch {
  display: none;
}

[aria-label="projects"]:hover:focus + #instructions #hover-and-focus {
  display: block;
}

#instructions svg {
  height: 1.5rem;
  width: 1.5rem;
  fill: #fff;
  vertical-align: -0.5rem;
}

.touch #instructions p {
  display: none !important;
}

.touch #instructions #touch {
  display: block !important;
}

[aria-label="projects controls"] li {
  list-style: none;
}

[aria-label="projects controls"] button {
  /* position:absolute; */
  top: 0;
  background: #111;
  color: #fff;
  border: 2px solid #111;
  border-radius: 0;
  width: 3rem;
  height: calc(60vh + 4px);
}

#previous {
position:absolute;
  left: 0;
}

#next {
position:absolute;
  right: 0;
}

button svg {
  width: 2rem;
  height: 2rem;
}
here is html file

<div id="projects">
        <h2 class="heading">Projects</h2>
        <svg style="display:none">
            <symbol id="arrow-left" viewBox="0 0 10 10">
                <path fill="currentColor" d="m9 4h-4v-2l-4 3 4 3v-2h4z"/>
            </symbol>
            <symbol id="arrow-right" viewBox="0 0 10 10">
                <path fill="currentColor" d="m1 4h4v-2l4 3-4 3v-2h-4z"/>
            </symbol>
        </svg>
        <div class="projects">
            <div class="slider" aria-describedby="instructions" role="region" aria-label="projects">
             <li>
         <button id="previous" aria-label="previous">
           <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
         </button>
       </li>
                <ul>
                    <li>
                        <figure>
                            <img src="images/1.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="images/2.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="images/3.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="images/4.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="images/5.jpg">
                        </figure>
                    </li>
                </ul>
                 <li>
         <button id="next" aria-label="next">
           <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
         </button>
       </li>
            </div>
            
            <div id="instructions">
                <p id="hover-and-focus">
                    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
                    <svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
                </p>
            </div>
        </div>
    </div>



      
      
       `

如何使前后按钮粘在两侧

1 个答案: