Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/jambonn/vue-concise-carousel/tree/next below:

jambonn/vue-concise-carousel: Vue Concise Carousel with True SSR Written for Jambon

Vue Concise Carousel is SSR and CSR friendly. An upgraded version from vue-carousel

Vue 3 support is almost here with the vue-concise-carousel 2 rewrite. Check out the next branch to see the latest progress.

Full examples

• Installation
• Usage
• Configuration
• Events
• Methods
• Slots
• Development
• License

npm install @jambonn/vue-concise-carousel@next

or if you prefer yarn

yarn add @jambonn/vue-concise-carousel@next

You may install Vue Concise Carousel globally:

import Vue from 'vue';
import { Carousel, Slide } from '@jambonn/vue-concise-carousel';
import '@jambonn/vue-concise-carousel/lib/vue-concise-carousel.css'

Vue.component('carousel', Carousel);
Vue.component('slide', Slide);

This will make <carousel> and <slide> available to all components within your Vue app.

Include the carousel directly into your component using import:

import { Carousel, Slide } from '@jambonn/vue-concise-carousel';
import '@jambonn/vue-concise-carousel/lib/vue-concise-carousel.css'

export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};

Lowercase versions of the above events are also emitted, namely—pagechange, slideclick, transitionstart and transitionend.

Once the Carousel and Slide components are installed globally or imported, they can be used in templates in the following manner:

  <Carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <Slide>
      Slide 1 Content
    </Slide>
    <Slide>
      Slide 2 Content
    </Slide>
  </Carousel>

To listen for the 'slide-click' event you can do the following:

  <Carousel>
    <Slide
        data-index="0"
        data-name="MySlideName"
        @slide-click="handleSlideClick">
      Slide 1 Content
    </Slide>
    ...
  </Carousel>

  handleSlideClick (dataset) => {
    console.log(dataset.index, dataset.name)
  }

<template>
  <Carousel ref="carousel">
    <Slide>
      Slide 1 Content
    </Slide>
    <Slide>
      Slide 2 Content
    </Slide>
  </Carousel>
  <button @click="showNext">show me the next</button>
</template>
<script>
  export default {
    methods: {
      showNext() {
        this.$refs.carousel.handleNavigation('forward')
      },
    },
  }
</script>

<template>
  <Carousel ref="carousel" @page-change="handlePageChange">
      <Slide>
        Slide 1 Content
      </Slide>
      <Slide>
        Slide 2 Content
      </Slide>
      <div class="custom-navigation" slot="navigation">
        <button type="button" :disabled="currentPage > 0" @click="onChangeNavigation('backward')">Back</button>
        <button type="button" :disabled="!isEnableForward" @click="onChangeNavigation('forward')">Next</button>
      </div>
      <ul class="custom-pagination" slot="pagination">
        <li @click="onChangePagination(1)">1</li>
        <li @click="onChangePagination(2)">2</li>
      </ul>
  </Carousel>
</template>
<script>
  export default {
    data() {
      return {
        currentPage: 0,
        isEnableForward: true,
      }
    },
    methods: {
      handlePageChange(currentPage) {
        this.currentPage = currentPage
        this.isEnableForward = this.$refs.carousel.canAdvanceForward
      },
      onChangePagination(index) {
        this.$refs.carousel.goToPage(index, 'pagination')
      },
      onChangeNavigation(direction) {
        this.$refs.carousel.handleNavigation(direction)
      },
    },
  }
</script>

then navigate to http://localhost:8080

This project is licensed under the MIT License - see the LICENSE.md file for details.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4