Sliding images gallery

Developer
Arden
Size
2,947 Kb
Views
16,192
  1. Sliding images gallery Previews
  2. Sliding images gallery HTML Codes
  3. Sliding images gallery CSS Codes
  4. Sliding images gallery JS Codes

How do I make an sliding images gallery?

A simple sliding images overview with CSS transitions. Works in webkit browsers, shows some empty space in IE10 and Firefox (most notecable in Firefox). What is a sliding images gallery? How do you make a sliding images gallery? This script and codes were developed by Arden on 19 November 2022, Saturday.

Sliding images gallery Previews
IQ Test

Sliding images gallery - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sliding images gallery</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> <div class='gallery'> <div class='imgWrap imgWrap1' style='background-image:url(http://placekitten.com/1920/1000); '></div> <div class='imgWrap imgWrap2' style='background-image:url(http://placekitten.com/g/1920/1080);'></div> <div class='imgWrap imgWrap3' style='background-image:url(http://placekitten.com/1920/1000);'></div> <div class='imgWrap imgWrap4' style='background-image:url(http://placekitten.com/g/1920/1080);'></div> <div class='imgWrap imgWrap5' style='background-image:url(http://placekitten.com/1920/1000);'></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>

Sliding images gallery - Script Codes CSS Codes

body, html { height: 100%; width: 100%; overflow: hidden;
}
.gallery { overflow: hidden; height: 100%; width: 100%; display: block; margin: 0; padding: 0; position: relative; background: #000;
}
.imgWrap { float: left; width: 20%; height: 100%; overflow: hidden; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; -moz-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.imgWrap:last-child { float: left;
}
.current { width: 36%; -moz-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; cursor: pointer;
}
.notCurrent { width: 16%; -moz-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); -o-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Sliding images gallery - Script Codes JS Codes

$('.imgWrap').hover(function () { // $(this).css('width', '36%'); $(this).addClass('current'); //$(this).siblings().css('width', '16%'); $(this).siblings().addClass('notCurrent');
}, function () { //$('.imgWrap').css('width', '20%'); $('.imgWrap').siblings().removeClass('notCurrent'); $('.imgWrap').removeClass('current'); });
Sliding images gallery - Script Codes
Sliding images gallery - Script Codes
Home Page Home
Developer Arden
Username aderaaij
Uploaded November 19, 2022
Rating 3.5
Size 2,947 Kb
Views 16,192
Do you need developer help for Sliding images gallery?

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!

Arden (aderaaij) Script Codes
Name
Get slider data with the Fetch API
Animated sequence
Vertical off-screen push menu
CSS Animated Background Gradient
Mapbox Map with Animated Marker Icons
Share icons with counter
Vanilla JS Lightbox Slideshow
Responsive push menu with icon transform
Full screen menu animation
Intersection Observer API fun
Create amazing marketing copy 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!