Image Slider - responsive, modular, autoplay
How do I make an image slider - responsive, modular, autoplay?
Image Slider - responsive, modular, autoplay. What is a image slider - responsive, modular, autoplay? How do you make a image slider - responsive, modular, autoplay? This script and codes were developed by EricPorter on 09 January 2023, Monday.
Image Slider - responsive, modular, autoplay Previews
Image Slider - responsive, modular, autoplay - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Image Slider - responsive, modular, autoplay</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium+Web:200,300,400,700">
<meta name="viewport" content="width=device-width"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .slider,
.slider > div { /* Images default to Center Center. Maybe try 'center top'? */ background-position: center center; display: block; width: 100%; height: 500px; /* height: 100vh; *//* If you want fullscreen */ position: relative; background-size: cover; background-repeat: no-repeat; background-color: #000; overflow: hidden; -moz-transition: transform .4s; -o-transition: transform .4s; -webkit-transition: transform .4s; transition: transform .4s;
}
.slider > div { position: absolute;
}
.slider > i { color: #5bbd72; position: absolute; font-size: 60px; margin: 20px; top: 40%; text-shadow: 0 10px 2px #223422; transition: .3s; width: 30px; padding: 10px 13px; background: #fff; background: rgba(255, 255, 255, .3); cursor: pointer; line-height: 0; box-sizing: content-box; border-radius: 3px; z-index: 4;
}
.slider > i svg { margin-top: 3px;
}
.slider > .left { left: -100px;
}
.slider > .right { right: -100px;
}
.slider:hover > .left { left: 0;
}
.slider:hover > .right { right: 0;
}
.slider > i:hover { background:#fff; background: rgba(255, 255, 255, .8); transform: translateX(-2px);
}
.slider > i.right:hover { transform: translateX(2px);
}
.slider > i.right:active,
.slider > i.left:active { transform: translateY(1px);
}
.slider:hover > div { transform: scale(1.01);
}
.hoverZoomOff:hover > div { transform: scale(1);
}
.slider > ul { position: absolute; bottom: 10px; left: 50%; z-index: 4; padding: 0; margin: 0; transform: translateX(-50%);
}
.slider > ul > li { padding: 0; width: 20px; height: 20px; border-radius: 50%; list-style: none; float: left; margin: 10px 10px 0; cursor: pointer; border: 1px solid #fff; -moz-transition: .3s; -o-transition: .3s; -webkit-transition: .3s; transition: .3s;
}
.slider > ul > .showli { background-color: #7EC03D; -moz-animation: boing .5s forwards; -o-animation: boing .5s forwards; -webkit-animation: boing .5s forwards; animation: boing .5s forwards;
}
.slider > ul > li:hover { background-color: #7EC03D;
}
.slider > .show { z-index: 1;
}
.hideDots > ul { display: none;
}
.showArrows > .left { left: 0;
}
.showArrows > .right { right: 0;
}
.titleBar { z-index: 2; display: inline-block; background: rgba(0,0,0,.5); position: absolute; width: 100%; bottom: 0; transform: translateY(100%); padding: 20px 30px; transition: .3s; color: #fff;
}
.titleBar * { transform: translate(-20px, 30px); transition: all 700ms cubic-bezier(0.37, 0.31, 0.2, 0.85) 200ms; opacity: 0;
}
.titleBarTop .titleBar * { transform: translate(-20px, -30px);
}
.slider:hover .titleBar,
.slider:hover .titleBar * { transform: translate(0); opacity: 1;
}
.titleBarTop .titleBar { top: 0; bottom: initial; transform: translateY(-100%);
}
.slider > div span { display: block; background: rgba(0,0,0,.5); position: absolute; bottom: 0; color: #fff; text-align: center; padding: 0; width: 100%;
}
@keyframes boing { 0% { transform: scale(1.2); } 40% { transform: scale(.6); } 60% { transform: scale(1.2); } 80% { transform: scale(.8); } 100% { transform: scale(1); }
}
/* -------------------------------------- */
#slider2 { max-width: 30%; margin-right: 20px;
}
.row2Wrap { display: flex;
}
.content { padding: 50px; margin-bottom: 100px;
}
html { height: 100%; box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
h1, h2, h3 { font-family: 'Crimson Text', sans-serif; font-weight: 100;
}
body { font: 15px 'Titillium Web', Arial, sans-serif; background: radial-gradient(#121212, #000); height: 100%; color: #aaa; margin: 0; padding: 0;
}
.content { padding: 10px 15vw;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h2 style="text-align: center;">Options shown below. Each slider has different options set.</h2>
<!-- Slider 1 -->
<div class="slider" id="slider1"> <!-- Slides --> <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_bodie-11.jpg)"></div> <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/jungle.jpg)"></div> <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/Gif-pont-lueur-600.gif)"></div> <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_110627-8240-Myst.jpg)"></div> <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_Sharpened-version.jpg)"></div> <!-- The Arrows --> <i class="left" class="arrows" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z"></path></svg></i> <i class="right" class="arrows" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" transform="translate(100, 100) rotate(180) "></path></svg></i> <!-- Title Bar --> <span class="titleBar"> <h1>This Slider has all default settings.</h1> </span>
</div>
<br>
<div class="row2Wrap"> <div class="slider" id="slider2"> <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/blurredBeachGrassCloseup.jpg)"></div> <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_110627-8240-Myst.jpg)"></div> <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/jungle.jpg)"></div> <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_bodie-11.jpg)"></div> <i class="left" class="arrows" style="z-index:2; position:absolute;"> <svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z"></path></svg> </i> <i class="right" class="arrows" style="z-index:2; position:absolute;"> <svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" transform="translate(100, 100) rotate(180) "></path></svg> </i> <!-- Title Bar --> <!-- <span class="titleBar"> <h1>I am like a leaf in the wind.</h1> <p>Watch me soar!</p> </span> --> </div> <!-- <h3>Individual slide text</h3> --> <!-- Slider 1 --> <div class="slider" id="slider3"> <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/jungle.jpg)"> <span> <h2>I'm a title for Slide #1</h2> </span> </div> <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_110627-8240-Myst.jpg)"> <span> <h2>I'm a title for Slide #2</h2> </span> </div> <div style="background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_bodie-11.jpg)"> <span> <h2>I'm a title for Slide #3</h2> </span> </div> <!-- The Arrows --> <i class="left" class="arrows" style="z-index:2; position:absolute;"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z"></path></svg></i> <i class="right" class="arrows" style="z-index:2; position:absolute;"> <svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" transform="translate(100, 100) rotate(180) "></path></svg></i> <!-- Title Bar --> <!-- <span class="titleBar"> <h1>I am like a leaf in the wind.</h1> <p>Watch me soar!</p> </span> --> </div>
</div>
<div class="content"> <h2> Responsive. Modular: can be more than one on the page. Defaults to 100% container width, 500px height. Pauses slideshow on hover.</h2> <h2>Images are Background-images. Filling the container div regardless of the image size.</h2> <h3>Behavior you can change: <ul> <li>autoPlay: "off"</li> <li>showArrows: "off"</li> <li>hideDots: "on"</li> <li>hoverZoom: "off"</li> <li>titleBarTop: "on"</li> <li>Change slide pauses and fade speeds</li> </ul> </h3>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Image Slider - responsive, modular, autoplay - Script Codes CSS Codes
.slider,
.slider > div { /* Images default to Center Center. Maybe try 'center top'? */ background-position: center center; display: block; width: 100%; height: 500px; /* height: 100vh; *//* If you want fullscreen */ position: relative; background-size: cover; background-repeat: no-repeat; background-color: #000; overflow: hidden; -moz-transition: transform .4s; -o-transition: transform .4s; -webkit-transition: transform .4s; transition: transform .4s;
}
.slider > div { position: absolute;
}
.slider > i { color: #5bbd72; position: absolute; font-size: 60px; margin: 20px; top: 40%; text-shadow: 0 10px 2px #223422; transition: .3s; width: 30px; padding: 10px 13px; background: #fff; background: rgba(255, 255, 255, .3); cursor: pointer; line-height: 0; box-sizing: content-box; border-radius: 3px; z-index: 4;
}
.slider > i svg { margin-top: 3px;
}
.slider > .left { left: -100px;
}
.slider > .right { right: -100px;
}
.slider:hover > .left { left: 0;
}
.slider:hover > .right { right: 0;
}
.slider > i:hover { background:#fff; background: rgba(255, 255, 255, .8); transform: translateX(-2px);
}
.slider > i.right:hover { transform: translateX(2px);
}
.slider > i.right:active,
.slider > i.left:active { transform: translateY(1px);
}
.slider:hover > div { transform: scale(1.01);
}
.hoverZoomOff:hover > div { transform: scale(1);
}
.slider > ul { position: absolute; bottom: 10px; left: 50%; z-index: 4; padding: 0; margin: 0; transform: translateX(-50%);
}
.slider > ul > li { padding: 0; width: 20px; height: 20px; border-radius: 50%; list-style: none; float: left; margin: 10px 10px 0; cursor: pointer; border: 1px solid #fff; -moz-transition: .3s; -o-transition: .3s; -webkit-transition: .3s; transition: .3s;
}
.slider > ul > .showli { background-color: #7EC03D; -moz-animation: boing .5s forwards; -o-animation: boing .5s forwards; -webkit-animation: boing .5s forwards; animation: boing .5s forwards;
}
.slider > ul > li:hover { background-color: #7EC03D;
}
.slider > .show { z-index: 1;
}
.hideDots > ul { display: none;
}
.showArrows > .left { left: 0;
}
.showArrows > .right { right: 0;
}
.titleBar { z-index: 2; display: inline-block; background: rgba(0,0,0,.5); position: absolute; width: 100%; bottom: 0; transform: translateY(100%); padding: 20px 30px; transition: .3s; color: #fff;
}
.titleBar * { transform: translate(-20px, 30px); transition: all 700ms cubic-bezier(0.37, 0.31, 0.2, 0.85) 200ms; opacity: 0;
}
.titleBarTop .titleBar * { transform: translate(-20px, -30px);
}
.slider:hover .titleBar,
.slider:hover .titleBar * { transform: translate(0); opacity: 1;
}
.titleBarTop .titleBar { top: 0; bottom: initial; transform: translateY(-100%);
}
.slider > div span { display: block; background: rgba(0,0,0,.5); position: absolute; bottom: 0; color: #fff; text-align: center; padding: 0; width: 100%;
}
@keyframes boing { 0% { transform: scale(1.2); } 40% { transform: scale(.6); } 60% { transform: scale(1.2); } 80% { transform: scale(.8); } 100% { transform: scale(1); }
}
/* -------------------------------------- */
#slider2 { max-width: 30%; margin-right: 20px;
}
.row2Wrap { display: flex;
}
.content { padding: 50px; margin-bottom: 100px;
}
html { height: 100%; box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
h1, h2, h3 { font-family: 'Crimson Text', sans-serif; font-weight: 100;
}
body { font: 15px 'Titillium Web', Arial, sans-serif; background: radial-gradient(#121212, #000); height: 100%; color: #aaa; margin: 0; padding: 0;
}
.content { padding: 10px 15vw;
}
Image Slider - responsive, modular, autoplay - Script Codes JS Codes
(function($) { "use strict"; $.fn.sliderResponsive = function(settings) { var set = $.extend( { slidePause: 5000, fadeSpeed: 800, autoPlay: "on", showArrows: "off", hideDots: "off", hoverZoom: "on", titleBarTop: "off" }, settings ); var $slider = $(this); var size = $slider.find("> div").length; //number of slides var position = 0; // current position of carousal var sliderIntervalID; // used to clear autoplay // Add a Dot for each slide $slider.append("<ul></ul>"); $slider.find("> div").each(function(){ $slider.find("> ul").append('<li></li>'); }); // Put .show on the first Slide $slider.find("div:first-of-type").addClass("show"); // Put .showLi on the first dot $slider.find("li:first-of-type").addClass("showli") //fadeout all items except .show $slider.find("> div").not(".show").fadeOut(); // If Autoplay is set to 'on' than start it if (set.autoPlay === "on") { startSlider(); } // If showarrows is set to 'on' then don't hide them if (set.showArrows === "on") { $slider.addClass('showArrows'); } // If hideDots is set to 'on' then hide them if (set.hideDots === "on") { $slider.addClass('hideDots'); } // If hoverZoom is set to 'off' then stop it if (set.hoverZoom === "off") { $slider.addClass('hoverZoomOff'); } // If titleBarTop is set to 'on' then move it up if (set.titleBarTop === "on") { $slider.addClass('titleBarTop'); } // function to start auto play function startSlider() { sliderIntervalID = setInterval(function() { nextSlide(); }, set.slidePause); } // on mouseover stop the autoplay $slider.mouseover(function() { if (set.autoPlay === "on") { clearInterval(sliderIntervalID); } }); // on mouseout starts the autoplay $slider.mouseout(function() { if (set.autoPlay === "on") { startSlider(); } }); //on right arrow click $slider.find("> .right").click(nextSlide) //on left arrow click $slider.find("> .left").click(prevSlide); // Go to next slide function nextSlide() { position = $slider.find(".show").index() + 1; if (position > size - 1) position = 0; changeCarousel(position); } // Go to previous slide function prevSlide() { position = $slider.find(".show").index() - 1; if (position < 0) position = size - 1; changeCarousel(position); } //when user clicks slider button $slider.find(" > ul > li").click(function() { position = $(this).index(); changeCarousel($(this).index()); }); //this changes the image and button selection function changeCarousel() { $slider.find(".show").removeClass("show").fadeOut(); $slider .find("> div") .eq(position) .fadeIn(set.fadeSpeed) .addClass("show"); // The Dots $slider.find("> ul").find(".showli").removeClass("showli"); $slider.find("> ul > li").eq(position).addClass("showli"); } return $slider; };
})(jQuery);
//////////////////////////////////////////////
// Activate each slider - change options
//////////////////////////////////////////////
$(document).ready(function() { $("#slider1").sliderResponsive({ // Using default everything // slidePause: 5000, // fadeSpeed: 800, // autoPlay: "on", // showArrows: "off", // hideDots: "off", // hoverZoom: "on", // titleBarTop: "off" }); $("#slider2").sliderResponsive({ fadeSpeed: 300, autoPlay: "off", showArrows: "on", hideDots: "on" }); $("#slider3").sliderResponsive({ hoverZoom: "off", hideDots: "on" });
});
| Developer | EricPorter |
| Username | EricPorter |
| Uploaded | January 09, 2023 |
| Rating | 4 |
| Size | 6,135 Kb |
| Views | 4,048 |
Do you need developer help for Image Slider - responsive, modular, autoplay?
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!
EricPorter (EricPorter) Script Codes
| Name | Size |
| Flattish Buttons | 4,476 Kb |
| Back to Top Button - animated | 2,680 Kb |
| CSS Animated Bicycle | 3,460 Kb |
| CSS Tabs | 3,820 Kb |
| Graphs - animated on scroll, responsive, data-driven | 7,477 Kb |
| Text Image Masking | 2,771 Kb |
| Floating Form Field Labels | 4,010 Kb |
| CSS Buttons Set | 2,039 Kb |
| Styled Contact Form - jQuery Validate | 4,663 Kb |
| Image Hover Effects | 3,035 Kb |
Create amazing blog posts 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 |
| CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
| CSS Org Chart | Appirio-ux | 3,882 Kb |
| Fluid Grid 12 | Alexoliverwd | 2,309 Kb |
| Sass Radar | Jlong | 6,887 Kb |
| Electric worm | Jeffibacache | 2,377 Kb |
| The Monty Hall Problem | Melatonind | 4,360 Kb |
| Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
| Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
| Simple checkbox style | Vncnz | 2,628 Kb |
| Z-index demo | Kblh | 1,534 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!