This time I will share jQuery Plugin and tutorial about Minimal Multi-slide Image Carousel Plugin For jQuery, hope it will help you in programming stack.
| File Size: | 6.52 KB |
|---|---|
| Views Total: | 5832 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
This is a basic, automatic image slider/carousel plugin for jQuery that features auto rotation, infinite looping and multiple images per slide.
How to use it:
1. Add the images together with the navigation arrows and pagination bullets to the slider/carousel.
01 |
<div id="slider" class="slider slider_first"> |
02 |
<div class="slider_viewport"> |
03 |
<div class="slider_list"> |
04 |
<div class="slider_item"><img src="1.jpg"></div> |
05 |
<div class="slider_item"><img src="2.jpg"></div> |
06 |
<div class="slider_item"><img src="3.jpg"></div> |
07 |
<div class="slider_item"><img src="4.jpg"></div> |
08 |
... |
09 |
</div> |
10 |
</div> |
11 |
<div class="slider_nav"> |
12 |
<div class="slider_arrow slider_arrow__left"></div> |
13 |
<div class="slider_arrow slider_arrow__right"></div> |
14 |
</div> |
15 |
<div class="slider_control-nav"> |
16 |
<!-- All this selectors must be created dynamically. They are here just for example --> |
17 |
</div> |
18 |
</div> |
2. Load the JavaScript file slider.js after jQuery library.
1 |
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> |
2 |
<script src="js/slider.js"></script> |
3. Initialize the plugin to create a basic image carousel/slider.
1 |
$('#slider').slider(); |
4. Style the image carousel/slider in your CSS.
001 |
/* <a href="https://www.jqueryscript.net/slider/">Slider</a> */ |
002 |
003 |
.slider { |
004 |
user-select: none; |
005 |
display: inline-block; |
006 |
position: relative; |
007 |
} |
008 |
009 |
.slider_first { // width: 459px; |
010 |
} |
011 |
012 |
.slider_second { } |
013 |
014 |
.slider_viewport { |
015 |
position: relative; |
016 |
overflow: hidden; |
017 |
} |
018 |
019 |
.slider_list { } |
020 |
021 |
.animate { transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); } |
022 |
023 |
.slider_item { float: left; } |
024 |
025 |
.slider_item img { |
026 |
display: block; |
027 |
max-width: 100%; |
028 |
height: auto; |
029 |
background-size: cover; |
030 |
} |
031 |
032 |
.slider_nav.is-disabled { display: none; } |
033 |
034 |
.slider_control-nav { |
035 |
position: absolute; |
036 |
z-index: 999; |
037 |
left: 0; |
038 |
right: 0; |
039 |
bottom: -50px; |
040 |
text-align: center; |
041 |
} |
042 |
043 |
.slider_control-nav-item { |
044 |
-webkit-transition: all 0.5s linear; |
045 |
transition: all 0.5s linear; |
046 |
display: inline-block; |
047 |
width: 10px; |
048 |
height: 10px; |
049 |
border-radius: 50%; |
050 |
margin: 0 5px; |
051 |
cursor: pointer; |
052 |
background: #fff; |
053 |
} |
054 |
055 |
.slider_control-nav-item:hover { opacity: 0.3; } |
056 |
057 |
.slider_control-nav-item.is-active { |
058 |
opacity: 0.6; |
059 |
background: #000; |
060 |
//cursor: default; |
061 |
} |
062 |
063 |
.slider_arrow { |
064 |
position: absolute; |
065 |
top: 50%; |
066 |
margin-top: -25px; |
067 |
width: 26px; |
068 |
height: 49px; |
069 |
z-index: 999; |
070 |
cursor: pointer; |
071 |
} |
072 |
073 |
.slider_arrow.is-disabled { |
074 |
cursor: default; |
075 |
opacity: 0.5; |
076 |
} |
077 |
