Giter VIP home page Giter VIP logo

simple-carousel-test's Introduction

Simple Carousel

This is a simple vanilla JS carousel used to display images. Self contained so it can be dropped into any project.

The layout is created using flexbox. By allowing flexbox to do the heavy lifting of responsive and adaptive design it leaves the JS to simply add a few classes here and there and control the order via flexbox order:n.

Slide transition effects are handled with performant CSS transitions, transforming only translateX() properties.

Tech setup

  • NPM
  • Yarn
  • ParceJS (Application bundler)
  • CSS (SASS)
  • JS (ES6 Transpiled via babel)
  • Docs (JSDoc style comments for autogen documentation)
  • Karma/Jasmine (for tests)
  • 3rd Party Dependancies
    • normalise.css (helps with cross browser defaults)
    • hammerjs (swipe events)

Building and running the project on localhost

Install dependencies:

yarn install

To run in hot module reloading mode:

yarn start

To create a production build:

yarn build-prod

Fully compressed and concatenated HTML/CSS/JS

To run unit tests

yarn test

Usage

Instantiate the carousel

import { ImageCarousel } from './ImageCarousel';

const carousel = new ImageCarousel('.image-carousel', {
    numberOfImages: 6, 
    searchTerms: 'cats'
});

Methods

Move the carousel to the next item

carousel.next();

Move the carousel backwards one item

carousel.prev();

Move the carousel to any specific slide index. Method takes a Number

carousel.moveTo(4);

Markup

The carousel requires the following markup:

<ul class="image-carousel">
    <li><img src="my-default-image.jpg" alt="My Default Image"></li>
</ul>

ImageCarousel will add the markup for the additional slides. The first slide can be left blank or used as placeholder whilst waiting for the images to be returned from the API.

Config

These options can be passed in when instantiating the class

Parameter Type Default Description
numberOfImages Number {required} How many images do you want to show
searchTerms String {required} Keywords you would like to search for
speed Number 500 Duration of transition between slides
startPosition Number 0 Index number of the initial slide
loop Boolean true Should the carousel infinitely loop

simple-carousel-test's People

Contributors

davymacca avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.