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