Easy Fullscreen Carousel Slider Plugin For jQuery slider js - Download Easy Fullscreen Carousel Slider Plugin For jQuery - slider.js

Download Easy Fullscreen Carousel Slider Plugin For jQuery – slider.js

By Posted on

This time I will share jQuery Plugin and tutorial about Easy Fullscreen Carousel Slider Plugin For jQuery – slider.js, hope it will help you in programming stack.

Easy Fullscreen Carousel Slider Plugin For jQuery slider js - Download Easy Fullscreen Carousel Slider Plugin For jQuery - slider.js
File Size: 21.7 KB
Views Total: 4682
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

slider.js is a lightweight, simple-to-use jQuery plugin that helps you generate a fullscreen, responsive slider carousel for showcasing your photos, designs and stories.

How to use it:

1. Place jQuery library and the jQuery slider.js script at the bottom of the document so the pages load faster.

view source
1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <script src="assets/js/slider.js"></script>

2. The primary html structure for the slider carousel.

view source
01 <div id="main-slider">
02   <div class="slide slide-1">
03     <div class="container">
04       <div class="vertical-hook"></div>
05       <div class="vertical-container">
06         <header>
07           <h1>Slide One</h1>
08           <p>This is slide one</p>
09         </header>
10       </div>
11     </div>
12   </div>
13   <div class="slide slide-2">
14     <div class="container">
15       <div class="vertical-hook"></div>
16       <div class="vertical-container">
17         <header>
18           <h1>Slide Two</h1>
19           <p>This is slide two</p>
20         </header>
21       </div>
22     </div>
23   </div>
24   <div class="slide slide-3">
25     <div class="container">
26       <div class="vertical-hook"></div>
27       <div class="vertical-container">
28         <header>
29           <h1>Slide Three</h1>
30           <p>This is slide three</p>
31         </header>
32       </div>
33     </div>
34   </div>
35 </div>

3. The core CSS styles for the slider carousel.

view source
001 .slider-wrapper {
002   height: 100%;
003   text-align: left;
004   -webkit-backface-visibility: hidden;
005   /* Chrome, Safari, Opera */
006   backface-visibility: hidden;
007   transform: translate3d(0, 0px, 0px);
008   -webkit-transition: all 0.5s;
009   -moz-transition: all 0.5s;
010   -ms-transition: all 0.5s;
011   -o-transition: all 0.5s;
012   transition: all 0.5s;
013 }
014  
015 .slider-wrapper-outer {
016   width: 100%;
017   height: 100%;
018   position: relative;
019   overflow: hidden;
020 }
021  
022 .slider-item { float: left; }
023  
024 .arrow {
025   top: 0;
026   bottom: 0;
027   width: 50px;
028   height: 60px;
029   margin: auto;
030   cursor: pointer;
031   position: absolute;
032   display: inline-block;
033   border: 1px solid transparent;
034   background-position: 50% 50%;
035   background-size: 70px auto;
036   background-color: rgba(170, 170, 170, 0.5);
037   -webkit-transition: all 0.4s;
038   -moz-transition: all 0.4s;
039   -ms-transition: all 0.4s;
040   -o-transition: all 0.4s;
041   transition: all 0.4s;
042 }
043  
044 .arrow-left {
045   left: 30px;
046   background-image: url("../arrows/arrow-left.svg");
047 }
048  
049 .arrow-right {
050    source : jqueryscript.net

Related posts: