Powerful, lightweight and fully customizable carousel component for React apps.

I don’t have any time available to keep maintaining this package. If you have any request, try to sort it within the community. I’m able to merge pull requests that look safe from time to time but no commitment on timelines here. Feel free to fork it and publish under other name if you are in a hurry or to use another component.

• Responsive
• Mobile friendly
• Swipe to slide
• Mouse emulating touch
• Server side rendering compatible
• Keyboard navigation
• Custom animation duration
• Auto play w/ custom interval
• Infinite loop
• Horizontal or Vertical directions
• Supports images, videos, text content or anything you want. Each direct child represents one slide!
• Supports external controls
• Highly customizable:
  • Custom thumbs
  • Custom arrows
  • Custom indicators
  • Custom status
  • Custom animation handlers

• Codesandbox playground
• Storybook
• Changelog
• Before contributing
• Troubleshooting

yarn add react-responsive-carousel

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';

class DemoCarousel extends Component {
    render() {
        return (
            <Carousel>
                <div>
                    <img src="assets/1.jpeg" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="assets/2.jpeg" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <img src="assets/3.jpeg" />
                    <p className="legend">Legend 3</p>
                </div>
            </Carousel>
        );
    }
});

ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

// Don't forget to include the css in your page

// Using webpack or parcel with a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';

// Using html tag:
// <link rel="stylesheet" href="https://github.com/Jenis0619/<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>

By default, each slide will be rendered as passed as children. If you need to customize them, use the prop renderItem.

renderItem: (item: React.ReactNode, options?: { isSelected: boolean }) => React.ReactNode;

By default, thumbs are generated extracting the images in each slide. If you don’t have images on your slides or if you prefer a different thumbnail, use the method renderThumbs to return a new list of images to be used as thumbs.

renderThumbs: (children: React.ReactChild[]) => React.ReactChild[]

By default, simple arrows are rendered on each side. If you need to customize them and the css is not enough, use the renderArrowPrev and renderArrowNext. The click handler is passed as argument to the prop and needs to be added as click handler in the custom arrow.

renderArrowPrev: (clickHandler: () => void, hasPrev: boolean, label: string) => React.ReactNode;
renderArrowNext: (clickHandler: () => void, hasNext: boolean, label: string) => React.ReactNode;

By default, indicators will be rendered as those small little dots in the bottom part of the carousel. To customize them, use the renderIndicator prop.

renderIndicator: (
    clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void,
    isSelected: boolean,
    index: number,
    label: string
) => React.ReactNode;

If none of the previous options are enough, you can build your own controls for the carousel. Check an example at http://react-responsive-carousel.js.org/storybook/?path=/story/02-advanced–with-external-controls

By default, the carousel uses the traditional ‘slide’ style animation. There is also a built in fade animation, which can be used by passing 'fade' to the animationHandler prop. *note: the ‘fade’ animation does not support swiping animations, so you may want to set swipeable to false

If you would like something completely custom, you can pass custom animation handler functions to animationHandler, swipeAnimationHandler, and stopSwipingHandler. The animation handler functions accept props and state, and return styles for the contain list, default slide style, selected slide style, and previous slide style. Take a look at the fade animation handler for an idea of how they work:

const fadeAnimationHandler: AnimationHandler = (props, state): AnimationHandlerResponse => {
    const transitionTime = props.transitionTime + 'ms';
    const transitionTimingFunction = 'ease-in-out';

    let slideStyle: React.CSSProperties = {
        position: 'absolute',
        display: 'block',
        zIndex: -2,
        minHeight: '100%',
        opacity: 0,
        top: 0,
        right: 0,
        left: 0,
        bottom: 0,
        transitionTimingFunction: transitionTimingFunction,
        msTransitionTimingFunction: transitionTimingFunction,
        MozTransitionTimingFunction: transitionTimingFunction,
        WebkitTransitionTimingFunction: transitionTimingFunction,
        OTransitionTimingFunction: transitionTimingFunction,
    };

    if (!state.swiping) {
        slideStyle = {
            ...slideStyle,
            WebkitTransitionDuration: transitionTime,
            MozTransitionDuration: transitionTime,
            OTransitionDuration: transitionTime,
            transitionDuration: transitionTime,
            msTransitionDuration: transitionTime,
        };
    }

    return {
        slideStyle,
        selectedStyle: { ...slideStyle, opacity: 1, position: 'relative' },
        prevStyle: { ...slideStyle },
    };
};

