How we can create an endless or infinite slider using HTML CSS JavaScript? Solution: See this jQuery Infinite Carousel With CSS, A Kind Of Endless Carousel Slider.
Previously I have shared some carousel programs, but this carousel is just an example of infinite slides. Basically, the carousel is a kind of slideshow or presentation of contents, that content can be image, text, or anything else. And carousels are important now for building modern websites, it creates a good user interaction.
Today you will learn to create Endless Carousel Slider. Basically, there is a simple carousel with infinity slides, suppose your slider has 5 contents then after the 5th slide it will start over from 1st. I know this is a basic concept but one of my visitors asks for creating this. With this carousel, you don’t have to click on previous button after the last segment of slider.
So, Today I am sharing jQuery Infinite Carousel With CSS. There I have used jQuery for creating the program and this is a JS library, that’s why I am putting this post in the JavaScript category. This program does not have a responsive design because I have created this program only for an example. You can create this responsive by replacing the sizes px to percentage.
If you are thinking now how this Endless Carousel Slider actually is, then see the preview given below.
Preview Of Endless Carousel Slider
See this video preview to getting an idea of how this slider looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this then get the source code of its.
You May Also Like:
- Bootstrap Full Page Carousel
- JavaScript Price Range Slider
- Responsive Testimonial Slider
- HTML CSS Pagination Design
jQuery Infinite Carousel With CSS Source Code
Before sharing source code, let’s talk about it. First, I have created a main div and placed 5 span inside it for creating carousel and 2 other span for creating next/prev buttons. Inside the span tag, I have placed a unique ID name and also in the other span which is for buttons put ID names. Also in the HTML file, I have linked other files like jQuery CDN, CSS, JS, etc.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. In the CSS file, I gave size of the main div whose name is container and also gave the size of the slide items. And put different colors in the slides by using their ID names also placed the buttons for control. There I have used a google font for styling and linked in the HTML file.
jQuery is the backbone of this program, which means It handling all the features. jQuery has some pre-built functions or commands to creating carousels easily. For functioning the next and previous buttons I have used shiftSlide command. And JS here managing the endless slider functions by using if {} else {} conditions (info).
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>jQuery Infinite Carousel | Webdevtrick.com</title> <link href='https://fonts.googleapis.com/css?family=Teko' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="style.css"> </head> <body> <h1>INFINITE CAROUSEL</h1> <div class="container"> <div class="window"> <div id="carousel"> <span class="slide" id="s1">SLIDE-1</span> <span class="slide" id="s2">SLIDE-2</span> <span class="slide" id="s3">SLIDE-3</span> <span class="slide" id="s4">SLIDE-4</span> <span class="slide" id="s5">SLIDE-5</span> </div> </div> <span id="prev">PREV</span> <span id="next">NEXT</span> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { background: #333; color: #fff; font-size: 22pt; text-align: center; font-family: 'Teko'; letter-spacing: 0.15em; } body * { -webkit-user-select: none; } .container { position: relative; width: 600px; height: 300px; margin: 0 auto; box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.25); } .window { overflow: hidden; position: relative; background: #222; } #carousel { width: 10000px; position: relative; top: 0; left: -450px; } .slide { height: 300px; width: 500px; cursor: pointer; float: left; display: flex; flex-direction: column; justify-content: center; } .slide#s1 { background: #00c8c8; } .slide#s2 { background: #ff4946; } .slide#s3 { background: #5cb85c; } .slide#s4 { background: #3a559f; } .slide#s5 { background: #ff8500; } #prev, #next { cursor: pointer; position: absolute; bottom: -40px; font-size: 14pt; } #prev { left: 0; } #next { right: 0; } .transition { transition: .7s; } |
function.js
The last step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// Code By Webdevtrick ( https://webdevtrick.com ) var carousel = $('#carousel'), threshold = 150, slideWidth = 500, dragStart, dragEnd; $('#next').click(function(){ shiftSlide(-1) }) $('#prev').click(function(){ shiftSlide(1) }) carousel.on('mousedown', function(){ if (carousel.hasClass('transition')) return; dragStart = event.pageX; $(this).on('mousemove', function(){ dragEnd = event.pageX; $(this).css('transform','translateX('+ dragPos() +'px)') }) $(document).on('mouseup', function(){ if (dragPos() > threshold) { return shiftSlide(1) } if (dragPos() < -threshold) { return shiftSlide(-1) } shiftSlide(0); }) }); function dragPos() { return dragEnd - dragStart; } function shiftSlide(direction) { if (carousel.hasClass('transition')) return; dragEnd = dragStart; $(document).off('mouseup') carousel.off('mousemove') .addClass('transition') .css('transform','translateX(' + (direction * slideWidth) + 'px)'); setTimeout(function(){ if (direction === 1) { $('.slide:first').before($('.slide:last')); } else if (direction === -1) { $('.slide:last').after($('.slide:first')); } carousel.removeClass('transition') carousel.css('transform','translateX(0px)'); },700) } |
That’s It. Now you have successfully created jQuery Infinite Carousel With CSS, Endless Carousel Slider. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
