infinite carousel slider css3 - Download Infinite Carousel Slider With jQuery And CSS3

Download Infinite Carousel Slider With jQuery And CSS3

By Posted on

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

infinite carousel slider css3 - Download Infinite Carousel Slider With jQuery And CSS3
File Size: 5.16 KB
Views Total: 1338
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A simple, lightweight image carousel slider built with HTML, CSS/SCSS, CSS3 animations, and a little bit of jQuery.

How to use it:

1. Add images together with the SVG based next/prev arrows to the slider.

view source
01 <div class="slider right">
02  
03   <div class="arrow left">
04     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292.359 292.359">
05       <path d="M222.979 5.424C219.364 1.807 215.08 0 210.132 0c-4.949 0-9.233 1.807-12.848 5.424L69.378 133.331c-3.615 3.617-5.424 7.898-5.424 12.847s1.809 9.233 5.424 12.847l127.906 127.907c3.614 3.617 7.898 5.428 12.848 5.428 4.948 0 9.232-1.811 12.847-5.428 3.617-3.614 5.427-7.898 5.427-12.847V18.271c-.001-4.949-1.81-9.229-5.427-12.847z" fill="#FFFFFF"/>
06     </svg>
07   </div>
08  
09   <div class="container-images">
10     <img class="active" src="1.jpg">
11     <img src="2.jpg">
12     <img src="3.jpg">
13     <img src="4.jpg">
14     <img src="5.jpg">
15     <img src="6.jpg">
16   </div>
17  
18   <div class="arrow right">
19     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292.359 292.359">
20       <path d="M222.979 5.424C219.364 1.807 215.08 0 210.132 0c-4.949 0-9.233 1.807-12.848 5.424L69.378 133.331c-3.615 3.617-5.424 7.898-5.424 12.847s1.809 9.233 5.424 12.847l127.906 127.907c3.614 3.617 7.898 5.428 12.848 5.428 4.948 0 9.232-1.811 12.847-5.428 3.617-3.614 5.427-7.898 5.427-12.847V18.271c-.001-4.949-1.81-9.229-5.427-12.847z" fill="#FFFFFF"/>
21     </svg>
22   </div>
23  
24 </div>

2. The required CSS/CSS3 rules for the slider & slider controls.

view source
01 .slider {
02   position: relative;
03   display: flex;
04   justify-content: space-between;
05   align-items: center;
06 }
07  
08 .slider .arrow {
09   cursor: pointer;
10   width: 50px;
11 }
12  
13 .slider .arrow:hover {
14   opacity: .8;
15 }
16  
17 .slider .arrow.right {
18   transform: rotate(180deg);
19 }
20  
21 .slider .container-images {
22   position: relative;
23   width: 400px;
24   height: 250px;
25   overflow: hidden;
26   -webkit-box-shadow: 10px 10px 61px -10px rgba(0, 0, 0, 0.75);
27   -moz-box-shadow: 10px 10px 61px -10px rgba(0, 0, 0, 0.75);
28   box-shadow: 10px 10px 61px -10px rgba(0, 0, 0, 0.75);
29 }
30  
31 .slider .container-images img {
32   width: 100%;
33   position: absolute;
34   top: 50%;
35   transition-duration: .5s;
36   transform: translateY(-50%);
37 }
38  
39 .slider.right .container-images img {
40   left: -100%;
41   z-index: -1;
42 }
43  
44 .slider.right .container-images img.active {
45   z-index: 1;
46   left: 0;
47 }
48  
49 .slider.right .container-images img.to_right {
50   left: 100%;
51 }
52  
53 .slider.left .container-images img {
54   right: -100%;
55   z-index: -1;
56 }
57  
58 .slider.left .container-images img.active {
59   z-index: 1;
60   right: 0;
61 }
62  
63 .slider.left .container-images img.to_left {
64   right: 100%;
65 }

3. Place the needed jQuery library at the end of the document.

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>

4. The jQuery script to switch between images when the user clicks the next/prev arrows.

view source
01 $(window).on('load', function() {
02  
03   let nbImg = 0;
04   $('.slider .container-images img').each(function() {
05     nbImg += 1;
06   

Share this:

Related posts: