retina ready carousel - Free Download Responsive Retina-ready Slider/Carousel In jQuery

Free Download Responsive Retina-ready Slider/Carousel In jQuery

Posted on

This time I will share jQuery Plugin and tutorial about Responsive Retina-ready Slider/Carousel In jQuery, hope it will help you in programming stack.

retina ready carousel - Free Download Responsive Retina-ready Slider/Carousel In jQuery
File Size: 11.2 KB
Views Total: 3569
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

This is a small slider jQuery plugin to create a responsive, mobile-friendly, retina-ready, full-screen content slider/carousel from semantic HTML markup.

Licensed under the Apache License, Version 2.0.

How to use it:

1. Insert slides together with next/prev navigation controls into the HTML page.

01 <article class="slider">
02  
03   <section class="slide">
04     <img src="img/1.jpg" alt="">
05     <div class="slide-content">
06       <p class="slide-title">Slide 1</p>
07     </div>
08   </section>
09  
10   <section class="slide">
11     <img src="img/2.jpg" alt="">
12     <div class="slide-content">
13       <p class="slide-title">Slide 2</p>
14     </div>
15   </section>
16  
17   <section class="slide">
18     <img src="img/3.jpg" alt="">
19     <div class="slide-content">
20       <p class="slide-title">Slide 3</p>
21     </div>
22   </section>
23  
24   <nav class="slider-nav">
25     <span class="prev-slide"></span>
26     <span class="next-slide"></span>
27   </nav>
28    
29 </article>

2. Load both jQuery JavaScript library and the slider.js script in the document.

1 <script src="/path/to/jquery.min.js"></script>
2 <script src="/path/to/slider.js"></script>

3. The basic styling of the carousel/slider.

01 .slider {
02   position: relative;
03   width: 100%;
04   height: 100%;
05   overflow: hidden;
06   background-color: #555;
07 }
08  
09 .slide {
10   position: absolute;
11   top: 0;
12   left: 0;
13   display: none;
14   width: 100%;
15   height: 100%;
16   overflow: hidden;
17 }
18  
19 .slide img {
20   position: absolute;
21   top: 0;
22   left: 0;
23   display: block;
24   width: 100%;
25   height: 100%;
26   cursor: default;
27 }
28  
29 .slide-content {
30   position: absolute;
31   bottom: 20%;
32   width: 100%;
33   text-align: center;
34   color: #fff;
35   -webkit-text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.5);
36   -moz-text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.5);
37   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.5);
38 }
39  
40 .slide-title {
41   font-size: 10vw;
42 }
43  
44 @media screen and (max-width: 61.25em) {
45   .slider {
46     max-height: 57.95918367vw;
47   }
48 }
49  
50 @media screen and (min-height: 61.25em) {
51   .slider {
52     max-height: 57.95918367vw;
53   }
54 }

4. The CSS for the navigation controls.

01 .next-slide,
02 .prev-slide {
03   position: absolute;
04   display: inline-block;
05   width: 3.125em;
06   height: 3.125em;
07   line-height: 3.125;
08   margin: 0;
09   border: .125em solid white;
10   backface-visibility: hidden;
11   background-color: rgba(0, 0, 0, 0.3);
12   color: white;
13   overflow: hidden;
14   cursor: pointer;
15   z-index: 20;
16   -webkit-transition: all .3s ease-in-out 0s;
17   -moz-transition: all .3s ease-in-out 0s;
18   -o-transition: all .3s ease-in-out 0s;