If your carousel is about videos, keep in mind that it’s up to you to control which videos will play. Using the renderItem prop, you will get information saying if the slide is selected or not and can use that to change the video state. Only play videos on selected slides to avoid issues. Check an example at http://react-responsive-carousel.js.org/storybook/?path=/story/02-advanced–youtube-autoplay-with-custom-thumbs

=======================

The contributing guide contains details on how to create pull requests and setup your dev environment. Please read it before contributing!

=======================

When raising an issue, please add as much details as possible. Screenshots, video recordings, or anything else that can make it easier to reproduce the bug you are reporting.

• A new option is to create an example with the code that causes the bug. Fork this example from codesandbox and add your code there. Don’t forget to fork, save and add the link for the example to the issue.

=======================

⚠️ This functionality has now moved into the MNE-BIDS-Pipeline itself. This project & repository will be archived. ⚠️

• Download the latest MNE BIDS Pipeline
• Update your local copy of the MNE BIDS Pipeline
• Run the MNE BIDS Pipeline
• Use separate versions of the MNE BIDS Pipeline for each of your projects

pip install -e .

The easiest way to get started is by simply running

mne-bids-pipeline

from your project directory (i.e. the one that contains e.g. your analysis code
and / or data) in the terminal. An interactive menu will appear, allowing you
to access all functionality.

You may also skip some of the menu selection process by passing certain
command line arguments, as demonstrated below.

mne-bids-pipeline install

This downloads the latest version of the pipeline.

mne-bids-pipeline update

This updates your MNE BIDS Pipeline to the latest version.

mne-bids-pipeline run

This runs the MNE BIDS Pipeline. Please note that additional command line
arguments need to be passed, otherwise you will only get usage instructions.

Working example:

mne-bids-pipeline run --config=./my_custom_config.py

Fly your planes to victory as you re-create the aerial battles of the First World War!

This is a modern remake of the competitive 2D multiplayer airplane game Lentokonepeli (Literal translation from Finnish: “airplane game”, also known in English as Dogfight).

⚠️ CURRENTLY IN DEVELOPMENT ⚠️

Join us on Discord if you are interested in staying up to date on the remake of this game and interact with the community.

The game was originally created in 2005 by the Finnish game studio Playforia (Aapeli). Their gaming website was built in 2002 entirely on Java. As web browsers would begin to treat Java as a security risk, their website became less and less accessible until it was permanently shut down in 2019.

With the death of Playforia, Dogfight should have died too. Fortunately, I was able to download a copy of the client-side jar file before the site went offline. This jar file contained game assets such as images and audio. It is now possible to recreate the game using these assets, along with reverse engineering the physics through captured video and other documentation.

In late 2020, the original creator of the game was able to reach out to the parent company that acquired Aapeli, and they were gracious enough to provide us with the server-side JAR file. We are able to decompile this and use that to faithfully recreate the game physics and other details which would have been impossible to figure out from video.

The purpose of this project is to bring this nostalgic game back to life and keep it alive forever.

The game engine is written in Rust. You will also need wasm-pack installed in order to export the game to WASM so it can run in the browser: cargo install wasm-pack.

You can build all of the Rust code and generate a WebAssembly build by simply running python3 build.py which will:

• Build the main game engine
• Generate TypeScript types from the game engine types
• Build the WebAssembly binary and JavaScript bridge to enable the game engine to run in the browser

The Rust code consists of three projects:

• ./dogfight: The main game engine and game logic/types.
• ./dogfight/dogfight-macros/: The procedural macros used by the game. Macros are used to automatically generate repetitive networking code to serialize and deserialize game objects to and from binary to minimize data sent over the network.
• ./dogfight/dogfight-web/: A WASM <—> JS interface for the dogfight game, which exports a package enabling dogfight to run in the browser.
  • NOTE: If you make changes to function signatures or introduce new functions, you should restart your frontend dev server after the build process so it will bundle the latest build. If you don’t do this, the dogfight-web library on the client might be out of sync with its type declaration file and cause runtime errors.

Here is a diagram which helps understand dogfight-web and how JS uses it to interface with the game engine:

All of the frontend code is written in TypeScript. The web client is rendered with React and uses Mantine components. The game world is rendered using pixi.js. Peer.js is used to allow users to easily host a game and connect to each other via WebRTC.

• ./client/src/: The main React web user interface
  • npm install
  • Run with npm run dev
• ./client/src/client/: The logic for rendering a game world.

