Mouseover carousel with indicator

Developer
Jesper Hills
Size
2,264 Kb
Views
16,192
  1. Mouseover carousel with indicator Previews
  2. Mouseover carousel with indicator HTML Codes
  3. Mouseover carousel with indicator CSS Codes
  4. Mouseover carousel with indicator JS Codes

How do I make an mouseover carousel with indicator?

What is a mouseover carousel with indicator? How do you make a mouseover carousel with indicator? This script and codes were developed by Jesper Hills on 13 October 2022, Thursday.

Mouseover carousel with indicator Previews
IQ Test

Mouseover carousel with indicator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mouseover carousel with indicator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="item"> <div class="slides"> <img src="http://farm9.staticflickr.com/8182/8032890824_0e352c4f8a.jpg" /> <img src="http://farm9.staticflickr.com/8037/8027827160_18180f4b90.jpg" /> <img src="http://farm9.staticflickr.com/8177/8024145201_8152ff3a4d.jpg" /> <img src="http://farm9.staticflickr.com/8036/8040612463_22ab25e180.jpg" /> <img src="http://farm9.staticflickr.com/8309/8030348891_0f235d556e.jpg" /> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mouseover carousel with indicator - Script Codes CSS Codes

body { background: #333; padding: 1em 4em; }
.item { margin: 0 auto; padding: 0 0 6px; width: 500px; overflow: hidden; position: relative;
}
.slides { width: 100%; overflow: hidden;
}
.slides { height: 330px; }
.slides img { display: block; }
.current { display: block; height: 4px; background: #CCC; overflow: hidden; position: absolute; bottom: -4px; left: 0; -webkit-transition: left 0.2s; -moz-transition: left 0.2s; -o-transition: left 0.2s; transition: left 0.2s;
}
.item:hover .current { bottom: 0;
}

Mouseover carousel with indicator - Script Codes JS Codes

var slides = $(".slides");
slides.each(function(){ // Variables var t = $(this), i = t.children(), n = i.length, w = t.width() / n, c = $('<div class="current" />').insertAfter(t); // Set width of indicator to single space c.width(w); // Hide all but first item i.not(":first").hide(); // Detect mouse move X co-ord t.on("mousemove", function(e){ // Divide by number of items // Round down to whole integer var to = Math.floor(e.offsetX/w); // Show item with index equal to this i.eq(to).show().siblings().hide(); // Move indicator c.css("left", (w * to)); });
});
Mouseover carousel with indicator - Script Codes
Mouseover carousel with indicator - Script Codes
Home Page Home
Developer Jesper Hills
Username nopr
Uploaded October 13, 2022
Rating 3
Size 2,264 Kb
Views 16,192
Do you need developer help for Mouseover carousel with indicator?

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!

Jesper Hills (nopr) Script Codes
Name
Peeling Button
Fake CSS Loader
Click-activated fluid width slider
Mobile UI Concept
CSS 3D Carousel
Full-height content with footer below fold
CSS Fab Ice Cream
CSS3 Record Collection
DRY-BEM with SCSS
Smooth click-activated slider
Create amazing Facebook ads 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!