Simple jQuery Based Carousel For Images - Carousel-Delux
File Size: | 4.1 KB |
---|---|
Views Total: | 1802 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Carousel-Delux is a really simple jQuery based carousel slider script which provides a basic functionality for navigating a group of images in a carousel-like fashion.
How to use it:
1. The carousel requires Font Awesome Iconic Font for the navigation arrows and pagination indicators.
<link href="/path/to/font-awesome.min.css" rel="stylesheet">
2. Add images and carousel controls to the slider following the html structure like this:
<div id="carousel"> <div class="switch"> <i class="fa fa-angle-left" aria-hidden="true"></i> </div> <div class="switch next"> <i class="fa fa-angle-right" aria-hidden="true"></i> </div> <ul class="controls"> <li id="1" class="controlStyle"> <i class="fa fa-circle-o" aria-hidden="true"></i> <i class="fa fa-circle fired" aria-hidden="true"></i> </li> <li id="2" class="controlStyle"> <i class="fa fa-circle-o" aria-hidden="true"></i> <i class="fa fa-circle fired" aria-hidden="true"></i> </li> <li id="3" class="controlStyle"> <i class="fa fa-circle-o" aria-hidden="true"></i> <i class="fa fa-circle fired" aria-hidden="true"></i> </li> <li id="4" class="controlStyle"> <i class="fa fa-circle-o" aria-hidden="true"></i> <i class="fa fa-circle fired" aria-hidden="true"></i> </li> <li id="5" class="controlStyle"> <i class="fa fa-circle-o" aria-hidden="true"></i> <i class="fa fa-circle fired" aria-hidden="true"></i> </li> </ul> <ul class="gallery"> <li class="photo"><img src="1.jpg" alt=""></li> <li class="photo"><img src="2.jpg" alt=""></li> <li class="photo"><img src="3.jpg" alt=""></li> <li class="photo"><img src="4.jpg" alt=""></li> <li class="photo"><img src="5.jpg" alt=""></li> </ul> </div>
3. Load jQuery JavaScript library and the jQuery Carousel-Delux plugin's main script in the document.
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="js/scripts.js"></script>
4. To style the carousel slider, modify/override the following CSS snippets and add them into your existing CSS file.
.switch { height: 100%; width: 50px; background-color: rgba(0, 0, 0, 0.2); position: absolute; text-align: center; z-index: 2; opacity: 0; transition: opacity .5s; } .switch i { font-size: 52px; color: #ddd; margin-top: 150px; transform: translateY(-50%); cursor: pointer; } .next { right: 0; } #carousel { width: 400px; height: 300px; margin-top: 50px; margin-left: auto; margin-right: auto; overflow: hidden; border-width: 5px; border-style: ridge; border-color: #444; position: relative; box-shadow: 10px 10px 15px black; } #carousel:hover .switch { opacity: 1; } .gallery { margin: 0; position: relative; left: -400px; padding: 0; list-style: none; width: 2000px; } .photo { display: block; float: left; width: 400px; height: 300px; } .photo img { height: 100%; width: 100%; object-fit: cover; filter: none !important; } .controls { margin-top: 20px; text-align: center; padding: 0; position: absolute; bottom: 0; z-index: 2; width: 100%; margin-bottom: 5px; } .controlStyle { display: inline-block; margin-right: 2px; position: relative; cursor: pointer; } .fired { position: absolute; left: 0; top: 0; display: none; }
This awesome jQuery plugin is developed by djrokita. For more Advanced Usages, please check the demo page or visit the official website.