Touch-enabled Carousel / Slider with Pure JavaScript – PureJSCarousel

Category: Javascript , Slider | March 23, 2019
Author: vadymshymko
Views Total: 6,130
Official Page: Go to website
Last Update: March 23, 2019
License: MIT

Preview:

Touch-enabled Carousel / Slider with Pure JavaScript – PureJSCarousel

Description:

PureJSCarousel is a standalone JavaScript library that helps you create basic, touch-friendly slider / carousel with lots of customization options.

How to use it:

Add the PureJSCarousel JavaScript library to your webpage when needed.

<script src="pure-js-carousel.js"></script>

Create a group of html content for the slider / carousel.

<div class="carousel" id="demo">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  ...
</div>

The basic CSS styles.

.pure-js-carousel { overflow: hidden; }

.pure-js-carousel-list:before, .pure-js-carousel-list:after {
  content: "";
  display: table;
}

.pure-js-carousel-list:after { clear: both; }

.pure-js-carousel-slide { float: left; }

Style the navigation and pagination whatever you like.

.pure-js-carousel-btn {
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  height: 20px;
  margin-top: -35px;
  position: absolute;
  top: 50%;
  width: 20px;
}

.pure-js-carousel-btn-next {
  border-bottom: 3px solid #f00;
  border-right: 3px solid #f00;
  right: 5px;
  -moz-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}

.pure-js-carousel-btn-prev {
  border-bottom: 3px solid #f00;
  border-left: 3px solid #f00;
  left: 5px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.pure-js-carousel-dots {
  float: left;
  margin-top: 15px;
  text-align: center;
  width: 100%;
}

.pure-js-carousel-dot {
  display: inline-block;
  margin: 0 5px;
}

.pure-js-carousel-dot-btn {
  background: green;
  border-radius: 50%;
  height: 20px;
  width: 20px;
}

.active .pure-js-carousel-dot-btn {
  background: blue;
}

Create a new carousel instance as follow.

var carouselDefault = new PureJSCarousel({
    carousel: '#demo',
    slide: '.slide'
});

All configuration options.

var carouselDefault = new PureJSCarousel({

    // CSS selector for carousel wrapper
    carousel: '#carousel-default',

    // CSS selector for carousel items
    slide: '.slide',

    // CSS selectors for next / prev navigation
    btnNext: document.createElement('button'),
    btnPrev: document.createElement('button'),

    // slides the items one by one
    oneByOne: false,

    // animation speed
    speed: 1000,

    // activate slide
    activeIndex: 0,

    // animation delay
    delay: 0,

    // easing effect
    effect: 'linear',

    // autopaly options
    autoplay: false,
    autoplayDelay: 1000,
    autoplayStartDelay: 1000,
    autoplayDirection: 'next',

    // infinite looping
    infinite: false,
});

API methods.

var carouselDefault = new PureJSCarousel({
    carousel: '#carousel-default',
    slide: '.slide'
});

// Go to next slide
carouselDefault.goToNext();

// Go to previous slide
carouselDefault.goToPrev();

// Go to specific slide
carouselDefault.goToNext(slideIndex);

// Disable carousel controls
carouselDefault.disableControl();

// Enable carousel controls
carouselDefault.enableControl();

// Destroy the carousel
carouselDefault.destroy();

// Enable autoplay
carouselDefault.startAutoplay(autoplayDirection);

// Stop autoplay
carouselDefault.stopAutoplay();

Changelog

03/23/2019

  • Update JS

You Might Be Interested In:


Leave a Reply