Simple HTML5 Image Carousel Plugin With jQuery - yeliex.Carousel
File Size: | 7.17 KB |
---|---|
Views Total: | 1372 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
yeliex.Carousel is a lightweight jQuery carousel plugin for creating a responsive, fullscreen (or fixed size) slider carousel with a subtle crossfade effect based on CSS3 transitions.
How to use it:
1. Add images with custom html content to the carousel as follow:
data-content
: true or false. whether to display html contentdata-img
: image pathdata-content
: slide contentdata-link
: slide linkdata-btn
: text for button
<div class="carousel" data-content="true"> <div class="list active" data-img="1.jpg" data-content="Heading 1 / Description 1" data-link='1.html' data-btn="Button 1"> </div> <div class="list active" data-img="2.jpg" data-content="Heading 2 / Description 2" data-link='2.html' data-btn="Button 2"> </div> <div class="list active" data-img="3.jpg" data-content="Heading 3 / Description 3" data-link='3.html' data-btn="Button 3"> </div> ... </div>
2. The basic CSS styles for the carousel.
.carousel { top: 0; left: 0; position: absolute; width: 100%; height: 100%; overflow: hidden; -webkit-transition: background 1s ease; -moz-transition: background 1s ease; -ms-transition: background 1s ease; -o-transition: background 1s ease; transition: background 1s ease; background-size: cover; } .carousel .list { display: none; } .carousel .content { background: rgba(0, 0, 0, .2); top: 0; left: 0; width: 100%; height: 100%; text-align: center; color: #FFFFFF; position: absolute; cursor: pointer; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .carousel .content .a { margin-top: 236px; margin-bottom: 10px; font-size: 60px; line-height: 76px; } .carousel .content .b { font-size: 24px; } .carousel .content .button { margin-top: 4rem; font-weight: normal; padding: .78571429em 3em; } .ui.button { cursor: pointer; display: inline-block; min-height: 1em; outline: 0; border: none; vertical-align: baseline; background: #e0e1e2; color: rgba(0, 0, 0, .6); margin: 0 .25em 0 0; padding: .78571429em 1.5em; text-transform: none; text-shadow: none; font-weight: 700; line-height: 1em; font-style: normal; text-align: center; text-decoration: none; border-radius: .28571429rem; box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, .15) inset; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease; transition: opacity .1s ease, background-color .1s ease, color .1s ease, box-shadow .1s ease, background .1s ease; will-change: ''; -webkit-tap-highlight-color: transparent; transition: all 1s ease; } .ui.button { font-size: 1rem; } .ui.inverted.button { box-shadow: 0 0 0 2px #fff inset !important; background: 0 0; color: #fff; text-shadow: none !important; } .ui.inverted.button:hover { background: #FFF; color: #000; transition: all 1s ease; } .ui.huge.button { font-size: 1.42857143rem; }
3. Import jQuery JavaScript library and the jQuery yeliex.Carousel plugin into your web page. That's it.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="src/yCarousel.min.js"></script>
This awesome jQuery plugin is developed by yeliex. For more Advanced Usages, please check the demo page or visit the official website.