Easy Responsive Content Slider With jQuery CSS3 - Download Easy Responsive Content Slider With jQuery And CSS3

Download Easy Responsive Content Slider With jQuery And CSS3

By Posted on

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

Easy Responsive Content Slider With jQuery CSS3 - Download Easy Responsive Content Slider With jQuery And CSS3
File Size: 2.15 KB
Views Total: 5471
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A responsive, fullscreen content slider that comes with a ‘Zoom out’ animation when transitioning between slides. Based on jQuery, SVG icon, CSS Flex box and CSS3 transitions & transforms.

How to use it:

1. Add html content together with the SVG based navigation arrows into the slider.

view source
01 <div class="slide one">
02   <h2>Content here</h2>
03 </div>
04 <div class="slide two">
05   <h2>Content here</h2>
06 </div>
07 <div class="slide three">
08   <h2>Content here</h2>
09 </div>
10 <div class="slide four">
11   <h2>Content here</h2>
12 </div>
13 <div class="slide five">
14   <h2>Content here</h2>
15 </div>

2. The CSS to position the navigation arrows.

view source
01 svg {
02   position: absolute;
03   top: 50%;
04   height: 5em;
05   width: 5em;
06   margin-top: -2.5em;
07   cursor: pointer;
08 }
09  
10 svg#next {
11   right: 1em;
12 }
13  
14 svg#previous {
15   display: none;
16   left: 1em;
17 }

3. The core CSS/CSS3 styles for the slides.

view source
01 .slide {
02   display: flex;
03   -webkit-display: flex;
04   -webkit-align-items: center;
05   align-items: center;
06   justify-content: center;
07   -webkit-justify-content: center;
08   width: 100%;
09   height: 100%;
10   position: absolute;
11   transition: all 1s ease;
12   -moz-transition: all 1s ease;
13   -ms-transition: all 1s ease;
14   -webkit-transition: all 1s ease;
15   -o-transition: all 1s ease;
16 }

4. Create the ‘Zoom out’ effect using CSS3 2D transforms.

view source
1 .zoomout {
2   transform: scale(0.7);
3   -moz-transform: scale(0.7);
4   -webkit-transform: scale(0.7);
5   -o-transform: scale(0.7);
6   -ms-transform: scale(0.7);
7 }

5. Place the needed jQuery JavaScript library at the end of the document.

view source
1 <script src="//code.jquery.com/jquery-2.2.3.min.js"></script>

6. The core JavaScript (jQuery script) to active the slider.

view source
01 var timer = 0;
02 var elementCount = 0;
03 var firstPos = 0;
04 var lastPos = 0;
05  
06 $(function() {
07   initialise<a href="https://www.jqueryscript.net/slider/">Slider</a>();
08   $("#next").click(function() {
09     slideRight();
10   });
11  
12   $("#previous").click(function() {
13     slideLeft();
14   });
15 });
16  
17 function initialiseSlider() {
18   $("div").each(function(value) {
19     elementCount += 1;
20     var position = -100 * value;
21     $(this).css("left", position + "%");
22   });
23  
24   if (elementCount === 1)
25     $("#next").hide();
26 }
27  
28 function slideRight() {
29   $("div").each(function(value) {
30     $(this).addClass("zoomout");
31     var position = parseInt($(this)[0].style.left) + 100;
32  
33     if (value === 0)
34       firstPos = position;
35  
36     $(this).css("left", position + "%");
37     timer = setTimeout(removeZoom, 1000);
38   });
39  
40   console.log(firstPos);
41  
42   if (firstPos !== ((elementCount - 1) * 100)) {
43     $("#next").show();
44     $("#previous").show();
45   } else
source : jqueryscript.net

Related posts:

46     $("#next").hide();