CSS 图库 Slider 问题

Question

I have been trying to create a simple CSS and HTML only image gallery slider. This is just for practice and it's really bugging me. When I click the arrow and the container slides over, it slides the full page including the navigation and footer to the left, is there any way I can improve this so that only the images slide over? I've tried messing with the overflow etc.

 .galleryw { display: grid; grid-template-columns: repeat(3, 100%); scroll-behavior: smooth; margin-top: 5px; padding-bottom: 40px }.galleryw section { width: 100%; position: relative; display: grid; transition: transform.2s; grid-template-columns: repeat(6, auto); margin: 10px 0; }.galleryw section.item { padding: 0 2px; transition: 250ms all; }.galleryw section.item:hover { -ms-transform: scale(1.5); /* IE 9 */ -webkit-transform: scale(1.5); /* Safari 3-8 */ transform: scale(1.5); }.galleryw section a { position: absolute; color: #000; text-decoration: none; font-size: 6em; width: 40px; padding: 10px; text-align: center; z-index: 1; }.galleryw section a:nth-of-type(1) { top: 0; bottom: 0; left: 0; }.galleryw section a:nth-of-type(2) { top: 1; bottom: 0; right: 0; }

 <div class="titles"><h2>ANIMALS<span class="red">.</span></h2></div> <div class="galleryw"> <section id="section1"> <a href="#section2">‹</a> <div class="item"> <img src="img/zebs.png" /><br><h3>ZEBRA<span class="red">.</span></h3> </div> <div class="item"> <img src="img/toitles.png" /><br><h3>TURTLE<span class="red">.</span></h3> </div> <div class="item"> <img src="img/dolph.png" /> <br><h3>DOLPHIN<span class="red">.</span></h3> </div> <div class="item"> <img src="img/re.png" /><br><h3>CHAMELEON<span class="red">.</span></h3> </div> <div class="item"> <img src="img/king.png" /><br><h3>KINGFISHER</h3> </div> <div class="item"> <img src="img/arc.png" /><br><h3>SNOWFOX<span class="red">.</span></h3> </div> <a href="#section2">›</a> </section> <section id="section2"> <a href="#section1">‹</a> <div class="item"> <img src="img/king2.png" /><br><h3>KINGFISHER<span class="red">.</span></h3> </div> <div class="item"> <img src="img/ele2.png" /><br><h3>ELEPHANT<span class="red">.</span></h3> </div> <div class="item"> <img src="img/rac.png" /> <br><h3>RACCOON<span class="red">.</span></h3></div> <div class="item"> <img src="img/rab.png" /><br><h3>RABBIT<span class="red">.</span></h3> </div> <div class="item"> <img src="img/deer.png" /><br><h3>DEER<span class="red">.</span></h3> </div> <div class="item"> <img src="img/pea.png" /><br><h3>PEACOCK<span class="red">.</span></h3> </div> <a href="#section1">›</a> </section> </div>

You can try it here

http://kny.me/practice/gallery.html

Answer 1

Set overflow-x to auto on the gallery.

 .galleryw { display: grid; grid-template-columns: repeat(3, 100%); scroll-behavior: smooth; margin-top: 5px; padding-bottom: 40px; overflow-x:auto; }.galleryw section { width: 100%; position: relative; display: grid; transition: transform.2s; grid-template-columns: repeat(6, auto); margin: 10px 0; }.galleryw section.item { padding: 0 2px; transition: 250ms all; }.galleryw section.item:hover { -ms-transform: scale(1.5); /* IE 9 */ -webkit-transform: scale(1.5); /* Safari 3-8 */ transform: scale(1.5); }.galleryw section a { position: absolute; color: #000; text-decoration: none; font-size: 6em; width: 40px; padding: 10px; text-align: center; z-index: 1; }.galleryw section a:nth-of-type(1) { top: 0; bottom: 0; left: 0; }.galleryw section a:nth-of-type(2) { top: 1; bottom: 0; right: 0; }

 <div class="titles"><h2>ANIMALS<span class="red">.</span></h2></div> <div class="galleryw"> <section id="section1"> <a href="#section2">‹</a> <div class="item"> <img src="img/zebs.png" /><br><h3>ZEBRA<span class="red">.</span></h3> </div> <div class="item"> <img src="img/toitles.png" /><br><h3>TURTLE<span class="red">.</span></h3> </div> <div class="item"> <img src="img/dolph.png" /> <br><h3>DOLPHIN<span class="red">.</span></h3> </div> <div class="item"> <img src="img/re.png" /><br><h3>CHAMELEON<span class="red">.</span></h3> </div> <div class="item"> <img src="img/king.png" /><br><h3>KINGFISHER</h3> </div> <div class="item"> <img src="img/arc.png" /><br><h3>SNOWFOX<span class="red">.</span></h3> </div> <a href="#section2">›</a> </section> <section id="section2"> <a href="#section1">‹</a> <div class="item"> <img src="img/king2.png" /><br><h3>KINGFISHER<span class="red">.</span></h3> </div> <div class="item"> <img src="img/ele2.png" /><br><h3>ELEPHANT<span class="red">.</span></h3> </div> <div class="item"> <img src="img/rac.png" /> <br><h3>RACCOON<span class="red">.</span></h3></div> <div class="item"> <img src="img/rab.png" /><br><h3>RABBIT<span class="red">.</span></h3> </div> <div class="item"> <img src="img/deer.png" /><br><h3>DEER<span class="red">.</span></h3> </div> <div class="item"> <img src="img/pea.png" /><br><h3>PEACOCK<span class="red">.</span></h3> </div> <a href="#section1">›</a> </section> </div>

Answer 2

In order to scroll just the galleryw element and not the whole page you need to add overflow-x: hidden or overflow-x: auto to your galleryw css class.
The vertical jump is due to the implementation of the anchor links which will use the ScrollIntoView js function in order to get the section you want on the screen.
By default, the alignment is to the top-left corner so you need either to re-arrange your html or to use some javascript with some minor html tweaks.
I'm presenting you the second solution since is way faster and doesn't need you to change the whole layout of your page:

 function init() { let galleryw = document.getElementsByClassName("galleryw")[0]; let toSection1 = document.getElementsByClassName("toSection1"); let toSection2 = document.getElementsByClassName("toSection2"); for(const button of toSection1) button.onclick = () => galleryw.scrollBy(-galleryw.offsetWidth, 0); for(const button of toSection2) button.onclick = () => galleryw.scrollBy(galleryw.offsetWidth, 0); }

 .galleryw { overflow-x: hidden; /* ADDED */ display: grid; grid-template-columns: repeat(3, 100%); scroll-behavior: smooth; margin-top: 5px; padding-bottom: 40px }.galleryw section { width: 100%; position: relative; display: grid; transition: transform.2s; grid-template-columns: repeat(6, auto); margin: 10px 0; }.galleryw section.item { padding: 0 2px; transition: 250ms all; }.galleryw section.item:hover { -ms-transform: scale(1.5); /* IE 9 */ -webkit-transform: scale(1.5); /* Safari 3-8 */ transform: scale(1.5); }.galleryw section a { position: absolute; color: #000; text-decoration: none; font-size: 6em; width: 40px; padding: 10px; text-align: center; z-index: 1; }.galleryw section a:nth-of-type(1) { top: 0; bottom: 0; left: 0; }.galleryw section a:nth-of-type(2) { top: 1; bottom: 0; right: 0; }.toSection1, .toSection2 { cursor:pointer;/* ADDED */ }

 <body onload = "init()"> <div class="titles"><h2>ANIMALS<span class="red">.</span></h2></div> <div class="galleryw"> <section id="section1"> <a class="toSection2">‹</a><.-- Changed --> <div class="item"> <img src="img/zebs.png" /><br><h3>ZEBRA<span class="red">.</span></h3> </div> <div class="item"> <img src="img/toitles.png" /><br><h3>TURTLE<span class="red">.</span></h3> </div> <div class="item"> <img src="img/dolph.png" /> <br><h3>DOLPHIN<span class="red">.</span></h3> </div> <div class="item"> <img src="img/re.png" /><br><h3>CHAMELEON<span class="red">.</span></h3> </div> <div class="item"> <img src="img/king.png" /><br><h3>KINGFISHER</h3> </div> <div class="item"> <img src="img/arc.png" /><br><h3>SNOWFOX<span class="red">.</span></h3> </div> <a class="toSection2">›</a><.-- Changed --> </section> <section id="section2"> <a class="toSection1">‹</a><.-- Changed --> <div class="item"> <img src="img/king2.png" /><br><h3>KINGFISHER<span class="red">.</span></h3> </div> <div class="item"> <img src="img/ele2.png" /><br><h3>ELEPHANT<span class="red">.</span></h3> </div> <div class="item"> <img src="img/rac.png" /> <br><h3>RACCOON<span class="red">.</span></h3></div> <div class="item"> <img src="img/rab.png" /><br><h3>RABBIT<span class="red">.</span></h3> </div> <div class="item"> <img src="img/deer.png" /><br><h3>DEER<span class="red">.</span></h3> </div> <div class="item"> <img src="img/pea.png" /><br><h3>PEACOCK<span class="red">.</span></h3> </div> <a class="toSection1">›</a> <!-- Changed --> </section> </div> </body>

I've just added the init function which get called onload and changed the anchors to normal <a> tags with a class = "toSection..." to recognize them.
The init function uses the scrollBy function on the galleryw so that when our "anchors" get clicked they just scroll the container and not the whole page.