
mistCarousel is a fancy jQuery fullscreen carousel plugin that comes with an awesome fog/smoke effect on each slide change.
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.
- Publication date: 23.11.2017
- Source