Smooth click-activated slider
How do I make an smooth click-activated slider?
What is a smooth click-activated slider? How do you make a smooth click-activated slider? This script and codes were developed by Jesper Hills on 13 October 2022, Thursday.
Smooth click-activated slider - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smooth click-activated slider</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <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! */ body { padding: 3em 0; overflow-x: hidden; background: #DDD;
}
.slider { position: relative; left: -320px; margin-left: 50%;
}
ul { white-space: nowrap; overflow: visible; position: relative; left: 0; transition: left 1s;
}
li { display: inline-block; margin: 20px; cursor: pointer; height: 422px;
}
li img { border: 10px solid #FFF; box-shadow: 0 3px 6px 0 #999; display: block; height: 300px; opacity: 0.6; margin-top: 50px; transition: height 1s, opacity 0.5s, margin-top 1s;
}
li:hover img { box-shadow: 0 3px 6px 0 #333;
}
li.active img { margin-top: 0; height: 400px; opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="slider"> <ul> <li class="active"> <img src="//bit.ly/VTv2Wg" /> </li> <li> <img src="//bit.ly/VTv2Wg" /> </li> <li> <img src="//bit.ly/VTv2Wg" /> </li> <li> <img src="//bit.ly/VTv2Wg" /> </li> <li> <img src="//bit.ly/VTv2Wg" /> </li> </ul>
</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>
Smooth click-activated slider - Script Codes CSS Codes
body { padding: 3em 0; overflow-x: hidden; background: #DDD;
}
.slider { position: relative; left: -320px; margin-left: 50%;
}
ul { white-space: nowrap; overflow: visible; position: relative; left: 0; transition: left 1s;
}
li { display: inline-block; margin: 20px; cursor: pointer; height: 422px;
}
li img { border: 10px solid #FFF; box-shadow: 0 3px 6px 0 #999; display: block; height: 300px; opacity: 0.6; margin-top: 50px; transition: height 1s, opacity 0.5s, margin-top 1s;
}
li:hover img { box-shadow: 0 3px 6px 0 #333;
}
li.active img { margin-top: 0; height: 400px; opacity: 1;
}
Smooth click-activated slider - Script Codes JS Codes
$("li").on("click", function(){ var item = $(this), pos = "-"+(item.index() * 515)+"px"; item.addClass("active"); item.siblings().removeClass("active"); $("ul").css("left", pos);
});
Developer | Jesper Hills |
Username | nopr |
Uploaded | October 13, 2022 |
Rating | 4.5 |
Size | 2,424 Kb |
Views | 20,240 |
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!
Name | Size |
Full-height content with footer below fold | 2,350 Kb |
Click-activated fluid width slider | 2,567 Kb |
CSS3 Text Masking | 2,609 Kb |
Mouseover carousel with indicator | 2,264 Kb |
Fake CSS Loader | 2,791 Kb |
Using label to style File Input | 2,646 Kb |
Mobile UI Concept | 3,761 Kb |
CSS 3D Carousel | 2,986 Kb |
Vertically rotating text with CSS | 2,141 Kb |
Hidden Search | 5,482 Kb |
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!
Name | Username | Size |
Angular Route | Arun_v606 | 1,837 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
RAQuote | Naderk007 | 4,412 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Price table | Serluk | 5,928 Kb |
APortfolio | Skybutterfly | 5,174 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
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!