• Aapeli (Playforia) for creating decades of entertainment and friendships through their internet gaming platform.
• Pyry Lehdonvirta, the original programmer of Lentokonepeli.
• Pallosalama for his many high quality recordings and documentation of maps and other important game information.
• Members of Munkkiliiga (and everyone else in the discord server) for being such dedicated fans to the game, and having the patience to work with me. Their passion and enthusiasm for the game inspired me greatly.

This project was built as part of “Graphics basics and image processing” course in Tel-Aviv University.

• Spheres– Each sphere is defined by the position of its center and its radius.
• Infinite planes– Each plane is defined by its normal and an offset along the normal. A point on the P plane will satisfy the formula P • N = c .
• Triangle– Each triangle is defined by three vectors which represents the triangle’s three vertexes.

A ray tracer shoots rays from the observer’s eye (the camera) through a screen and into a scene which contains one or more surfaces. it calculates the ray’s intersection with the surfaces, finds the nearest intersection and calculates the color of the surface according to its material and lighting conditions.
To compute the color of a surface, you must take into account the object’s material.
If the material is reflective, you need to shoot reflection rays to find objects which would be reflected. If the material is transparent or semi-transparent, you need to shoot rays through the surface to find objects that are behind it.
Each rendered surface (sphere, plane, triangle) is associated with a material in the scene file. Several surfaces can be associated with the same material.
Each material has the following attributes: Diffuse color, Specular color, Phong specularity coefficient, Reflection color, Transparency.
To light the scene, we will use point lights. Point lights are located at a certain point and shoot light equally in all directions around that point. Each light will have the following attributes:Position, Color, Specular intensity, Shadow intensity, Light Radius.
The camera is defined by the following attributes: Position, Look-at point, Up vector, Screen distance, Screen width. There will be only one camera in each scene file.
There are also some general settings that are used to describe a scene: Background color, Number of shadow rays, Maximum recursion level, Super sampling level.

• Soft Shadows: To generate soft shadows, we will send several shadow rays from the light source to a point on the surface. The light intensity that hits the surface from this light source will be multiplied by the number of rays that hit the surface divided by the total number of rays we sent. The sent rays should simulate a light which has a certain area, Each light is defined with a light radius.
• Super Sampling: The super sampling technique will help us reduce the problem of aliasing, in this technique we will shoot NxN rays (samples) through each pixel and the color showed in this pixel will be the average color of the NxN samples.

📖 Release Notes

• Full support of SVGs as components. Import them like your Vue SFCs
• Use Vue bindings as you’d do it with normal components
• Built on top of svg-to-vue-component
• Nuxt 2 (and only Nuxt 2) support
• Fully tested!

A live demo is available through the CodeSandBox of the repo.

• Add nuxt-svg-loader as a dependency using yarn or npm to your project
• Add nuxt-svg-loader to modules section of nuxt.config.js

{
  modules: [
    'nuxt-svg-loader',
  ]
}

• Now you can use your svg files like regular Vue components
• You can use inline svg as well by adding ?inline at the end of the file path

• No more options are needed. It’ll simply work

The plugin will work seamlessly out of the box. It will also include SVGO defaults to avoid collisions between your optimized SVG files!

If you want to configure the underlying loader (or SVGO), you can do that easily as well. (All options available here)

// file: nuxt.config.js

export default {
  // ...
  // Your loader options as svgLoader object
  svgLoader: {
    svgoConfig: {
      plugins: [
        { prefixIds: false } // Disables prefixing for SVG IDs
      ]
    }
  }
}

1. Update the deps (of course!)
2. Rename svgo to svgoConfig
3. If you used id prefixing manually before, you can delete the config:

export default {
  svgLoader: {
    svgo: { //Rename to svgoConfig  
      plugins: [
        { prefixIds: true } // Delete that line (or the whole svgLoader object if you don't have any other configurations)
      ]
    }
  }
}

If you turn on Eslint on save by server, you should exclude .svg files of eslint-loader.

Example:

// nuxt.config.js
build: {
    extend(config, ctx) {
    // Run ESLint on save
    if (ctx.isDev && ctx.isClient) {
      config.module.rules.push({
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /(node_modules)|(\.svg$)/ /* <--- here */
      })
    }
  }
}

• Clone this repository
• Install dependencies using yarn install or npm install
• Start development server using npm run dev

MIT License

Copyright (c) Alexander Lichter

This package provides functionality to allow for SVN – Git transition for
the Bioconductor Project.

• Create a private git server with all Bioconductor packages, including commit
  history from each of the RELEASE branches and the devel branch.

