touch swiper carousel - Free Download Responsive Touch Swiper Slider - jquery.slider.js

Free Download Responsive Touch Swiper Slider – jquery.slider.js

Posted on

This time I will share jQuery Plugin and tutorial about Responsive Touch Swiper Slider – jquery.slider.js, hope it will help you in programming stack.

touch swiper carousel - Free Download Responsive Touch Swiper Slider - jquery.slider.js
File Size: 37.5 KB
Views Total: 2003
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A flexible, responsive, mobile-friendly, and highly customizable swiper/slider/carousel/slideshow plugin created for both desktop and mobile.

Features:

  • Supports touch and drag events.
  • Slide and fade animations.
  • Custom transition effects using CSS.
  • Auto play.
  • Infinite loop.
  • Arrow navigation and numeric pagination.
  • Easy to style using your own CSS styles.

How to use it:

1. The basic HTML structure for the swiper slider.

1 <div class="slider">
2   <div class="slider-container" id="slider">
3     <div class="slider-item">Item 1</div>
4     <div class="slider-item">Item 2</div>
5     <div class="slider-item">Item 3</div>
6     <div class="slider-item">Item 4</div>
7     <div class="slider-item">Item 5</div>
8   </div>
9 </div>

2. Place the jquery.slider.js script after jQuery library.

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

3. Attach the plugin to the slider container and done.

1 $('#slider').slider();

4. The example CSS to style the slider.

01 .slider {
02   display: flex;
03   align-items: center;
04   flex-wrap: wrap;
05   width: 60%;
06   margin: 0 auto;
07 }
08  
09 .slider-container {
10   flex-grow: 1;
11   overflow: hidden;
12   position: relative;
13   height: 200px;
14 }
15 .slider-item {
16   position: absolute;
17   left: 0;
18   top: 0;
19   width: 100%;
20   height: 100%;
21 }
22  
23 @media (max-width: 768px) {
24   .slider {
25     width: 100%;
26   }
27 }

4. Add custom navigation arrows to the slider.

1 <a href="#" class="slider-prev">←</a>
2 <a href="#" class="slider-next">→</a>
1 $('#slider').slider({
2   prev: $('.slider-prev'),
3   next: $('.slider-next')
4 });

5. Add a numeric pagination to the slider.

1 <div class="slider-pagination">
2   <a href="#" class="slider-link">1</a>
3   <a href="#" class="slider-link">2</a>
4   <a href="#" class="slider-link">3</a>
5   <a href="#" class="slider-link">4</a>
6   <a href="#" class="slider-link">5</a>
7 </div>
1 $('#slider').slider({
2   links: $('.slider-link')
3 });

6. Enable the autoplay functionality.

1 $('#slider').slider({
2   autoPlay: true,
3   delay: 5000 // interval
4 });

7. Set the transition effect. Default: ‘slide’.

1 $('#slider').slider({
2   effect: 'fade',
3 });

8. You can also create your own transition effects as follows:

01 $('#slider').slider({
02   effect: 'myeffect',
03   effects: {
04     myeffect: {
05         oldSlideCSS: function(oldIdx, newIdx, ratio) {
06             return {
07                 left: 0,
08                 top: 0,
09                 opacity: 1,
10                 zIndex: 1
11             };
12         },
13         newSlideCSS: function(oldIdx, newIdx, ratio) {
14             var coef = (oldIdx < newIdx) ? 1 : -1;
15             if (this.opt.loop) {
16                 if (oldIdx === 0 && newIdx === this.count - 1) {
17                     coef = -1;
18                 } else if (oldIdx === this.count - 1 && newIdx === 0) {
19                     coef = 1;