@appstractdk/as-slideshow

1.1.11 • Public • Published

as-basic-slideshow

The as-basic-slider is a basic 'stupid' slideshow, without animations or any responsiveness. Other front-end module slideshows will inherit this Class and extend the functionalities. But it can also be included, as is and customized, in your current project.

Javascript and CSS is included in the package, and the basic markup is presented below.

<section class="slideshow" data-section-name="cases">
	<div class="slideshow-item">
			<img class="slideshow-item-image" src="../../dist/static/images/europa.png" alt="europa">
	</div>
	<div class="slideshow-item">
			<img class="slideshow-item-image" src="../../dist/static/images/jupiter.jpg" alt="jupiter">
	</div>
	<div class="slideshow-item">
			<img class="slideshow-item-image" src="../../dist/static/images/mars.jpg" alt="mars">
	</div>
	<div class="slideshow-item">
			<img class="slideshow-item-image" src="../../dist/static/images/moon.jpg" alt="moon">
	</div>
	<div class="slideshow-item">
			<img class="slideshow-item-image" src="../../dist/static/images/saturn.jpg" alt="saturn">
	</div>
	<div class="slideshow-item">
			<img class="slideshow-item-image" src="../../dist/static/images/solar-system.jpg" alt="solar-system">
	</div>
	<div class="slideshow-item">
			<img class="slideshow-item-image" src="../../dist/static/images/venus.jpg" alt="venus">
	</div>
	<div class="slideshow-arrows-container">
			<div class="slideshow-arrow left">
				<svg class="svg-icon slideshow-arrow-icon"><use xlink:href="#arrow-left" /></svg>
			</div>
			<div class="slideshow-arrow right">
				<svg class="svg-icon slideshow-arrow-icon"><use xlink:href="#arrow-right" /></svg>
			</div>
	</div>
</section>

Readme

Keywords

none

Package Sidebar

Install

npm i @appstractdk/as-slideshow

Weekly Downloads

1

Version

1.1.11

License

ISC

Unpacked Size

12.8 kB

Total Files

8

Last publish

Collaborators

  • appstract-team
  • raulstefan
  • ioanagrozav
  • mebappstract