Super flexible carousel. One hundred lines of JavaScript code to make responsive carousel with whatever number of slides at same time you need. Enjoy!
A Pen by Stan Williams on CodePen.
Stan Williams stanwmusic
🏠
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <script src="https://d3js.org/topojson.v3.min.js"></script> | |
| <svg id="map"></svg> | |
| <div id="info" class="panel"> | |
| <h1>Earthquake Monitor</h1> | |
| <h3>www.Stanwilliams.org</h3> | |
| <div class="live"><div class="live-dot"></div>USGS Live Feed</div> | |
| <p style="color:#555;line-height:1.5"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <script src="https://d3js.org/topojson.v3.min.js"></script> | |
| <svg id="map"></svg> | |
| <!--<div id="info" class="panel"> | |
| <h1>Earthquake Monitor</h1> | |
| <div class="live"><div class="live-dot"></div>USGS Live Feed</div> | |
| <p style="color:#555;line-height:1.5"> | |
| Real-time seismic activity. Ring size indicates magnitude. Color shows depth. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main> | |
| <ul class='slider'> | |
| <li class='item' style="background-image: url('https://cdn.mos.cms.futurecdn.net/dP3N4qnEZ4tCTCLq59iysd.jpg')"> | |
| <div class='content'> | |
| <h2 class='title'>"RESPONSIVE IMAGE GALLERY"</h2> | |
| <p class='description'> Lorem ipsum, Snuffsum Dipsum | |
| dolor sit amet sit boy sit consectetur | |
| adipisicing elit. Tempore fuga voluptatum, iure corporis inventorey bloney samwich | |
| praesentium nisi. Id laboriosam ipsam enim. </p> | |
| <button>Read More</button> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="page-wrap"> | |
| <h1>Sticky Footer</h1> | |
| <h2>with Fixed Footer Height</h2> | |
| <button id="add">Add Content</button> | |
| </div> | |
| <footer class="site-footer"> |
stanwmusic
/ frame-shadow-effect-with-double-box-shadow.markdown
Created
December 18, 2025 21:15
Frame shadow effect with double box shadow
A Pen by Stan Williams on CodePen.
stanwmusic
/ a-cute-cat-select-with-auto-tail-assist.markdown
Created
December 18, 2025 21:10
A cute cat select with auto-tail assist
a quick cat themed pen to have a play with base-select
A Pen by Stan Williams on CodePen.
A Pen by Stan Williams on CodePen.
stanwmusic
/ css-scoped-custom-property-trail-grid.markdown
Created
December 16, 2025 08:42
CSS scoped custom property trail grid 👨🍳
A Pen by Stan Williams on CodePen.
stanwmusic
/ heartless-by-josh-comeau.markdown
Created
December 16, 2025 08:40
Heartless by Josh Comeau
A Pen by Stan Williams on CodePen.
NewerOlder