Styleguide 0.28.5

37 - Scroll snap preview

Scroll snap for article preview

37.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/slider-01.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/slider-02.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/slider-03.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/slider-04.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/slider-05.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/slider-06.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>