CSS Scroll Snap - Bilder am Layout einrasten

[Bildschirmfoto / Grafik]
 CSS Scroll Snap - Bilder am Layout einrasten

Mit Hilfe der Scroll Snap-Technik von CSS kann man steuern, dass der Browser an bestimmten Stellen im Layout einrastet, wenn über diese Punkte hinweg gescrollt werden soll.


<style>

div#slider {
 
width620px;
 
height400px;
 
overflow-yauto;
 
overflow-xhidden;
 
marginauto;
 
scroll-snap-typey mandatory;
}

.
item {
 
scroll-snap-alignstart;
}

.
item img {
 
width600px;
 
height400px;
}
</
style>

<
div id="slider">
 <
div class="item"> <img src="img/1.jpg"> </
div>
 <
div class="item"> <img src="img/2.jpg"> </div>
 <
div class="item"> <img src="img/3.jpg"> </div>
 <
div class="item"> <img src="img/4.jpg"> </div>
 <
div class="item"> <img src="img/5.jpg"> </div>
 <
div class="item"> <img src="img/6.jpg"> </div>
 <
div class="item"> <img src="img/7.jpg"> </div>
 <
div class="item"> <img src="img/8.jpg"> </div>
</
div>