This time I will share jQuery Plugin and tutorial about Basic Slideshow / Carousel Plugin With jQuery – Carrusel, hope it will help you in programming stack.
| File Size: | 299 KB |
|---|---|
| Views Total: | 2630 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
A jQuery carousel plugin which makes it easier to create cross-fading slideshows or carousel sliders on the web app.
Features infinite loop, custom navigation controls and mixed content.
How to use it:
1. Load the necessary jQuery library in the document.
1 |
<script src="https://code.jquery.com/jquery-3.3.1.min.js" |
2 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
3 |
crossorigin="anonymous"> |
4 |
</script> |
2. Create a carousel slider with custom navigation controls. Requies the latest Font Awesome Iconic Font.
1 |
<script src="/path/to/carruselNavegation.js"></script> |
01 |
<ul class="list-images"> |
02 |
<!--images --> |
03 |
<li><img src="https://placeimg.com/600/400/animals"></li> |
04 |
<li><img src="https://placeimg.com/600/400/nature"></li> |
05 |
<li><img src="https://placeimg.com/600/400/people"></li> |
06 |
<li><img src="https://picsum.photos/600/400/?random"></li> |
07 |
</ul> |
08 |
<!--navigation controls --> |
09 |
<ol class="navegation"> |
10 |
<li class="left iconsDefaultColor"><span class="fa fa-chevron-left"></span></li> |
11 |
<li class="right iconsDefaultColor"><span class="fa fa-chevron-right"></span></li> |
12 |
</ol> |
1 |
.iconsDefaultColor{ |
2 |
color: #000000; |
3 |
} |
4 |
5 |
.iconsNavegationColor{ |
6 |
color: #F781F3; |
7 |
} |
3. Create a cross-fading slideshow.
1 |
<script src="/path/to/carrusel-automatico.js"></script> |
01 |
<div id="auto-carusel"> |
02 |
<div> |
03 |
<img src="https://placeimg.com/600/400/animals"> |
04 |
</div> |
05 |
<div> |
06 |
<img src="https://placeimg.com/600/400/nature"> |
07 |
</div> |
08 |
<div> |
09 |
<img src="https://placeimg.com/600/400/people"> |
10 |
</div> |
11 |
<div> |
12 |
<img src="https://picsum.photos/600/400/?random"> |
13 |
</div> |
14 |
</div> |
4. Create a basic carousel with custom text.
1 |
<script src="/path/to/carrusel-text.js"></script> |
01 |
<div class="caruselV3"> |
02 |
<div class="carousel"> |
03 |
<img class="img-carousel" src="https://placeimg.com/600/400/arch" > |
04 |
<div class="text"> |
05 |
<h1>Lorem Ipsum</h1> |
06 |
<p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium atque nemo quasi officia omnis labore officiis asperiores, eaque animi natus ipsa ratione aliquid ut earum, blanditiis quibusdam. Quia ea, incidunt.</p> |
07 |
</div> |
08 |
</div> |
09 |
<div class="carousel"> |
10 |
<img class="img-carousel" src="https://placeimg.com/600/400/nature"> |
11 |
<div class="text"> |
12 |
<h1>Lorem Ipsum</h1> |
13 |
<p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium atque nemo quasi officia omnis labore officiis asperiores, eaque animi natus ipsa ratione aliquid ut earum, blanditiis quibusdam. Quia ea, incidunt.</p> |
14 |
</div> |
15 |
</div> |
16 |
<div class="carousel"> |
17 |
<img class="img-carousel" src="https://placeimg.com/600/400/people"> |
18 |
<div class="text"> |
19 |
<h1>Lorem Ipsum</h1> |
20 |
<p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium atque nemo quasi officia omnis labore officiis asperiores, eaque animi natus ipsa ratione aliquid ut earum, blanditiis quibusdam. Quia ea, incidunt.</p> |
21 |
</div> |
22 |
</div> |
23 |
<div class="carousel"> |
24 |
<img class="img-carousel" src="https://picsum.photos/600/400/?random"> |
25 |
<div class="text"> |
26 |
<h1>Lorem Ipsum</h1> |
27 |
<p">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium atque nemo quasi officia omnis labore officiis asperiores, eaque animi natus ipsa ratione aliquid ut earum, blanditiis quibusdam. Quia ea, incidunt.</p> |
28 |
</div> |
29 |
</div> |