• To participate in the current testing cycle, communicate a single
  ssh public key to this google form https://goo.gl/forms/eg36vcBkIUjfZfLe2.
  We will not be accepting keys via email.

• ALPHA testing. Remember, repositories are static snapshots of
  svn; they are not current, changes commited here are not
  propagated to svn, and will not be retained.

• Clone a package for read-only access

    git clone https://git.bioconductor.org/packages/<package>.git
  

  or for read / write (appropriate permissions required)

    git clone git@git.bioconductor.org:packages/<package>
  

• See the branches available

    cd BiocGenerics
    git branch -a
  

• Checkout branch and see if the commit history is correct

    git checkout RELEASE_3_0
    git log
  

• Local commits

    ...
    git commit -m "alpha test" -a
  

• Push commits to writeable repositories (commits will be lost after
  testing phases are complete)

    git push
  

• (Non-core users): Fail to push changes on non-master or
  RELEASE_3_4 branch.

    git checkout RELEASE_3_3
    ...
    git commit -m "alpha test" -a
    git push    # fail
  

• Elementary browser interface available at

    https://git.bioconductor.org
  

• View R(ead) / W(rite) privileges

    ssh git@git.bioconductor.org info        # all packages
    ssh git@git.bioconductor.org info packages/BiocGenerics
  

• ssh-based read-only access to all repositories
• ssh-based read-write access to selected repositories
• public read-only access to all repositories
• experiment-data packages

ssh may have to choose between multiple keys. Resolve this with an
entry in the plain-text ~/.ssh/config file, where identityfile
disambiguates the key you’d like to use.

    host git-bioc
        user git
        hostname git.bioconductor.org
        port 22
        identityfile ~/.ssh/id_rsa

Use as git clone git-bioc:packages/BiocGenerics.

A fully responsive Image Gallery with the images from PicSum API.

1. Clone the repository:

git clone https://github.com/manitapaudel/tasbir.git

2. Navigate to the project directory

cd tasbir

3. Install the dependencies:

   npm install

4. Run the development server:

   npm run dev

• Open the app in browser, or you can follow this link: https://tasbir-studios.vercel.app/
• Navigate through pages using the Previous and Next buttons.
• Type your keyword and click on the search button on the Searchbar to filter the data by author.
• You can also clear the search by clicking on the reset button.
• Click on the image to open a Modal and view its details.
• On the Modal, you can find the social-media icons; you can click on them to share the image.
• On the same modal, you can find a button that you can use to add or remove the image to and from the favourites list.
• You can see the images with red hearts on the homepage, if they are on your favourites list.
• Your favourites will be stored safely in the localStorage, so you won’t have to worry about losing them.

• React.js
• Tailwindcss
• TypeScript
• TanStack Query

• Icons from Heroicons
• Logos created with Canva
• Illustration from unDraw
• Design Inspiration A Museum/Gallery App by Desire Creative Agency on Dribbble

Hacktoberfest is a month-long celebration of open source software run by DigitalOcean. It’s an opportunity for everyone, from seasoned developers to open-source newcomers, to come together and contribute to open source projects.

• Preparation: September 2024
• Event Duration: October 1 – 31, 2024
• Wrap-up Session: October 31, 2024

1. Register: Sign up at hacktoberfest.com starting September 2024.
2. Contribute: Make four valid pull/merge requests to participating projects on GitHub or GitLab.
3. Learn: Engage with the community and improve your skills.
4. Earn: Receive a digital badge that levels up with each accepted contribution.

Hacktoberfest 2024 focuses on quality contributions that make a real impact. It’s not just about quantity; it’s about meaningful participation in the open-source community.

We welcome contributions from developers of all skill levels. Here’s how you can contribute to this project:

• Digital Badge: Unlock and level up as you contribute.
• Learning Opportunities: Gain real-world project experience.
• Community Recognition: Get your work noticed by project maintainers.

Join virtual and in-person events worldwide:

• Kickoff Event: Virtual session hosted by DigitalOcean.
• Bengaluru Meetup: In-person gathering for developers in India.
• Wrap-up Session: Virtual celebration on October 31, 2024.

A big thank you to our sponsors for supporting open source:

• DigitalOcean
• Cloudflare
• Quira

• Official Hacktoberfest Site
• GitHub’s Open Source Guide
• First Contributions Repository

Help us make Hacktoberfest 2024 the biggest yet! Share your participation on social media using #Hacktoberfest2024.

_{Remember: Hacktoberfest is about quality contributions. Let’s build something amazing together! 🚀}