Responsive Carousel

Developer
Adam Grayson
Size
3,291 Kb
Views
18,216
  1. Responsive Carousel Previews
  2. Responsive Carousel HTML Codes
  3. Responsive Carousel CSS Codes
  4. Responsive Carousel JS Codes

How do I make an responsive carousel?

Fully responsive, super generic, individually instanced, infinitely looping, automatically generated image carousels.. What is a responsive carousel? How do you make a responsive carousel? This script and codes were developed by Adam Grayson on 10 November 2022, Thursday.

Responsive Carousel Previews
IQ Test

Responsive Carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Carousel</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- ========================================================= -->
<!-- all images except for arrows are from google image search -->
<!-- ========================================================= -->
<div class="responsiveImageCarousel"> <div class="prevBtn"></div> <div class="nextBtn"></div> <div class="images"> <ul> <li><img src="https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/purple-nebula.jpg" alt=""/></li> <li><img src="https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg" alt=""/></li> </ul> </div> <div class="pagination"><ul></ul></div>
</div>
<div class="responsiveImageCarousel"> <div class="prevBtn"></div> <div class="nextBtn"></div> <div class="images"> <ul> <li><img src="https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg" alt=""/></li> <li><img src="http://www.listofimages.com/wp-content/uploads/2012/08/lazarus-nebula-space-graphics-nebula-stars-3d.jpg" alt=""/></li> <li><img src="http://hebus.org/files/Space/Space%20HD%20wallpaper%202560x1600%20(2).jpg" alt=""/></li> <li><img src="http://wallpoper.com/images/00/30/44/78/outer-space_00304478.jpg" alt=""/></li> <li><img src="http://img2.wikia.nocookie.net/__cb20131006092217/powerlisting/images/7/73/Space-purple-nebula-1.jpg" alt=""/></li> <li><img src="https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/purple-nebula.jpg" alt=""/></li> </ul> </div> <div class="pagination"><ul></ul></div>
</div>
<div class="responsiveImageCarousel"> <div class="prevBtn"></div> <div class="nextBtn"></div> <div class="images"> <ul> <li><img src="http://www.listofimages.com/wp-content/uploads/2012/08/lazarus-nebula-space-graphics-nebula-stars-3d.jpg" alt=""/></li> <li><img src="http://hebus.org/files/Space/Space%20HD%20wallpaper%202560x1600%20(2).jpg" alt=""/></li> <li><img src="https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/purple-nebula.jpg" alt=""/></li> <li><img src="https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg" alt=""/></li> </ul> </div> <div class="pagination"><ul></ul></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ricostacruz.com/jquery.transit/jquery.transit.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive Carousel - Script Codes CSS Codes

