zsoltime / carousel

Simple 3D Carousel

Simple Carousel

Usage

<!-- Include CSS -->

<!-- Wrapper -->
<div class="carousel">
  <!-- Slider -->
  <div="carousel__items">
    <img src="image-1.jpg" alt="">
    <img src="image-2.jpg" alt="">
    <img src="image-3.jpg" alt="">
  </div>
  <!-- Controls -->
  <nav class="carousel__controls">
    <button class="btn btn--prev" type="button">Prev</button>
    <button class="btn btn--next" type="button">Next</button>
  </nav>
</div>

<!-- Include JS -->
<!-- Add Carousel when all images have finished loading -->
<script>
window.addEventListener('load', () => {
  document.querySelectorAll('.carousel')
    .forEach(Carousel);
});
</script>

Tools Used

• Gulp.js task runner
• Webpack module bundler
• Babel compiler
• ESLint linter with Airbnb's base config
• Pug template engine
• Sass with PostCSS' Autoprefixer

Install and Build

You need to have yarn installed on your computer. (Actually, you could also use npm 👌)

Clone this repo

git clone https://github.com/zsoltime/carousel.git
cd carousel

Install dependencies

yarn
# OR
npm install

Start dev server with browser sync

It builds HTML, CSS, and the JavaScript bundle, starts a dev server and refreshes the browser on every saved changes.

yarn start
# OR
npm start

Build production bundle

It uglifies JS, minifies CSS and images, replaces references to non-optimized scripts and stylesheets in HTML files and copies everything necessary to the dist folder - ready to upload.

yarn build
# OR
npm run build

Preview production build

It's the same as the build task above but it also starts a server so you can check your work.

yarn preview
# OR
npm run preview