Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
@stephband/slide-show
Advanced tools
Readme
<slide-show>
An accessible <slide-show>
custom element for building horizontal scroll-snapping
carousels. Features options for pagination, previous and next navigation buttons, autoplay,
continuous looping and fullscreen mode. Children of a <slide-show>
are layed out in a grid
and may contain any arbitrary HTML. About 12kB minified and gzipped.
Demos and docs at stephen.band/slide-show/.
Download the latest release:
github.com/stephband/slide-show/releases
Then import the CSS and JS files:
<link rel="stylesheet" href="./build/slide-show.css" />
<script type="module" src="./build/slide-show.js"></script>
Install into node_modules/
:
npm install @stephband/slide-show
The package comes with CSS files, one for the outer DOM and one for the shadow
DOM. The outer DOM CSS can be imported from build/slide-show.css
:
<link rel="stylesheet" href="./node_modules/@stephband/slide-show/build/slide-show.css" />
The shadow DOM CSS file must be placed in the same location as 'build/slide-show.js', which will work fine as-is until you build your own package to a different location. (I really don't know how you are supposed to handle this sort of thing via npm and I hope someone will advise.)
You are now ready to write <slide-show>
tags in your HTML:
<slide-show loop controls="pagination">
<img src="../images/donkeys.jpg" draggable="false" />
<img src="../images/tractor.jpg" draggable="false" />
<img src="../images/mauverin.jpg" draggable="false" />
</slide-show>
active
- id string of initial slide to 'activate'autoplay
- boolean attribute, slide-show plays through slidescontrols
- token list attribute supporting the tokens "pagination"
, "navigation"
, "fullscreen"
loop
- boolean attribute, causes slides to appear on a continuous carousel.active
- a reference to the current scroll-snap aligned (ie 'active') child.autoplay
- boolean, get/set the state of autoplay.controls
- a TokenList object supporting the tokens "pagination"
, "navigation"
, "fullscreen"
.loop
- boolean, get/set the state of loop'slide-active'
- emitted by a child slide when scrolled into scroll-snap alignmentStyle for the slide-show
:
--slide-duration
- a CSS time value in s
or ms
, used when autoplay
is enabled--padding-left
- padding and scroll-padding inside the scroll area--padding-right
- padding and scroll-padding inside the scroll area::part(prev-button)
- the 'previous' navigation button::part(next-button)
- the 'next' navigation button::part(page-button)
- a pagination button::part(page-button-active)
- the currently active pagination button::part(fullscreen-button)
- the fullscreen toggle button::part(fullscreen-button-active)
- the fullscreen toggle button when in fullscreenStyle for child slides:
--slide-duration
- a CSS time value in s
or ms
, used when autoplay
is enabledSee stephen.band/slide-show/ for more detail.
element.scrollTo()
The script element.js
includes a polyfill for element.scrollTo()
, as
Safari's native version lacks support for smooth scrolling behaviour. The
polyfill is ignored in other browsers.
To build the <slide-show>
component from its dependent modules, you must have
Deno installed. You then need to clone this git
repository into the same directory as two other repositories that contain
dependencies:
git clone git@github.com:stephband/fn
git clone git@github.com:stephband/dom
git clone git@github.com:stephband/slide-show
cd slide-show
Now the slide-show
modules can be built. The build process uses esbuild
to import and compile JS and CSS modules to the build/
folder:
make modules
To build documentation, also clone the literal repo:
git clone git@github.com:stephband/literal
cd slide-show
The documentation builder compiles .literal
templates to .html
, pulling out
documentation comments from JS and CSS, and packages dependencies found in
the docs/
folder:
make docs
FAQs
The accessible, scrollable, styleable, horizontal carousel custom element. No dependencies, about 12kB minified and gzipped.
The npm package @stephband/slide-show receives a total of 1 weekly downloads. As such, @stephband/slide-show popularity was classified as not popular.
We found that @stephband/slide-show demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.