Fancy Fullsreen Carousel Plugin For jQuery - mistCarousel

Fancy Fullsreen Carousel Plugin For jQuery - mistCarousel
File Size: 2.78 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

mistCarousel is a fancy jQuery fullscreen carousel plugin that comes with an awesome fog/smoke effect on each slide change.

How to use it:

1. Include the mistCarousel plugin's style sheet and other required CSS styles in the head section of the webpage.

<link rel="stylesheet" href="fonts/mfont.css">
<link rel="stylesheet" href="css/project.css">
<link rel="stylesheet" href="css/mistCarousel.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

2. The required HTML structure for the carousel.

<body class="overlay-wrapped">

  <!-- Overlay -->
  <div class="mist-overlay"></div>

  <section class="main-section">

    <!-- Carousel slides -->
    <div id="mistify">
      <div class="mistify__slide"><a class="mistify__slide-content mist-link" href="page.html">
        <p class="mistify__slide-description">Hello Everyone</p>
        <h1 class="mistify__slide-title">Hallo, mein Name ist Ralf. Ich bin Coach für herausfordernde Lebensumstände. Sind Sie in einer und stimmen den Aussagen unten zu?</h1>
        <p class="mistify__slide-timestamp">01 / 04</p>
        </a><img class="mistify__slide-background" src="img/1.jpg" alt="bg"></div>
      <div class="mistify__slide"><a class="mistify__slide-content mist-link" href="page.html">
        <p class="mistify__slide-description"> </p>
        <h1 class="mistify__slide-title">"Die" Realität gibt es nicht.</h1>
        <p class="mistify__slide-timestamp">02 / 04</p>
        </a><img class="mistify__slide-background" src="img/2.jpg" alt="bg"></div>
      <div class="mistify__slide"><a class="mistify__slide-content mist-link" href="page.html">
        <p class="mistify__slide-description">Mein Coaching Ansatz ist der sokratische Dialog</p>
        <h1 class="mistify__slide-title">Lieber Philosophie als esoterisches Geschwafel.</h1>
        <p class="mistify__slide-timestamp">03 / 04</p>
        </a><img class="mistify__slide-background" src="img/3.jpg" alt="bg"></div>
      <div class="mistify__slide"><a class="mistify__slide-content mist-link" href="page.html">
        <p class="mistify__slide-description"> </p>
        <h1 class="mistify__slide-title">Erfolg hat einen abnehmenden Grenznutzen.</h1>
        <p class="mistify__slide-timestamp">04 / 04</p>
        </a><img class="mistify__slide-background" src="img/4.jpg" alt="bg"></div>
    </div>
    <a class="main-section__logo mist-link" href="index.html">Ralf Zellweger</a>

    <!-- Navigation links -->
    <ul class="main-section__menus">
      <li><a class="mist-link" href="about.html">about me</a></li>
      <li><a class="mist-link" href="blog.html">blog</a></li>
      <li><a class="mist-link" href="contact.html">contact</a></li>
    </ul>

    <!-- Carousel controls -->
    <ul class="main-section__links">
      <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a></li>
    </ul>
  </section>
  
</body>

3. Include jQuery JavaScript library and the mistCarousel plugin's script at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/mistCarousel.js"></script> 

4. Initialize the carousel with default options.

$('#mistify').mistify();

5. Configuration options with default values.

  • arrows: shows navigation arrows
  • autoPlay: autoplay
  • autoPlaySpeed: autoplay interval in ms
  • dots: shows navigation dots
  • readMoreText: read more text
$('#mistify').mistify({
  arrows: true,
  autoPlay: true,
  autoPlaySpeed: 5000,
  dots: true,
  readMoreText: 'Read more'
});

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