24.1 - Scroll snap - Normal
Scroll snap for article preview
<div class="row"> <div class="scrollsnap-wrapper"> <h1 class="headline scrollsnap-title">Siste nytt</h1> <div class="scroll-container"> <div class="snap-scroller"> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="/assets/test/berger.jpg"> </figure> <h1 itemprop="headline" class="headline">Nå tror vi de endelig har klart det!</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="/assets/test/blipps.jpg"> </figure> <h1 itemprop="headline" class="headline">Krever momsfritaket fjernet</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="/assets/test/trinni-sus.jpg"> </figure> <h1 itemprop="headline" class="headline">I fjor gikk 14.000 elever glipp av dette stipendet</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="/assets/test/berger.jpg"> </figure> <h1 itemprop="headline" class="headline">Anette fikk den første Tesla Model 3 i Norge - lenge før alle andre</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="/assets/test/blipps.jpg"> </figure> <h1 itemprop="headline" class="headline">Apple Watch med eSIM kan være på vei</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="/assets/test/trinni-sus.jpg"> </figure> <h1 itemprop="headline" class="headline">Den gunstige sparekontoen kan koste deg 30.000 kroner i gebyr</h1> </a> </article> </div> </div> </div> </div>
24.2 - Scroll snap - video gallery
Scroll snap for videos
<div class="row"> <div class="scrollsnap-wrapper"> <h1 class="headline scrollsnap-title"><span>Siste videoer</span></h1> <div class="scroll-container"> <div class="snap-scroller video"> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/aCbEyYc4-1920.jpg"> </figure> <h1 itemprop="headline" class="headline">Tatt på senga av "Farmen"-kjærestens gaveønske </h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/5UfqmF0d-1920.jpg"> </figure> <h1 itemprop="headline" class="headline">Hertugparets "levende" voksfigurer vekker oppsikt</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/fR5Z7odf-1920.jpg"> </figure> <h1 itemprop="headline" class="headline">Blir satt ut av drøy snap fra Nordthug</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/aCbEyYc4-1920.jpg"> </figure> <h1 itemprop="headline" class="headline">Tatt på senga av "Farmen"-kjærestens gaveønske </h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/5UfqmF0d-1920.jpg"> </figure> <h1 itemprop="headline" class="headline">Hertugparets "levende" voksfigurer vekker oppsikt</h1> </a> </article> <article class="inside preview" itemscope itemtype="http://schema.org/NewsArticle" role="article" data-id="#"> <a href="#" itemprop="url"> <figure> <img itemprop="image" title="" alt="" src="https://cdn.jwplayer.com/thumbs/fR5Z7odf-1920.jpg"> </figure> <h1 itemprop="headline" class="headline">Blir satt ut av drøy snap fra Nordthug</h1> </a> </article> </div> </div> </div> </div>