Minimal Responsive Slider Carousel - Download Minimal Responsive Slider/Carousel With jQuery And CSS3

Download Minimal Responsive Slider/Carousel With jQuery And CSS3

By Posted on

This time I will share jQuery Plugin and tutorial about Minimal Responsive Slider/Carousel With jQuery And CSS3, hope it will help you in programming stack.

Minimal Responsive Slider Carousel - Download Minimal Responsive Slider/Carousel With jQuery And CSS3
File Size: 9.29 KB
Views Total: 4483
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

This is a minimal, clean, responsive carousel/slider for your web applications, written in JavaScript (jQuery ) and CSS3.

Features auto play, infinite loop, background image, image caption, slider controls, responsive layout (based on CSS flexbox) and smooth transition effect (based on CSS3 animations).

How to use it:

1. Add images, captions, controls to the carousel slider following the markup structure like these:

view source
01 <div class="slide-window">
02   <div class="slide-wrapper" style="width: 300%;">
03     <div class="slide">
04       <a href="#">
05         <div class="slide-image" style="background-image: url(1.jpg)">
06         </div>
07         <div class="slide-caption">
08           <h2>Slide 1</h2>
09           <p>Slide 1 Caption</p>
10         </div>
11       </a>
12     </div>
13     <div class="slide">
14       <a href="#">
15         <div class="slide-image" style="background-image: url(2.jpg)">
16         </div>
17         <div class="slide-caption">
18           <h2>Slide 2</h2>
19           <p>Slide 2 Caption</p>
20         </div>
21       </a>
22     </div>
23     <div class="slide">
24       <a href="#">
25         <div class="slide-image" style="background-image: url(3.jpg)">
26         </div>
27         <div class="slide-caption">
28           <h2>Slide 3</h2>
29           <p>Slide 3 Caption</p>
30         </div>
31       </a>
32     </div>
33   </div>
34   <div class="slide-controller">
35     <div class="slide-control-left">
36       <div class="slide-control-line"></div>
37       <div class="slide-control-line"></div>
38     </div>
39     <div class="slide-control-right">
40       <div class="slide-control-line"></div>
41       <div class="slide-control-line"></div>
42     </div>
43   </div>
44 </div>

2. Load the main JavaScript after jQuery JavaScript library.

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
2         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
3         crossorigin="anonymous">
4 </script>
5 <script src="js/script.js"></script>

3. The primary CSS for the carousel slider.

view source
01 .slide-window {
02   width: 100%;
03   position: relative;
04   overflow: hidden;
05 }
06  
07 .slide-window .slide-wrapper {
08   position: relative;
09   left: 0;
10   display: flex;
11   -webkit-transition: right 0.5s;
12   transition: right 0.5s;
13   -webkit-transition: left 0.5s;
14   transition: left 0.5s;
15 }
16  
17 .slide-window .slide-wrapper .slide {
18   position: relative;
19   width: 100%;
20 }
21  
22 .slide-window .slide-wrapper .slide:before {
23   content: "";
24   display: block;
25   padding-top: 41.17%;
26 }
27  
28 .slide-window .slide-wrapper .slide .slide-image {
29   background-size: cover;
30   background-position: 50% 50%;
31   overflow: hidden;
32   position: absolute;
33   top: 0;
34   left: 0;
35   bottom: 0;
36 source : jquery.net

Related posts: