A simple Image slideshow with vue.js

Image slideshow

The purpose of the slideshow is to scroll through the photos one by one in the browser full screen.

To summarize the features of this program:

• Slide and image style settings
• Auto play
• Support for touch devices
• Multilingual
• Backup and restore slides and settings data
• Transition type setting
• slide captions
• Dark Mode
• Supports slide data in json format
• keyboard shortcuts

Usage

The demo provided by Github is at the following address.

When connected, you will see the following screen.

The screen is composed of a caption, a control button to move to previous|next, a thumbnail list, and buttons to open the environment setting screen centering on the slide image.

Preferences

Preferences help you adjust many features directly in your slideshow.
You can open the preferences in ‘Menu > Preferences’ in the upper right button. Each tab has a role, and the description is as follows.

• General: It covers the basic items of the slideshow.
• Slides: Items related to slide functions
• Style: Items related to image expression and color expression
• Data: Edit slide data
• Keyboard: Items related to keyboard shortcuts

Management tree data

Slide data can be edited in the ‘Preference > Data’ tab. If you open the already created example file [tree.json] (https://github.com/redgoose-dev/slideshow/blob/main/resource/example/tree.json), you will see that slide information is entered as an object. You can see it.
Here's what one slide group looks like:

{
  "foo": {
    "name": "slide title",
    "description": "description text",
    "slides": [
      {
        "src": "filename.jpg",
        "thumbnail": "filename.jpg",
        "title": "title text",
        "description": "description text"
      }
    ]
  }
}

Slide data can be imported as a 'json' file or imported from an external server.
The data when importing slides from an external server is as follows.

{
  "foo": {
    "name": "title",
    "description": "description text",
    "slides": "https://domain.com/example.json"
  }
}

Keyboard shortcut

The keyboard shortcuts are:

• 'Arrow key (left)': move to the previous slide
• 'Arrow key (right)': move to the next slide
• A: autoplay
• S: open preferences
• T: Opens the thumbnail image list screen.
• R: Rerun slideshow
• H: shows operation and status elements.
• G: Opens the slide group selection window.

Develop Usage

Before building the development environment, clone the repository and install dependencies as follows.

git clone https://github.com/redgoose-dev/slideshow.git
cd slideshow
yarn install

Web environment

When developing a project, run the following to start the development server.

yarn run dev

After starting the server, you can preview it by accessing http://localhost:3000 in your browser.
The main source of the project is in src/ and the code is written in vue3.

When you're done developing, build the project as follows:

yarn run build

When the build is complete, the files in the docs/ path are updated.

macOS and Windows apps

Before building the app through Electron, first build the web project as follows.

yarn run build

You can run it in development mode or build it into production like the following command:

# development app
yarn run electron-dev

# build app
yarn run electron-build

Using component

If you want to use the slideshow in another project, you can add the component directly using npm.

yarn add @redgoose/slideshow

It can be developed by adding a dependency and referring to the content and source of the for external project page.

Support browser

When developing, I tested it while working with the following browsers:

• macOS, iOS safari
• Google Chrome
• Microsoft Edge