Responsive Carousel Slider with Jquery
How do I make an responsive carousel slider with jquery?
What is a responsive carousel slider with jquery? How do you make a responsive carousel slider with jquery? This script and codes were developed by Samuel Janes on 14 September 2022, Wednesday.
Responsive Carousel Slider with Jquery Previews
Responsive Carousel Slider with Jquery - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Carousel Slider with Jquery</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='slider'> <div class='slider-items-container'> <div class='slider-item'> <img src='http://placehold.it/1920X1080' /> </div> <div class='slider-item'> <img src='http://placehold.it/1280X720' /> </div> <div class='slider-item'> <img src='http://placehold.it/1280X720' /> </div> </div> <div class='controls'> <a href="#" class='prev-btn'><i class="fa fa-angle-left" aria-hidden="true"></i></a> <a href="#" class='next-btn'><i class="fa fa-angle-right" aria-hidden="true"></i></a> </div> <div class='dots'> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Responsive Carousel Slider with Jquery - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(45deg, #008c9e, #00dffc);
}
.slider { width: 100%; max-width: 640px; margin: 0 auto; overflow: hidden; background: white; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.5);
}
.slider .slider-items-container { display: flex; flex-wrap: wrap; height: auto; transition: transform 0.35s ease-in-out;
}
.slider .slider-items-container img { width: 100vw; max-width: 640px; display: block;
}
.slider .controls { width: 100%; padding: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 35px;
}
.slider .controls a { color: #333; text-decoration: none; transition: 0.15s ease-in-out;
}
.slider .controls a:hover { color: #888;
}
.slider .dots { width: 100%; display: flex; justify-content: center; margin: 0 auto; padding: 20px;
}
.slider .dots .dot { width: 10px; height: 10px; background: #333; transition: 0.15s ease-in-out; border-radius: 8px; cursor: pointer; margin: 0 20px;
}
.slider .dots .dot.active { background: #888;
}Responsive Carousel Slider with Jquery - Script Codes JS Codes
function setSlider(){ $(".slider").each( function(){ var $slider = $(this), $itemscontainer = $slider.find(".slider-items-container"); if ($itemscontainer.find(".slider-item.active").length == 0){ $itemscontainer.find(".slider-item").first().addClass("active"); } function setWidth(){ var totalWidth = 0 $($itemscontainer).find(".slider-item").each( function(){ totalWidth += $(this).outerWidth(); }); $itemscontainer.width(totalWidth); } function setTransform(){ var $activeItem = $itemscontainer.find(".slider-item.active"), activeItemOffset = $activeItem.offset().left, itemsContainerOffset = $itemscontainer.offset().left, totalOffset = activeItemOffset - itemsContainerOffset $itemscontainer.css({"transform": "translate( -"+totalOffset+"px, 0px)"}) } function nextSlide(){ var activeItem = $itemscontainer.find(".slider-item.active"), activeItemIndex = activeItem.index(), sliderItemTotal = $itemscontainer.find(".slider-item").length, nextSlide = 0; if (activeItemIndex + 1 > sliderItemTotal - 1){ nextSlide = 0; }else{ nextSlide = activeItemIndex + 1 } var nextSlideSelect = $itemscontainer.find(".slider-item").eq(nextSlide), itemContainerOffset = $itemscontainer.offset().left, totalOffset = nextSlideSelect.offset().left - itemContainerOffset $itemscontainer.find(".slider-item.active").removeClass("active"); nextSlideSelect.addClass("active"); $slider.find(".dots").find(".dot").removeClass("active") $slider.find(".dots").find(".dot").eq(nextSlide).addClass("active"); $itemscontainer.css({"transform": "translate( -"+totalOffset+"px, 0px)"}) } function prevSlide(){ var activeItem = $itemscontainer.find(".slider-item.active"), activeItemIndex = activeItem.index(), sliderItemTotal = $itemscontainer.find(".slider-item").length, nextSlide = 0; if (activeItemIndex - 1 < 0){ nextSlide = sliderItemTotal - 1; }else{ nextSlide = activeItemIndex - 1; } var nextSlideSelect = $itemscontainer.find(".slider-item").eq(nextSlide), itemContainerOffset = $itemscontainer.offset().left, totalOffset = nextSlideSelect.offset().left - itemContainerOffset $itemscontainer.find(".slider-item.active").removeClass("active"); nextSlideSelect.addClass("active"); $slider.find(".dots").find(".dot").removeClass("active") $slider.find(".dots").find(".dot").eq(nextSlide).addClass("active"); $itemscontainer.css({"transform": "translate( -"+totalOffset+"px, 0px)"}) } function makeDots(){ var activeItem = $itemscontainer.find(".slider-item.active"), activeItemIndex = activeItem.index(), sliderItemTotal = $itemscontainer.find(".slider-item").length; for (i = 0; i < sliderItemTotal; i++){ $slider.find(".dots").append("<div class='dot'></div>") } $slider.find(".dots").find(".dot").eq(activeItemIndex).addClass("active") } setWidth(); setTransform(); makeDots(); $(window).resize( function(){ setWidth(); setTransform(); }); var nextBtn = $slider.find(".controls").find(".next-btn"), prevBtn = $slider.find(".controls").find(".prev-btn"); nextBtn.on('click', function(e){ e.preventDefault(); nextSlide(); }); prevBtn.on('click', function(e){ e.preventDefault(); prevSlide(); }); $slider.find(".dots").find(".dot").on('click', function(e){ var dotIndex = $(this).index(), totalOffset = $itemscontainer.find(".slider-item").eq(dotIndex).offset().left - $itemscontainer.offset().left; $itemscontainer.find(".slider-item.active").removeClass("active"); $itemscontainer.find(".slider-item").eq(dotIndex).addClass("active"); $slider.find(".dots").find(".dot").removeClass("active"); $(this).addClass("active") $itemscontainer.css({"transform": "translate( -"+totalOffset+"px, 0px)"}) }); });
}
setSlider();
| Developer | Samuel Janes |
| Username | SamuelJanes |
| Uploaded | September 14, 2022 |
| Rating | 3 |
| Size | 3,456 Kb |
| Views | 46,552 |
Do you need developer help for Responsive Carousel Slider with Jquery?
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!
Samuel Janes (SamuelJanes) Script Codes
| Name | Size |
| Multi-Step Sign Up Form | 4,177 Kb |
| Cool Loader | 1,782 Kb |
| Clipped Navigation | 2,966 Kb |
| Material Ripple Effect on Button | 2,972 Kb |
| Navigation triangle | 2,759 Kb |
| Bottom Right Menu | 2,426 Kb |
| New Portfolio Idea | 8,720 Kb |
| Queens of the Stone Age Rated R Album Cover in CSS | 2,958 Kb |
| Modest Mouse Night on the Sun in CSS | 3,042 Kb |
| CSS only tooltips | 3,273 Kb |
Create amazing art & images 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!
Similar Scripts & Codes
| Name | Username | Size |
| Tile Animation Thing | Frxnz | 4,332 Kb |
| Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
| Direction-icon | Alexandremasy | 3,323 Kb |
| Hello People | Danburrows | 2,365 Kb |
| Simple animated hover effect | Pobee-norris | 3,044 Kb |
| Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
| Replace url via jquery | Serluk | 1,429 Kb |
| Sticky Navbar | Phantomesse | 5,106 Kb |
| Save for later... | Victorfreire | 1,359 Kb |
| Simple Buttons | Haydenmills | 1,750 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!