Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Fusce tempor, justo at pellentesque molestie, turpis lacus fringilla urna, ut luctus lorem lectus iaculis elit.

Slideshow

Detail of html code

.section.slideshow#slideshow1(
  data-cycle-slides='.cycle-item'
  data-cycle-timeout='6000'
  data-cycle-speed='2000'
  data-cycle-prev='#prev'
  data-cycle-next='#next'
  data-cycle-manual-fx='scrollHorz'
  data-cycle-manual-speed='300'
  )
  - var img = [ '../Images/Demo/LotusMacro', '../Images/Demo/PacificCity', '../Images/Demo/OldMechanism' ]
  - var title = [ 'Lorem ipsum dolor sit amet', 'Consectetur adipiscing elit', 'Fusce tempor, justo at pellentesque molestie, turpis lacus fringilla urna, ut luctus lorem lectus iaculis elit.' ]
    - for (var i = 0; i < img.length; i++)
      .cycle-item(id='cycle-item' + i)
        style(scoped).
          @media screen and (max-width: 36.01rem) {
            #cycle-item3 {
              background-image: url(1000.jpg);
            }
          }
          @media screen and (min-width: 36.01rem) and (max-width: 65.01rem) {
            #cycle-item3 {
              background-image: url(1500.jpg);
            }
          }
          @media screen and (min-width: 65.01rem) {
            #cycle-item3 {
              background-image: url(2000.jpg);
            }
          }
        //- data-cycle-hash=title[i] // Attribut permettant une ancre liée à l'élément
        picture
          //- @todo L'image la plus petite est suffisante pour l'attribut srcset étant donné que l'image est inutilisée au profit de 'background-image'
          source(
            srcset=img[i] + '300.jpg'
            sizes='100vw'
            )
          img(src=img[i] + '.jpg' alt=title[i])
        .wrap.cycle-text
          div
            h2
              a(href='/')
                = title[i]