npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue2-custom-carousel

v1.0.8

Published

The simplest and most lightweight carousel ever, made with flexbox and CSS "scroll-snap-type" and "scroll-behavior" for smooth scrolling.

Downloads

427

Readme

vue2-custom-carousel

TABLE OF CONTENTS

The simplest and most lightweight carousel ever, made with flexbox and CSS "scroll-snap-type" and "scroll-behavior" for smooth scrolling.

Example

Vue2-custom-carousel does not provide default CSS/template themes, you must build them yourself and wrap them up in another component using your own styles.

  <Carousel class="carousel" >
    <template>
      <Item v-for="(item, index) in items"
        :key="index"
        v-bind="item"
      />
    </template>
    <template v-slot:pagination='{active, number, scroll}'>
      <div class="dot" :class="{active}"
        @click="scroll"
      ></div>
    </template>
  </Carousel>

In this example, we use the functional component to display the items and the pagination template slot to display the dots, the template provides the active boolean which we use to differentiate the active element. The carousel uses scroll-behavior: smooth; for smooth scrolling.

Pagination Example

We can easily add button navigators using this code and doing the proper positioning.

<template v-slot:left='{scroll, show}'>
  <Button v-if="show"
    @click.native="scroll"
  />
</template>
<template v-slot:right='{scroll, show}'>
  <Button v-if="show" class="right"
    @click.native="scroll"
  />
</template>
.Button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-180deg);
  right: unset;
  left: -20px;
}

.right {
  transform: unset;
  left: unset;
  right: -20px;
}

Navigation Buttons

Pagination Template Slot Props

| Property | Description | | ------------- |:-------------| | number | The current index. | | scroll | Scroll trigger function, you should use it on the @click.native='scroll' event. | | active | Will be true at the active navigation. |

Navigation Template Slot Props

| Property | Description | | ------------- |:-------------| | show | Will be false on the corners of the carousel. | | scroll | Scroll trigger function, you should use it on the @click.native='scroll' event. |

Component Props

| Property | Description | | ------------- |:-------------| | value/v-model | Sets and updates the current page. The current page will never be bigger than the number of pages or less than 0, that is, if set to a value greater than the number of carousel pages, values settles itself to the maximum value, value doesn't respond to negative values, instead, it sets itself back to 0. |

Component Methods

| Method | Parameters | Return Value | Description | | ------------- |:-------------:|:-------------|:-------------| | scroll | (paginationIndex: number) | finalPageIndex: number | Goes to the given page index. The return value will never be bigger than the number of pages or less than 0, that is, if set to a value greater than the number of carousel pages, it settles itself to the maximum value, scroll doesn't respond to negative values, instead, it sets itself back to 0. | | next | nothing | nothing | Goes to the next page. | | previous | nothing | nothing | Goes to the previous page. | | focus | (elm: HTMLElement) | nothing | Focuses on the element. |

Component Events

calculated event

Runs every time the component calculates the data, runs on mounted, updated, on window resize, and on container scroll event.

Data

{
  numberOfPages: number;
  activePage: number;
  showRightNavigation: boolean;
  showLeftNavigation: boolean;
}

trigger event

Runs every time the scroll changes manually, this can happen when clicking in one of the pagination options, when clicking on the navigation buttons or whenever the component methods are used.

Data

newScroll: number;

Flexbox Usage

The items are by default centralized using flexbox, this means width and display won't work as expected and you might want to use flex-shrink: 0;, you can overwrite the flexbox styles this way:

<template>
  <Carousel>
  ...
  </Carousel>
</template>


<style>

._CustomCarousel .scroll-wrapper {
  justify-content: flex-start;
}

<style>

The same applies to the pagination wrapper:

<template>
  <Carousel>
  ...
  </Carousel>
</template>


<style>

._CustomCarousel .pagination {
  align-items: flex-start;
  padding: 40px;
}

<style>

Carousel Snap

The carousel .wrapper container uses scroll-snap-type: x mandatory;, this means you can easily snap your items by adding scroll-snap-align: center;:

You can find more information here.

.Item {
  scroll-snap-align: start;
}

CSS Snap