Vertical Fullpage Card Slider In jQuery - Sliding Deck

Sliding Deck is a jQuery one page scroll plugin that allows the user to scroll through page sections just like sliding a deck of cards.

How to use it:

1. Add conetent sections (cards) to the card slider.

<main class="jsd">
  <section class="card1">
    <div class="inner">
      <h1>Card 1</h1>
      <p>Consequat pulvinar. Odio diam pretium mauris dictum arcu nullam libero odio Ante etiam aliquet suscipit varius
        aenean aliquam aliquet luctus elementum pulvinar tempus cubilia, nonummy hac gravida, feugiat, nunc.</p>
    </div>
  </section>
  <section class="card2">
    <div class="inner">
      <h2>Card 2</h2>
      <p>Consequat pulvinar. Odio diam pretium mauris dictum arcu nullam libero odio Ante etiam aliquet suscipit varius
        aenean aliquam aliquet luctus elementum pulvinar tempus cubilia, nonummy hac gravida, feugiat, nunc.</p>
    </div>
  </section>
  <section class="card3">
    <div class="inner">
      <h2>Card 3</h2>
      <p>Consequat pulvinar. Odio diam pretium mauris dictum arcu nullam libero odio Ante etiam aliquet suscipit varius
        aenean aliquam aliquet luctus elementum pulvinar tempus cubilia, nonummy hac gravida, feugiat, nunc.</p>
    </div>
  </section>
  ...
</main>

2. Add the Sliding Deck plugin's JavaScript and Stylesheet to the page.

<!-- Core Stylesheet -->
<link rel="stylesheet" href="./dist/jquery.slidingDeck.css" />
<!-- Theme -->
<link rel="stylesheet" href="./dist/jquery.slidingDeck.theme.default.css" />
<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Core JavaScript -->
<script src="./dist/jquery.slidingDeck.js"></script>

3. Attach the function slidingDeck() to the top container and done.

jQuery(document).ready(function () {
  $('main').slidingDeck();
})

4. Available options to customize the card slider.

$('main').slidingDeck({
  cards: 'section',
  height: 'full', // auto, PX
  zIndexBase: 10,
  classes: {
    cardBase: 'jsd-card',
    cardActive: 'jsd-card--active',
    cardFixed: 'jsd-card--fixed',
    cardPrevious: 'jsd-card--previous',
    cardNext: 'jsd-card--next',
    cardGhost: 'jsd-card--ghost',
  }
});

5. Available options to customize the card slider.

$('main').slidingDeck({
  cards: 'section',
  height: 'full', // auto, PX
  zIndexBase: 10,
  classes: {
    cardBase: 'jsd-card',
    cardActive: 'jsd-card--active',
    cardFixed: 'jsd-card--fixed',
    cardPrevious: 'jsd-card--previous',
    cardNext: 'jsd-card--next',
    cardGhost: 'jsd-card--ghost',
  }
});

Changelog:

v0.1.3 (2021-10-25)

• Chore: package json

v0.1.2 (2021-10-24)

• Chore: implementing Gulp

v0.1.1 (2021-10-18)

• Bug: removed yellow border
• Bug: Missing jsd class from parent

---

This awesome jQuery plugin is developed by jonpontet. For more Advanced Usages, please check the demo page or visit the official website.