jQuery Slideshow Tip Cards

Home Slideshow & ScrollerjQuery Slideshow Tip Cards

jQuery Slideshow Tip Cards

4 years ago Views

21769

5745

peachananr

This is an animated card layout.

Modern browsers such as Chrome, Firefox, and Safari on desktop have been tested. I have not tested this on IE.

Tip Cards plugin let you create a layout of cards with a card-like interaction that you see on Google Tips Page. I've also added several new animation options so that you can personalize it to your own liking.

To add this to your website, all you have to do is include the latest jQuery library together withjquery.tip_cards.js and tip_cards.css into your document's <head>, and follow the HTML markup as shown below.

This is the default markup if you are looking to replicate the effect you see on Google Tips Page.

<body>
  ..
  <ul class="tips">
    <li>
      <div class="tc_front">
        <a href="#tip1">...</a>
      </div>
      <div class="tc_back">...</div>
      <div id="tip1" class="tip">
        <div class="tc_front">...</div>
        <div class="tc_back">...</div>
      </div>
    </li>
  ..
</body>

Tag: text slideshow