* { box-sizing: border-box;
}
.responsiveImageCarousel { position: relative; width: 100%; }
.responsiveImageCarousel .prevBtn,
.responsiveImageCarousel .nextBtn { position: absolute; width: 40px; height: 40px; top: 50%; margin-top: -20px; z-index: 1; opacity: 0.8; -webkit-transition: 0.2s all; transition: 0.2s all;
}
.responsiveImageCarousel .prevBtn:hover,
.responsiveImageCarousel .nextBtn:hover { cursor: pointer; opacity: 1;
}
.responsiveImageCarousel .prevBtn{ left: 2%; background:url(http://adamgraysondsgn.com/images/leftArrow.svg);
}
.responsiveImageCarousel .nextBtn{ right: 2%; background:url(http://adamgraysondsgn.com/images/rightArrow.svg);
}
.responsiveImageCarousel .images { position: relative; width: 100%; overflow: hidden; z-index: 0;
}
.responsiveImageCarousel .images ul { overflow: hidden; position: relative;
}
.responsiveImageCarousel .images ul li { float: left;
}
.responsiveImageCarousel .images ul li img{ width: 100%; display: block;
}
.responsiveImageCarousel .pagination { position: absolute; width: 100%; z-index: 1; bottom: 10px; left: 0; right: 0; margin: auto; opacity: 0.8;
}
.responsiveImageCarousel .pagination ul{ overflow: hidden;
}
.responsiveImageCarousel .pagination ul li{ border-radius: 100%; float: left; width: 10px; height: 10px; margin: 0px 5px; border: 5px solid #ffffff; -webkit-transition: 0.2s all; transition: 0.2s all;
}
.responsiveImageCarousel .pagination ul li.active{ background: none; border: 1px solid #ffffff;
}

Responsive Carousel - Script Codes JS Codes

$(document).ready(function(){ var currPage = 0, animTime = 300, carouselPolice = false; function resetCarouselPolice(delay){ setTimeout(function(){ carouselPolice = false; }, delay); } function sizeCarousels(){ $('.responsiveImageCarousel').each(function(){ var item = $(this).find('.images ul li'), list = $(this).find('.images ul'), itemCount = $(this).find('.images ul li').length, itemWidth = $(this).width(); item.width(itemWidth); list.width(itemWidth * (itemCount + 1)); }); } function generatePagination(){ $('.responsiveImageCarousel').each(function(){ var pagination = $(this).find('.pagination ul'), itemCount = $(this).find('.images ul li').length; for(i = 0; i < itemCount; i++){ pagination.append('<li></li>'); } pagination.find('li').eq(0).addClass('active'); var itemWidth = $(this).find('.pagination ul li').outerWidth(true); $(this).find('.pagination').width(itemCount * itemWidth); }); } function initCarousels(){ sizeCarousels(); generatePagination(); } function updatePagination(element, target){ element.removeClass('active'); element.eq(target).addClass('active'); } $(document).on('click', '.responsiveImageCarousel .prevBtn', function(){ if(carouselPolice){return;} carouselPolice = true; var parent = $(this).closest('.responsiveImageCarousel'), listToMove = parent.find('.images ul'), pagination = parent.find('.pagination ul li'), lastItem = parent.find('.images ul li').length, clone = parent.find('.images ul li').eq(lastItem - 1).clone(); listToMove.prepend(clone); listToMove.css({ x: -parent.width() }); listToMove.transition({ x: 0 }, animTime, function(){ parent.find('.images ul li').eq(lastItem).remove(); }); currPage = parent.find('.pagination ul li.active').index(); currPage--; if (currPage < 0){ currPage = lastItem - 1; } updatePagination(pagination, currPage); resetCarouselPolice(animTime); }); $(document).on('click', '.responsiveImageCarousel .nextBtn', function(){ if(carouselPolice){return;} carouselPolice = true; var parent = $(this).closest('.responsiveImageCarousel'), listToMove = parent.find('.images ul'), lastItem = parent.find('.images ul li').length, pagination = parent.find('.pagination ul li'), clone = parent.find('.images ul li').eq(0).clone(); listToMove.append(clone); listToMove.transition({ x: '-=' + parent.width() }, animTime, function(){ listToMove.css({ x: 0 }); parent.find('.images ul li').eq(0).remove(); }); currPage = parent.find('.pagination ul li.active').index(); currPage++; if (currPage >= lastItem){ currPage = 0; } updatePagination(pagination, currPage); resetCarouselPolice(animTime); }); $(window).resize(function(){ sizeCarousels(); }); initCarousels();
});
Responsive Carousel - Script Codes
Responsive Carousel - Script Codes
Home Page Home
Developer Adam Grayson
Username agrayson
Uploaded November 10, 2022
Rating 3
Size 3,291 Kb
Views 18,216
Do you need developer help for Responsive Carousel?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adam Grayson (agrayson) Script Codes
Name
Playing Animations on Scroll
Sliding Lines Animation
SVG Animation - Circle Fill
CCS3 Navigation Hover Effect
Drag and Drop File Preview
Spinning Circles
Dynamic circle menus with SASS
Custom Select Element
Form Progress Bar
RPG Cooldown
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!