Explore all Carousel open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in Carousel

swiper

8.1.2

react-slick

0.29.0

flickity

react-image-gallery

Improvements

nuka-carousel

Bug fix

Popular Libraries in Carousel

swiper

by nolimits4web doticonjavascriptdoticon

star image 30789 doticonMIT

Most modern mobile touch slider with hardware accelerated transitions

react-slick

by akiran doticonjavascriptdoticon

star image 10303 doticonMIT

React carousel component

OwlCarousel2

by OwlCarousel2 doticonjavascriptdoticon

star image 7473 doticonNOASSERTION

DEPRECATED jQuery Responsive Carousel.

flickity

by metafizzy doticonjavascriptdoticon

star image 6807 doticon

:leaves: Touch, responsive, flickable carousels

siema

by pawelgrzybek doticonjavascriptdoticon

star image 3334 doticonNOASSERTION

Siema - Lightweight and simple carousel in pure JavaScript

react-image-gallery

by xiaolin doticonjavascriptdoticon

star image 3022 doticonMIT

React carousel image gallery component with thumbnail support đŸ–Œ

nuka-carousel

by FormidableLabs doticonjavascriptdoticon

star image 2651 doticonNOASSERTION

Pure React Carousel Component

react-awesome-slider

by rcaferati doticonjavascriptdoticon

star image 2392 doticonMIT

React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. đŸ–„ïž đŸ“±

react-images

by jossmac doticonjavascriptdoticon

star image 2287 doticonMIT

🌄 A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS

Trending New libraries in Carousel

react-native-reanimated-carousel

by dohooo doticontypescriptdoticon

star image 674 doticonMIT

Simple React Native carousel component,fully implemented using reanimated v2,support to iOS/Android/Web.ïŒˆèœźæ’­ć›Ÿă€swiper

Why-Not-Image-Carousel

by ImaginativeShohag doticonkotlindoticon

star image 223 doticonApache-2.0

Why Not use Image Carousel if you have lots of images to show!

vue3-carousel

by ismail9k doticontypescriptdoticon

star image 184 doticon

Vue 3 carousel component

noodel-js

by zlu883 doticontypescriptdoticon

star image 175 doticonMIT

User interface for responsive, dynamic content trees

ui

by fancyapps doticonjavascriptdoticon

star image 165 doticonNOASSERTION

JavaScript UI component library, includes the latest Fancybox

react-carousel

by Trendyol doticontypescriptdoticon

star image 160 doticonMIT

Lightweight carousel component for react

react-touch-drag-slider

by bushblade doticonjavascriptdoticon

star image 139 doticon

Touch and drag slider carousel component for React

vue-snap

by bartdominiak doticonjavascriptdoticon

star image 124 doticonMIT

âšĄïž Lightweight Carousel based on CSS Scroll Snapping (Vue 2/3)

react-native-movie-2.0-carousel

by catalinmiron doticonjavascriptdoticon

star image 94 doticon

react-native-movie-2.0-carousel

Top Authors in Carousel

1

Semantic-Org

4 Libraries

star icon15

2

ksachdeva

3 Libraries

star icon279

3

sinankeskin

3 Libraries

star icon12

4

latte-carousel

3 Libraries

star icon20

5

davidcetinkaya

3 Libraries

star icon1988

6

metafizzy

2 Libraries

star icon6845

7

nhn

2 Libraries

star icon21

8

outsmartit

2 Libraries

star icon15

9

aprilmintacpineda

2 Libraries

star icon4

10

sung2063

2 Libraries

star icon39

1

4 Libraries

star icon15

2

3 Libraries

star icon279

3

3 Libraries

star icon12

4

3 Libraries

star icon20

5

3 Libraries

star icon1988

6

2 Libraries

star icon6845

7

2 Libraries

star icon21

8

2 Libraries

star icon15

9

2 Libraries

star icon4

10

2 Libraries

star icon39

Trending Kits in Carousel

Here are some best React Carousel Libraries. React Carousel Libraries use cases include Image Carousel, Video Carousel, Testimonial Carousel, Card Carousel, and News Carousel. 


React carousel libraries allow you to create carousel components for your React applications. Examples of these libraries include React-Slick, React-Swipe, and React-Responsive-Carousel.  


Let us look at the libraries in detail. 

react-slick

  • Allows developers to customize the number of items.
  • Provides an autoplay feature that allows developers to customize the speed and timing of the carousel.
  • Supports CSS transitions so developers can customize the transition effect when switching between slides. 

react-swipeable-views

  • Touch-based interaction.
  • Highly configurable.
  • Built on top of React.js, making it easier for developers to integrate into existing projects.

react-image-gallery

  • ï»żOptimized for mobile devices.
  • Allows users to view images in fullscreen mode.
  • Allows users to navigate through images easily. 

react-carousel

  • Open source and actively maintained.
  • Provides an elegant and responsive design.
  • Provides an API allowing developers to create complex carousels with dynamic content quickly. 

react-carousel-3d

  • Provides a 3D animation effect that distinguishes it from other carousel libraries. 
  • Supports automatic sliding of the carousel items. 
  • Supports both touch and swipe interactions .

Carousel

  • Supports both horizontal and vertical scrolling.
  • Built-in API, allowing for custom styling.
  • Supports both image and video carousels.

merry-go-round

  • Offers a wide range of customization options.
  • Lightweight so that it won't slow down your website. 
  • Offers support for multiple image formats, including JPEG, PNG, and GIF. 

react-flickity

  • Mobile-first design that works with touch devices.
  • Flexible and can be used with any content. 
  • Allows users to control the carousel with their keyboard and mouse.

react-carousel-library

  • Provides an extensive library of CSS classes and styles.
  • Provides a variety of navigation controls.
  • Users can access their carousel regardless of the device they are using. 

A Carousel is a very popular React Library used to display collections of items. It is an interactive slideshow component. We may include items like text, graphics, images, and videos. Here are the best libraries for making our app more interactive and flexible. A detailed review of each library follows.  


It is a more powerful, lightweight, and customized component. It is useful to animate slides. It executes with a group of items. It also contains support for the previous and next buttons.  


Carousels components:  

  • Container: This is pretty self-forward. It is simply the space in an app.  
  • Slide: Using many slides, we can create a carousel. It has content like visuals, photos, text, videos, links, or calls to action.  
  • Navigation: We can move from one slide to another using Navigation. It includes arrows, dots, text, or other symbols.  
  • Animated transitions: It has many effects or animations on the webpage. The user can communicate with applications.  


We have identified based on popularity, flexibility, quality, support, and reuse factor. We may have libraries like react-slick, react-native-snap-carousel, and react-native-looped-carousel. We also have libraries like react-responsive-carousel, react-image-gallery, react-carousel, react-native-sideswipe, etc. Let’s look at each library in detail. The link lets you access package commands, installation notes, and code snippets.  

react-slick:

  • It helps provide styling for the component.  
  • React icons helps add icons for the app.  
  • It has default control buttons to switch to the next page.  
  • Using the Responsive property has more control over responsiveness.  

react-native-snap-carousel:

  • We can display a preview of the page.  
  • We can perform many layouts.  
  • Helps to achieve parallax images.  
  • We can handle a huge number of items.  

react-native-looped-carousel:

  • We can use it in User Interface.  
  • react-native-looped carousel has no bugs.  
  • It has no vulnerabilities.  
  • It has more properties like autoplay, onAnimateNextPage, onPageBeingChanged, isLooped, Pagination, bullets, etc.  

react-native-sideswipe:

  • It is simple and cross-platform with sensible defaults.  
  • It adopts a paging pattern without limits.  
  • It is a flexible API.  
  • It handles all the screens.  

material-auto-rotating-carousel:

  • It has a containerStyle object.  
  • We can apply properties to the Button element using the ButtonProps object.  
  • It has boolean type autoplay.  
  • It is a more flexible carousel for Material-UI.  

react-native-carousel:

  • It helps add horizontal and vertical slides.  
  • Helps to perform Native Elastic Carousel.  
  • We can also add images to Native Carousel.  
  • It supports full-screen mode, captions, and headings.  

react-elastic-carousel:

  • It is a very flexible and responsive carousel component for React.  
  • It gives true responsive support, no matter what screen size we use.  
  • It has RTL (right-to-left) support.  
  • Almost every element has a CSS class with the rec- prefix in react-elastic-carousel.  

react-touch-carousel:

  • It is an Ultra-customizable carousel framework.  
  • It is more convenient for customized fancy UX.  
  • It provides control to the user to decide what to render.  
  • A cursor indicates the transition position of the carousel.  

react-animated-slider:

  • It has an Infinite slider and autoplay.  
  • It provides Easy customization.  
  • Helps to use the slider component with animations.  
  • It supports CSS modules.  

re-carousel:

  • It has a Minimal carousel component.  
  • All the attributes in the re-carousel are optional.  
  • Interval {Number} (4000ms by default) interval for auto sliding.  
  • Widgets {Array of ReactClass} Indicator and switcher could be various.

react-items-carousel:

  • We can build this carousel with react-motion and styled-components.  
  • It has a boolean-type infinite loop.  
  • It has the slidesToScroll property.  
  • It has requestToChangeActive functions.  

react-owl-carousel:

  • It is fully customized.  
  • It has a touch and drags support.  
  • It is fully responsive.  
  • Owl Carousel supports a modular plugin structure.  

FAQ:  

1. What is the carousel component, and why is it used in React?  

The Carousel component displays a selection of rotating items. We may create built-in features for our react applications. React has a dynamic way of creating a carousel by using components. We can also use a hook for controlling the carousel.  


2. How flexible and responsive is the carousel component?  

The carousel components are more flexible and responsive. It does not support automatic cycling through content. But full support on TL (right to left) rendering and animations.  


3. What are some features of a React image gallery?  

  • Easy to use from any device and accessible.  
  • It handles swiping left/right and taps to close on Mobile Devices.  
  • It Shows Overlay with large Images for Thumbnails.  
  • We can optimize Image loading.  
  • It Works with all Browsers.  


4. Is there a modern mobile touch slider available in React libraries?  

Swiper is the modern free mobile touch slider. It is a touch slider accessed only on modern applications. It helps bring the best experience and simplicity. It has hardware-accelerated transitions and stunning native behavior. We can use it in mobile websites, mobile web apps, and mobile native/hybrid apps. It has a two-way control, a flexbox layout, and 3D effects.  


5. Which popular JavaScript library supports the implementation of a React Carousel Library?  

  • React Responsive Carousel  
  • Pure React Carousel  
  • React Id Swiper  
  • React Image Gallery  
  • React Slick  
  • React Owl Carousel 2  


6. Are vertical and horizontal slides available within the Carousel Library packages?  

Yes, vertical and horizontal slides are available within the Carousel Library package. Depending on the situation, we can move from up to down, left to right, and vice versa.  


7. Does React support custom CSS animations for the Carousel library components?  

React-Responsive-Carousel supports custom CSS animations for the Carousel library components. It Utilizes unique custom animation.

Trending Discussions on Carousel

The unauthenticated git protocol on port 9418 is no longer supported

Could not find a declaration file for module 'react-slick'

Setting styles for react-slick

java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;

Error: export 'ɔCssKeyframesDriver' (imported as 'ɔCssKeyframesDriver') was not found in '@angular/animations/browser'

Expo SDK 44 upgrade ERROR - App.js: [BABEL]: Unexpected token '.'

Angular TSLint - Cannot find builder "@angular-devkit/build-angular:tslint"

How do I loop an image carousel with React setState and setInterval?

Helmet expects a string as a child of <head>. Did you forget to wrap your children in braces

Separate border for each slider

QUESTION

The unauthenticated git protocol on port 9418 is no longer supported

Asked 2022-Mar-27 at 13:23

I have been using github actions for quite sometime but today my deployments started failing. Below is the error from github action logs

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7

Upon investigation, it appears that below section in my yml file is causing the issue.

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9

I have looked into this change log but can't seem to comprehend the issue.

Additional Details: Server: EC2 Instance Github actions steps:

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55

package.json file

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55   {
56  "name": "stackstream-fe",
57  "version": "1.0.0",
58  "authors": [
59    "fayyaznofal@gmail.com"
60  ],
61  "private": true,
62  "dependencies": {
63    "@fortawesome/fontawesome-svg-core": "^1.2.34",
64    "@fortawesome/free-solid-svg-icons": "^5.15.2",
65    "@fortawesome/react-fontawesome": "^0.1.14",
66    "@fullcalendar/bootstrap": "^5.5.0",
67    "@fullcalendar/core": "^5.5.0",
68    "@fullcalendar/daygrid": "^5.5.0",
69    "@fullcalendar/interaction": "^5.5.0",
70    "@fullcalendar/react": "^5.5.0",
71    "@lourenci/react-kanban": "^2.1.0",
72    "@redux-saga/simple-saga-monitor": "^1.1.2",
73    "@testing-library/jest-dom": "^5.11.9",
74    "@testing-library/react": "^11.2.3",
75    "@testing-library/user-event": "^12.6.0",
76    "@toast-ui/react-chart": "^1.0.2",
77    "@types/jest": "^26.0.14",
78    "@types/node": "^14.10.3",
79    "@types/react": "^16.9.49",
80    "@types/react-dom": "^16.9.8",
81    "@vtaits/react-color-picker": "^0.1.1",
82    "apexcharts": "^3.23.1",
83    "availity-reactstrap-validation": "^2.7.0",
84    "axios": "^0.21.1",
85    "axios-mock-adapter": "^1.19.0",
86    "axios-progress-bar": "^1.2.0",
87    "bootstrap": "^5.0.0-beta2",
88    "chart.js": "^2.9.4",
89    "chartist": "^0.11.4",
90    "classnames": "^2.2.6",
91    "components": "^0.1.0",
92    "dotenv": "^8.2.0",
93    "draft-js": "^0.11.7",
94    "echarts": "^4.9.0",
95    "echarts-for-react": "^2.0.16",
96    "firebase": "^8.2.3",
97    "google-maps-react": "^2.0.6",
98    "history": "^4.10.1",
99    "i": "^0.3.6",
100    "i18next": "^19.8.4",
101    "i18next-browser-languagedetector": "^6.0.1",
102    "jsonwebtoken": "^8.5.1",
103    "leaflet": "^1.7.1",
104    "lodash": "^4.17.21",
105    "lodash.clonedeep": "^4.5.0",
106    "lodash.get": "^4.4.2",
107    "metismenujs": "^1.2.1",
108    "mkdirp": "^1.0.4",
109    "moment": "2.29.1",
110    "moment-timezone": "^0.5.32",
111    "nouislider-react": "^3.3.9",
112    "npm": "^7.6.3",
113    "prop-types": "^15.7.2",
114    "query-string": "^6.14.0",
115    "react": "^16.13.1",
116    "react-apexcharts": "^1.3.7",
117    "react-auth-code-input": "^1.0.0",
118    "react-avatar": "^3.10.0",
119    "react-bootstrap": "^1.5.0",
120    "react-bootstrap-editable": "^0.8.2",
121    "react-bootstrap-sweetalert": "^5.2.0",
122    "react-bootstrap-table-next": "^4.0.3",
123    "react-bootstrap-table2-editor": "^1.4.0",
124    "react-bootstrap-table2-paginator": "^2.1.2",
125    "react-bootstrap-table2-toolkit": "^2.1.3",
126    "react-chartist": "^0.14.3",
127    "react-chartjs-2": "^2.11.1",
128    "react-color": "^2.19.3",
129    "react-confirm-alert": "^2.7.0",
130    "react-content-loader": "^6.0.1",
131    "react-countdown": "^2.3.1",
132    "react-countup": "^4.3.3",
133    "react-cropper": "^2.1.4",
134    "react-data-table-component": "^6.11.8",
135    "react-date-picker": "^8.0.6",
136    "react-datepicker": "^3.4.1",
137    "react-dom": "^16.13.1",
138    "react-draft-wysiwyg": "^1.14.5",
139    "react-drag-listview": "^0.1.8",
140    "react-drawer": "^1.3.4",
141    "react-dropzone": "^11.2.4",
142    "react-dual-listbox": "^2.0.0",
143    "react-facebook-login": "^4.1.1",
144    "react-flatpickr": "^3.10.6",
145    "react-google-login": "^5.2.2",
146    "react-hook-form": "^7.15.2",
147    "react-i18next": "^11.8.5",
148    "react-icons": "^4.2.0",
149    "react-image-lightbox": "^5.1.1",
150    "react-input-mask": "^2.0.4",
151    "react-jvectormap": "^0.0.16",
152    "react-leaflet": "^3.0.5",
153    "react-meta-tags": "^1.0.1",
154    "react-modal-video": "^1.2.6",
155    "react-notifications": "^1.7.2",
156    "react-number-format": "^4.7.3",
157    "react-perfect-scrollbar": "^1.5.8",
158    "react-rangeslider": "^2.2.0",
159    "react-rating": "^2.0.5",
160    "react-rating-tooltip": "^1.1.6",
161    "react-redux": "^7.2.1",
162    "react-responsive-carousel": "^3.2.11",
163    "react-router-dom": "^5.2.0",
164    "react-script": "^2.0.5",
165    "react-scripts": "3.4.3",
166    "react-select": "^4.3.1",
167    "react-sparklines": "^1.7.0",
168    "react-star-ratings": "^2.3.0",
169    "react-super-responsive-table": "^5.2.0",
170    "react-switch": "^6.0.0",
171    "react-table": "^7.6.3",
172    "react-toastify": "^7.0.3",
173    "react-toastr": "^3.0.0",
174    "react-twitter-auth": "0.0.13",
175    "reactstrap": "^8.8.1",
176    "recharts": "^2.0.8",
177    "redux": "^4.0.5",
178    "redux-saga": "^1.1.3",
179    "reselect": "^4.0.0",
180    "sass": "^1.37.5",
181    "simplebar-react": "^2.3.0",
182    "styled": "^1.0.0",
183    "styled-components": "^5.2.1",
184    "toastr": "^2.1.4",
185    "typescript": "^4.0.2",
186    "universal-cookie": "^4.0.4"
187  },
188  "devDependencies": {
189    "@typescript-eslint/eslint-plugin": "^2.27.0",
190    "@typescript-eslint/parser": "^2.27.0",
191    "@typescript-eslint/typescript-estree": "^4.15.2",
192    "eslint-config-prettier": "^6.10.1",
193    "eslint-plugin-prettier": "^3.1.2",
194    "husky": "^4.2.5",
195    "lint-staged": "^10.1.3",
196    "prettier": "^1.19.1",
197    "react-test-renderer": "^16.13.1",
198    "redux-devtools-extension": "^2.13.8",
199    "redux-mock-store": "^1.5.4"
200  },
201  "scripts": {
202    "start": "react-scripts start",
203    "build": "react-scripts build && mv build ./deploy/build",
204    "build-local": "react-scripts build",
205    "test": "react-scripts test",
206    "eject": "react-scripts eject"
207  },
208  "eslintConfig": {
209    "extends": "react-app"
210  },
211  "husky": {
212    "hooks": {
213      "pre-commit": "lint-staged"
214    }
215  },
216  "lint-staged": {
217    "*.{js,ts,tsx}": [
218      "eslint --fix"
219    ]
220  },
221  "browserslist": {
222    "production": [
223      ">0.2%",
224      "not dead",
225      "not op_mini all"
226    ],
227    "development": [
228      "last 1 chrome version",
229      "last 1 firefox version",
230      "last 1 safari version"
231    ]
232  }
233}
234

ANSWER

Answered 2022-Mar-16 at 07:01

First, this error message is indeed expected on Jan. 11th, 2022.
See "Improving Git protocol security on GitHub".

January 11, 2022 Final brownout.

This is the full brownout period where we’ll temporarily stop accepting the deprecated key and signature types, ciphers, and MACs, and the unencrypted Git protocol.
This will help clients discover any lingering use of older keys or old URLs.

Second, check your package.json dependencies for any git:// URL, as in this example, fixed in this PR.

As noted by Jörg W Mittag:

There was a 4-month warning.
The entire Internet has been moving away from unauthenticated, unencrypted protocols for a decade, it's not like this is a huge surprise.

Personally, I consider it less an "issue" and more "detecting unmaintained dependencies".

Plus, this is still only the brownout period, so the protocol will only be disabled for a short period of time, allowing developers to discover the problem.

The permanent shutdown is not until March 15th.


For GitHub Actions:

As in actions/checkout issue 14, you can add as a first step:

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55   {
56  "name": "stackstream-fe",
57  "version": "1.0.0",
58  "authors": [
59    "fayyaznofal@gmail.com"
60  ],
61  "private": true,
62  "dependencies": {
63    "@fortawesome/fontawesome-svg-core": "^1.2.34",
64    "@fortawesome/free-solid-svg-icons": "^5.15.2",
65    "@fortawesome/react-fontawesome": "^0.1.14",
66    "@fullcalendar/bootstrap": "^5.5.0",
67    "@fullcalendar/core": "^5.5.0",
68    "@fullcalendar/daygrid": "^5.5.0",
69    "@fullcalendar/interaction": "^5.5.0",
70    "@fullcalendar/react": "^5.5.0",
71    "@lourenci/react-kanban": "^2.1.0",
72    "@redux-saga/simple-saga-monitor": "^1.1.2",
73    "@testing-library/jest-dom": "^5.11.9",
74    "@testing-library/react": "^11.2.3",
75    "@testing-library/user-event": "^12.6.0",
76    "@toast-ui/react-chart": "^1.0.2",
77    "@types/jest": "^26.0.14",
78    "@types/node": "^14.10.3",
79    "@types/react": "^16.9.49",
80    "@types/react-dom": "^16.9.8",
81    "@vtaits/react-color-picker": "^0.1.1",
82    "apexcharts": "^3.23.1",
83    "availity-reactstrap-validation": "^2.7.0",
84    "axios": "^0.21.1",
85    "axios-mock-adapter": "^1.19.0",
86    "axios-progress-bar": "^1.2.0",
87    "bootstrap": "^5.0.0-beta2",
88    "chart.js": "^2.9.4",
89    "chartist": "^0.11.4",
90    "classnames": "^2.2.6",
91    "components": "^0.1.0",
92    "dotenv": "^8.2.0",
93    "draft-js": "^0.11.7",
94    "echarts": "^4.9.0",
95    "echarts-for-react": "^2.0.16",
96    "firebase": "^8.2.3",
97    "google-maps-react": "^2.0.6",
98    "history": "^4.10.1",
99    "i": "^0.3.6",
100    "i18next": "^19.8.4",
101    "i18next-browser-languagedetector": "^6.0.1",
102    "jsonwebtoken": "^8.5.1",
103    "leaflet": "^1.7.1",
104    "lodash": "^4.17.21",
105    "lodash.clonedeep": "^4.5.0",
106    "lodash.get": "^4.4.2",
107    "metismenujs": "^1.2.1",
108    "mkdirp": "^1.0.4",
109    "moment": "2.29.1",
110    "moment-timezone": "^0.5.32",
111    "nouislider-react": "^3.3.9",
112    "npm": "^7.6.3",
113    "prop-types": "^15.7.2",
114    "query-string": "^6.14.0",
115    "react": "^16.13.1",
116    "react-apexcharts": "^1.3.7",
117    "react-auth-code-input": "^1.0.0",
118    "react-avatar": "^3.10.0",
119    "react-bootstrap": "^1.5.0",
120    "react-bootstrap-editable": "^0.8.2",
121    "react-bootstrap-sweetalert": "^5.2.0",
122    "react-bootstrap-table-next": "^4.0.3",
123    "react-bootstrap-table2-editor": "^1.4.0",
124    "react-bootstrap-table2-paginator": "^2.1.2",
125    "react-bootstrap-table2-toolkit": "^2.1.3",
126    "react-chartist": "^0.14.3",
127    "react-chartjs-2": "^2.11.1",
128    "react-color": "^2.19.3",
129    "react-confirm-alert": "^2.7.0",
130    "react-content-loader": "^6.0.1",
131    "react-countdown": "^2.3.1",
132    "react-countup": "^4.3.3",
133    "react-cropper": "^2.1.4",
134    "react-data-table-component": "^6.11.8",
135    "react-date-picker": "^8.0.6",
136    "react-datepicker": "^3.4.1",
137    "react-dom": "^16.13.1",
138    "react-draft-wysiwyg": "^1.14.5",
139    "react-drag-listview": "^0.1.8",
140    "react-drawer": "^1.3.4",
141    "react-dropzone": "^11.2.4",
142    "react-dual-listbox": "^2.0.0",
143    "react-facebook-login": "^4.1.1",
144    "react-flatpickr": "^3.10.6",
145    "react-google-login": "^5.2.2",
146    "react-hook-form": "^7.15.2",
147    "react-i18next": "^11.8.5",
148    "react-icons": "^4.2.0",
149    "react-image-lightbox": "^5.1.1",
150    "react-input-mask": "^2.0.4",
151    "react-jvectormap": "^0.0.16",
152    "react-leaflet": "^3.0.5",
153    "react-meta-tags": "^1.0.1",
154    "react-modal-video": "^1.2.6",
155    "react-notifications": "^1.7.2",
156    "react-number-format": "^4.7.3",
157    "react-perfect-scrollbar": "^1.5.8",
158    "react-rangeslider": "^2.2.0",
159    "react-rating": "^2.0.5",
160    "react-rating-tooltip": "^1.1.6",
161    "react-redux": "^7.2.1",
162    "react-responsive-carousel": "^3.2.11",
163    "react-router-dom": "^5.2.0",
164    "react-script": "^2.0.5",
165    "react-scripts": "3.4.3",
166    "react-select": "^4.3.1",
167    "react-sparklines": "^1.7.0",
168    "react-star-ratings": "^2.3.0",
169    "react-super-responsive-table": "^5.2.0",
170    "react-switch": "^6.0.0",
171    "react-table": "^7.6.3",
172    "react-toastify": "^7.0.3",
173    "react-toastr": "^3.0.0",
174    "react-twitter-auth": "0.0.13",
175    "reactstrap": "^8.8.1",
176    "recharts": "^2.0.8",
177    "redux": "^4.0.5",
178    "redux-saga": "^1.1.3",
179    "reselect": "^4.0.0",
180    "sass": "^1.37.5",
181    "simplebar-react": "^2.3.0",
182    "styled": "^1.0.0",
183    "styled-components": "^5.2.1",
184    "toastr": "^2.1.4",
185    "typescript": "^4.0.2",
186    "universal-cookie": "^4.0.4"
187  },
188  "devDependencies": {
189    "@typescript-eslint/eslint-plugin": "^2.27.0",
190    "@typescript-eslint/parser": "^2.27.0",
191    "@typescript-eslint/typescript-estree": "^4.15.2",
192    "eslint-config-prettier": "^6.10.1",
193    "eslint-plugin-prettier": "^3.1.2",
194    "husky": "^4.2.5",
195    "lint-staged": "^10.1.3",
196    "prettier": "^1.19.1",
197    "react-test-renderer": "^16.13.1",
198    "redux-devtools-extension": "^2.13.8",
199    "redux-mock-store": "^1.5.4"
200  },
201  "scripts": {
202    "start": "react-scripts start",
203    "build": "react-scripts build && mv build ./deploy/build",
204    "build-local": "react-scripts build",
205    "test": "react-scripts test",
206    "eject": "react-scripts eject"
207  },
208  "eslintConfig": {
209    "extends": "react-app"
210  },
211  "husky": {
212    "hooks": {
213      "pre-commit": "lint-staged"
214    }
215  },
216  "lint-staged": {
217    "*.{js,ts,tsx}": [
218      "eslint --fix"
219    ]
220  },
221  "browserslist": {
222    "production": [
223      ">0.2%",
224      "not dead",
225      "not op_mini all"
226    ],
227    "development": [
228      "last 1 chrome version",
229      "last 1 firefox version",
230      "last 1 safari version"
231    ]
232  }
233}
234    - name: Fix up git URLs
235      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
236

That will change any git://github.com/ into https://github.com/.

For local projects

For all your repositories, you can set:

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55   {
56  "name": "stackstream-fe",
57  "version": "1.0.0",
58  "authors": [
59    "fayyaznofal@gmail.com"
60  ],
61  "private": true,
62  "dependencies": {
63    "@fortawesome/fontawesome-svg-core": "^1.2.34",
64    "@fortawesome/free-solid-svg-icons": "^5.15.2",
65    "@fortawesome/react-fontawesome": "^0.1.14",
66    "@fullcalendar/bootstrap": "^5.5.0",
67    "@fullcalendar/core": "^5.5.0",
68    "@fullcalendar/daygrid": "^5.5.0",
69    "@fullcalendar/interaction": "^5.5.0",
70    "@fullcalendar/react": "^5.5.0",
71    "@lourenci/react-kanban": "^2.1.0",
72    "@redux-saga/simple-saga-monitor": "^1.1.2",
73    "@testing-library/jest-dom": "^5.11.9",
74    "@testing-library/react": "^11.2.3",
75    "@testing-library/user-event": "^12.6.0",
76    "@toast-ui/react-chart": "^1.0.2",
77    "@types/jest": "^26.0.14",
78    "@types/node": "^14.10.3",
79    "@types/react": "^16.9.49",
80    "@types/react-dom": "^16.9.8",
81    "@vtaits/react-color-picker": "^0.1.1",
82    "apexcharts": "^3.23.1",
83    "availity-reactstrap-validation": "^2.7.0",
84    "axios": "^0.21.1",
85    "axios-mock-adapter": "^1.19.0",
86    "axios-progress-bar": "^1.2.0",
87    "bootstrap": "^5.0.0-beta2",
88    "chart.js": "^2.9.4",
89    "chartist": "^0.11.4",
90    "classnames": "^2.2.6",
91    "components": "^0.1.0",
92    "dotenv": "^8.2.0",
93    "draft-js": "^0.11.7",
94    "echarts": "^4.9.0",
95    "echarts-for-react": "^2.0.16",
96    "firebase": "^8.2.3",
97    "google-maps-react": "^2.0.6",
98    "history": "^4.10.1",
99    "i": "^0.3.6",
100    "i18next": "^19.8.4",
101    "i18next-browser-languagedetector": "^6.0.1",
102    "jsonwebtoken": "^8.5.1",
103    "leaflet": "^1.7.1",
104    "lodash": "^4.17.21",
105    "lodash.clonedeep": "^4.5.0",
106    "lodash.get": "^4.4.2",
107    "metismenujs": "^1.2.1",
108    "mkdirp": "^1.0.4",
109    "moment": "2.29.1",
110    "moment-timezone": "^0.5.32",
111    "nouislider-react": "^3.3.9",
112    "npm": "^7.6.3",
113    "prop-types": "^15.7.2",
114    "query-string": "^6.14.0",
115    "react": "^16.13.1",
116    "react-apexcharts": "^1.3.7",
117    "react-auth-code-input": "^1.0.0",
118    "react-avatar": "^3.10.0",
119    "react-bootstrap": "^1.5.0",
120    "react-bootstrap-editable": "^0.8.2",
121    "react-bootstrap-sweetalert": "^5.2.0",
122    "react-bootstrap-table-next": "^4.0.3",
123    "react-bootstrap-table2-editor": "^1.4.0",
124    "react-bootstrap-table2-paginator": "^2.1.2",
125    "react-bootstrap-table2-toolkit": "^2.1.3",
126    "react-chartist": "^0.14.3",
127    "react-chartjs-2": "^2.11.1",
128    "react-color": "^2.19.3",
129    "react-confirm-alert": "^2.7.0",
130    "react-content-loader": "^6.0.1",
131    "react-countdown": "^2.3.1",
132    "react-countup": "^4.3.3",
133    "react-cropper": "^2.1.4",
134    "react-data-table-component": "^6.11.8",
135    "react-date-picker": "^8.0.6",
136    "react-datepicker": "^3.4.1",
137    "react-dom": "^16.13.1",
138    "react-draft-wysiwyg": "^1.14.5",
139    "react-drag-listview": "^0.1.8",
140    "react-drawer": "^1.3.4",
141    "react-dropzone": "^11.2.4",
142    "react-dual-listbox": "^2.0.0",
143    "react-facebook-login": "^4.1.1",
144    "react-flatpickr": "^3.10.6",
145    "react-google-login": "^5.2.2",
146    "react-hook-form": "^7.15.2",
147    "react-i18next": "^11.8.5",
148    "react-icons": "^4.2.0",
149    "react-image-lightbox": "^5.1.1",
150    "react-input-mask": "^2.0.4",
151    "react-jvectormap": "^0.0.16",
152    "react-leaflet": "^3.0.5",
153    "react-meta-tags": "^1.0.1",
154    "react-modal-video": "^1.2.6",
155    "react-notifications": "^1.7.2",
156    "react-number-format": "^4.7.3",
157    "react-perfect-scrollbar": "^1.5.8",
158    "react-rangeslider": "^2.2.0",
159    "react-rating": "^2.0.5",
160    "react-rating-tooltip": "^1.1.6",
161    "react-redux": "^7.2.1",
162    "react-responsive-carousel": "^3.2.11",
163    "react-router-dom": "^5.2.0",
164    "react-script": "^2.0.5",
165    "react-scripts": "3.4.3",
166    "react-select": "^4.3.1",
167    "react-sparklines": "^1.7.0",
168    "react-star-ratings": "^2.3.0",
169    "react-super-responsive-table": "^5.2.0",
170    "react-switch": "^6.0.0",
171    "react-table": "^7.6.3",
172    "react-toastify": "^7.0.3",
173    "react-toastr": "^3.0.0",
174    "react-twitter-auth": "0.0.13",
175    "reactstrap": "^8.8.1",
176    "recharts": "^2.0.8",
177    "redux": "^4.0.5",
178    "redux-saga": "^1.1.3",
179    "reselect": "^4.0.0",
180    "sass": "^1.37.5",
181    "simplebar-react": "^2.3.0",
182    "styled": "^1.0.0",
183    "styled-components": "^5.2.1",
184    "toastr": "^2.1.4",
185    "typescript": "^4.0.2",
186    "universal-cookie": "^4.0.4"
187  },
188  "devDependencies": {
189    "@typescript-eslint/eslint-plugin": "^2.27.0",
190    "@typescript-eslint/parser": "^2.27.0",
191    "@typescript-eslint/typescript-estree": "^4.15.2",
192    "eslint-config-prettier": "^6.10.1",
193    "eslint-plugin-prettier": "^3.1.2",
194    "husky": "^4.2.5",
195    "lint-staged": "^10.1.3",
196    "prettier": "^1.19.1",
197    "react-test-renderer": "^16.13.1",
198    "redux-devtools-extension": "^2.13.8",
199    "redux-mock-store": "^1.5.4"
200  },
201  "scripts": {
202    "start": "react-scripts start",
203    "build": "react-scripts build && mv build ./deploy/build",
204    "build-local": "react-scripts build",
205    "test": "react-scripts test",
206    "eject": "react-scripts eject"
207  },
208  "eslintConfig": {
209    "extends": "react-app"
210  },
211  "husky": {
212    "hooks": {
213      "pre-commit": "lint-staged"
214    }
215  },
216  "lint-staged": {
217    "*.{js,ts,tsx}": [
218      "eslint --fix"
219    ]
220  },
221  "browserslist": {
222    "production": [
223      ">0.2%",
224      "not dead",
225      "not op_mini all"
226    ],
227    "development": [
228      "last 1 chrome version",
229      "last 1 firefox version",
230      "last 1 safari version"
231    ]
232  }
233}
234    - name: Fix up git URLs
235      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
236git config --global url."https://github.com/".insteadOf git://github.com/
237

You can also use SSH, but GitHub Security reminds us that, as of March 15th, 2022, GitHub stopped accepting DSA keys. RSA keys uploaded after Nov 2, 2021 will work only with SHA-2 signatures.
The deprecated MACs, ciphers, and unencrypted Git protocol are permanently disabled.

So this (with the right key) would work:

1Command: git
2Arguments: ls-remote --tags --heads git://github.com/adobe-webplatform/eve.git
3Directory: /home/runner/work/stackstream-fe/stackstream-fe
4Output:
5fatal: remote error: 
6  The unauthenticated git protocol on port 9418 is no longer supported.
7    - name: Installing modules
8      run: yarn install
9  steps:
10  - name: Checkout
11    uses: actions/checkout@v2
12
13  - id: vars
14    run: |
15      if [ '${{ github.ref }}' == 'refs/heads/master' ]; then echo "::set-output name=environment::prod_stackstream" ; echo "::set-output name=api-url::api" ; elif [ '${{ github.ref }}' == 'refs/heads/staging' ]; then echo "::set-output name=environment::staging_stackstream"  ; echo "::set-output name=api-url::stagingapi" ; else echo "::set-output name=environment::dev_stackstream" ; echo "::set-output name=api-url::devapi" ; fi
16
17  - uses: pCYSl5EDgo/cat@master
18    id: slack
19    with:
20      path: .github/workflows/slack.txt
21
22  - name: Slack Start Notification
23    uses: 8398a7/action-slack@v3
24    env:
25      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
26      ENVIRONMENT: '`${{ steps.vars.outputs.environment }}`'
27      COLOR: good
28      STATUS: '`Started`'
29    with:
30      status: custom
31      fields: workflow,job,commit,repo,ref,author,took
32      custom_payload: |
33        ${{ steps.slack.outputs.text }}
34
35  - name: Installing modules
36    env:
37      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
38    run: yarn install
39
40  - name: Create Frontend Build
41    env:
42      REACT_APP_API_URL: 'https://${{ steps.vars.outputs.api-url }}mergestack.com/api/v1'
43    run: yarn build
44
45  - name: Deploy to Frontend Server DEV
46    if: ${{ contains(github.ref, 'dev') }}
47    uses: easingthemes/ssh-deploy@v2.1.5
48    env:
49      SSH_PRIVATE_KEY: ${{ secrets.DEV_KEY }}
50      ARGS: '-rltgoDzvO --delete'
51      SOURCE: 'deploy/'
52      REMOTE_HOST: ${{ secrets.DEV_HOST }}
53      REMOTE_USER: plyfolio-dev
54      TARGET: '/home/plyfolio-dev/${{ steps.vars.outputs.environment }}/fe/deploy'
55   {
56  "name": "stackstream-fe",
57  "version": "1.0.0",
58  "authors": [
59    "fayyaznofal@gmail.com"
60  ],
61  "private": true,
62  "dependencies": {
63    "@fortawesome/fontawesome-svg-core": "^1.2.34",
64    "@fortawesome/free-solid-svg-icons": "^5.15.2",
65    "@fortawesome/react-fontawesome": "^0.1.14",
66    "@fullcalendar/bootstrap": "^5.5.0",
67    "@fullcalendar/core": "^5.5.0",
68    "@fullcalendar/daygrid": "^5.5.0",
69    "@fullcalendar/interaction": "^5.5.0",
70    "@fullcalendar/react": "^5.5.0",
71    "@lourenci/react-kanban": "^2.1.0",
72    "@redux-saga/simple-saga-monitor": "^1.1.2",
73    "@testing-library/jest-dom": "^5.11.9",
74    "@testing-library/react": "^11.2.3",
75    "@testing-library/user-event": "^12.6.0",
76    "@toast-ui/react-chart": "^1.0.2",
77    "@types/jest": "^26.0.14",
78    "@types/node": "^14.10.3",
79    "@types/react": "^16.9.49",
80    "@types/react-dom": "^16.9.8",
81    "@vtaits/react-color-picker": "^0.1.1",
82    "apexcharts": "^3.23.1",
83    "availity-reactstrap-validation": "^2.7.0",
84    "axios": "^0.21.1",
85    "axios-mock-adapter": "^1.19.0",
86    "axios-progress-bar": "^1.2.0",
87    "bootstrap": "^5.0.0-beta2",
88    "chart.js": "^2.9.4",
89    "chartist": "^0.11.4",
90    "classnames": "^2.2.6",
91    "components": "^0.1.0",
92    "dotenv": "^8.2.0",
93    "draft-js": "^0.11.7",
94    "echarts": "^4.9.0",
95    "echarts-for-react": "^2.0.16",
96    "firebase": "^8.2.3",
97    "google-maps-react": "^2.0.6",
98    "history": "^4.10.1",
99    "i": "^0.3.6",
100    "i18next": "^19.8.4",
101    "i18next-browser-languagedetector": "^6.0.1",
102    "jsonwebtoken": "^8.5.1",
103    "leaflet": "^1.7.1",
104    "lodash": "^4.17.21",
105    "lodash.clonedeep": "^4.5.0",
106    "lodash.get": "^4.4.2",
107    "metismenujs": "^1.2.1",
108    "mkdirp": "^1.0.4",
109    "moment": "2.29.1",
110    "moment-timezone": "^0.5.32",
111    "nouislider-react": "^3.3.9",
112    "npm": "^7.6.3",
113    "prop-types": "^15.7.2",
114    "query-string": "^6.14.0",
115    "react": "^16.13.1",
116    "react-apexcharts": "^1.3.7",
117    "react-auth-code-input": "^1.0.0",
118    "react-avatar": "^3.10.0",
119    "react-bootstrap": "^1.5.0",
120    "react-bootstrap-editable": "^0.8.2",
121    "react-bootstrap-sweetalert": "^5.2.0",
122    "react-bootstrap-table-next": "^4.0.3",
123    "react-bootstrap-table2-editor": "^1.4.0",
124    "react-bootstrap-table2-paginator": "^2.1.2",
125    "react-bootstrap-table2-toolkit": "^2.1.3",
126    "react-chartist": "^0.14.3",
127    "react-chartjs-2": "^2.11.1",
128    "react-color": "^2.19.3",
129    "react-confirm-alert": "^2.7.0",
130    "react-content-loader": "^6.0.1",
131    "react-countdown": "^2.3.1",
132    "react-countup": "^4.3.3",
133    "react-cropper": "^2.1.4",
134    "react-data-table-component": "^6.11.8",
135    "react-date-picker": "^8.0.6",
136    "react-datepicker": "^3.4.1",
137    "react-dom": "^16.13.1",
138    "react-draft-wysiwyg": "^1.14.5",
139    "react-drag-listview": "^0.1.8",
140    "react-drawer": "^1.3.4",
141    "react-dropzone": "^11.2.4",
142    "react-dual-listbox": "^2.0.0",
143    "react-facebook-login": "^4.1.1",
144    "react-flatpickr": "^3.10.6",
145    "react-google-login": "^5.2.2",
146    "react-hook-form": "^7.15.2",
147    "react-i18next": "^11.8.5",
148    "react-icons": "^4.2.0",
149    "react-image-lightbox": "^5.1.1",
150    "react-input-mask": "^2.0.4",
151    "react-jvectormap": "^0.0.16",
152    "react-leaflet": "^3.0.5",
153    "react-meta-tags": "^1.0.1",
154    "react-modal-video": "^1.2.6",
155    "react-notifications": "^1.7.2",
156    "react-number-format": "^4.7.3",
157    "react-perfect-scrollbar": "^1.5.8",
158    "react-rangeslider": "^2.2.0",
159    "react-rating": "^2.0.5",
160    "react-rating-tooltip": "^1.1.6",
161    "react-redux": "^7.2.1",
162    "react-responsive-carousel": "^3.2.11",
163    "react-router-dom": "^5.2.0",
164    "react-script": "^2.0.5",
165    "react-scripts": "3.4.3",
166    "react-select": "^4.3.1",
167    "react-sparklines": "^1.7.0",
168    "react-star-ratings": "^2.3.0",
169    "react-super-responsive-table": "^5.2.0",
170    "react-switch": "^6.0.0",
171    "react-table": "^7.6.3",
172    "react-toastify": "^7.0.3",
173    "react-toastr": "^3.0.0",
174    "react-twitter-auth": "0.0.13",
175    "reactstrap": "^8.8.1",
176    "recharts": "^2.0.8",
177    "redux": "^4.0.5",
178    "redux-saga": "^1.1.3",
179    "reselect": "^4.0.0",
180    "sass": "^1.37.5",
181    "simplebar-react": "^2.3.0",
182    "styled": "^1.0.0",
183    "styled-components": "^5.2.1",
184    "toastr": "^2.1.4",
185    "typescript": "^4.0.2",
186    "universal-cookie": "^4.0.4"
187  },
188  "devDependencies": {
189    "@typescript-eslint/eslint-plugin": "^2.27.0",
190    "@typescript-eslint/parser": "^2.27.0",
191    "@typescript-eslint/typescript-estree": "^4.15.2",
192    "eslint-config-prettier": "^6.10.1",
193    "eslint-plugin-prettier": "^3.1.2",
194    "husky": "^4.2.5",
195    "lint-staged": "^10.1.3",
196    "prettier": "^1.19.1",
197    "react-test-renderer": "^16.13.1",
198    "redux-devtools-extension": "^2.13.8",
199    "redux-mock-store": "^1.5.4"
200  },
201  "scripts": {
202    "start": "react-scripts start",
203    "build": "react-scripts build && mv build ./deploy/build",
204    "build-local": "react-scripts build",
205    "test": "react-scripts test",
206    "eject": "react-scripts eject"
207  },
208  "eslintConfig": {
209    "extends": "react-app"
210  },
211  "husky": {
212    "hooks": {
213      "pre-commit": "lint-staged"
214    }
215  },
216  "lint-staged": {
217    "*.{js,ts,tsx}": [
218      "eslint --fix"
219    ]
220  },
221  "browserslist": {
222    "production": [
223      ">0.2%",
224      "not dead",
225      "not op_mini all"
226    ],
227    "development": [
228      "last 1 chrome version",
229      "last 1 firefox version",
230      "last 1 safari version"
231    ]
232  }
233}
234    - name: Fix up git URLs
235      run: echo -e '[url "https://github.com/"]\n  insteadOf = "git://github.com/"' >> ~/.gitconfig
236git config --global url."https://github.com/".insteadOf git://github.com/
237git config --global url."git@github.com:".insteadOf git://github.com/
238

That will change any git://github.com/ (unencrypted Git protocol) into git@github.com: (SSH URL).

Source https://stackoverflow.com/questions/70663523

QUESTION

Could not find a declaration file for module 'react-slick'

Asked 2022-Mar-20 at 16:03
1import Slider from "react-slick";
2

i have imported react slick also installed it.

1import Slider from "react-slick";
2import React, { useEffect, useRef,useState } from 'react';
3import Slider from "react-slick";
4import '../Styles/Work.css' ;
5const Work = () => {
6  
7  return (
8    <div style={{height:"100vh"}} ref={ref} className='work-container' id="work">
9      <h1 ref={title} className='work-title'>
10        MY WORKS
11      {/* {inView && navigate('/#about')}   */}
12      </h1>
13    </div>
14  )
15}
16
17export default Work
18

packagelock file

1import Slider from "react-slick";
2import React, { useEffect, useRef,useState } from 'react';
3import Slider from "react-slick";
4import '../Styles/Work.css' ;
5const Work = () => {
6  
7  return (
8    <div style={{height:"100vh"}} ref={ref} className='work-container' id="work">
9      <h1 ref={title} className='work-title'>
10        MY WORKS
11      {/* {inView && navigate('/#about')}   */}
12      </h1>
13    </div>
14  )
15}
16
17export default Work
18"react-scripts": "5.0.0",
19"react-slick": "^0.28.1",
20"react-slick-carousel": "^0.14.9",
21

it's displays in my package-lock too. what's the issue here?? i am using react with typescript

ANSWER

Answered 2022-Mar-20 at 16:03

You have to install the types for 'react-slick' @types/react-slick . Make sure its on your package.json as well as r@types/react 16.8.2

@types/react-dom

Source https://stackoverflow.com/questions/71548268

QUESTION

Setting styles for react-slick

Asked 2022-Mar-04 at 11:31

I am using react-slick (https://react-slick.neostack.com/) to make an easy slider component of my blogs. Now, I want to simply set position: relative and z-index: 50 to the div with class slack-current (which is generated by the Slider component), but can not find any way to do this. I am using NextJS with the following component:

1function Carousel({ blogs }) {
2  const [imageIndex, setImageIndex] = useState(0);
3
4  const transformDate = (date) => {
5    return date.substring(0, 10);
6  };
7
8  const NextArrow = ({ onClick }) => {
9    return (
10      <div className={`${styles.arrow} ${styles.next}`} onClick={onClick}>
11        <FaArrowRight />
12      </div>
13    );
14  };
15
16  const PrevArrow = ({ onClick }) => {
17    return (
18      <div className={`${styles.arrow} ${styles.prev}`} onClick={onClick}>
19        <FaArrowLeft />
20      </div>
21    );
22  };
23
24  const settings = {
25    dots: false,
26    infinite: true,
27    speed: 500,
28    slidesToShow: 3,
29    slidesToScroll: 1,
30    centerMode: true,
31    nextArrow: <NextArrow />,
32    prevArrow: <PrevArrow />,
33    beforeChange: (current, next) => setImageIndex(next),
34  };
35
36  return (
37    <div className={styles.carouselContainer}>
38      <Slider {...settings} className={styles.slider}>
39        {blogs.map((blog, idx) => (
40          <div key={idx} className={styles.slide}>
41            <div
42              className={
43                idx === imageIndex
44                  ? `${styles.innerSlide} ${styles.activeSlide}`
45                  : `${styles.innerSlide} ${styles.passiveSlide}`
46              }
47            >
48              <p>{transformDate(blog.created_on)}</p>
49              <h3>{blog.title}</h3>
50              <p>{blog.subtitle}</p>
51              <button
52                className={
53                  idx === imageIndex
54                    ? `${styles.button} ${styles.activeButton}`
55                    : styles.button
56                }
57              >
58                <Link href={"/blog/" + blog.id}>READ MORE</Link>
59              </button>
60            </div>
61          </div>
62        ))}
63      </Slider>
64    </div>
65  );
66}
67
68export default Carousel;
69

So since I set className ={styles.slider} on the Slider component, I thought I could solve it this way in CSS:

1function Carousel({ blogs }) {
2  const [imageIndex, setImageIndex] = useState(0);
3
4  const transformDate = (date) => {
5    return date.substring(0, 10);
6  };
7
8  const NextArrow = ({ onClick }) => {
9    return (
10      <div className={`${styles.arrow} ${styles.next}`} onClick={onClick}>
11        <FaArrowRight />
12      </div>
13    );
14  };
15
16  const PrevArrow = ({ onClick }) => {
17    return (
18      <div className={`${styles.arrow} ${styles.prev}`} onClick={onClick}>
19        <FaArrowLeft />
20      </div>
21    );
22  };
23
24  const settings = {
25    dots: false,
26    infinite: true,
27    speed: 500,
28    slidesToShow: 3,
29    slidesToScroll: 1,
30    centerMode: true,
31    nextArrow: <NextArrow />,
32    prevArrow: <PrevArrow />,
33    beforeChange: (current, next) => setImageIndex(next),
34  };
35
36  return (
37    <div className={styles.carouselContainer}>
38      <Slider {...settings} className={styles.slider}>
39        {blogs.map((blog, idx) => (
40          <div key={idx} className={styles.slide}>
41            <div
42              className={
43                idx === imageIndex
44                  ? `${styles.innerSlide} ${styles.activeSlide}`
45                  : `${styles.innerSlide} ${styles.passiveSlide}`
46              }
47            >
48              <p>{transformDate(blog.created_on)}</p>
49              <h3>{blog.title}</h3>
50              <p>{blog.subtitle}</p>
51              <button
52                className={
53                  idx === imageIndex
54                    ? `${styles.button} ${styles.activeButton}`
55                    : styles.button
56                }
57              >
58                <Link href={"/blog/" + blog.id}>READ MORE</Link>
59              </button>
60            </div>
61          </div>
62        ))}
63      </Slider>
64    </div>
65  );
66}
67
68export default Carousel;
69.slider .slick-current {
70  position: relative !important;
71  z-index: 50 !important;
72}
73

However, this shows up nowhere and thus has no effect. I also tried to do this with a JavaScript queryselector, but this does not work either. Would anybody know how to do this seemingly simple thing?

ANSWER

Answered 2021-Sep-16 at 09:23

I got it working with JavaScript, although it's not an elegant solution. The following will add position:relative and z-index:50 to the element with CSS class slick-current, and will remove it from the other active slides (since the slick current class changes slides when another slides becomes the current slide) using useEffect:

1function Carousel({ blogs }) {
2  const [imageIndex, setImageIndex] = useState(0);
3
4  const transformDate = (date) => {
5    return date.substring(0, 10);
6  };
7
8  const NextArrow = ({ onClick }) => {
9    return (
10      <div className={`${styles.arrow} ${styles.next}`} onClick={onClick}>
11        <FaArrowRight />
12      </div>
13    );
14  };
15
16  const PrevArrow = ({ onClick }) => {
17    return (
18      <div className={`${styles.arrow} ${styles.prev}`} onClick={onClick}>
19        <FaArrowLeft />
20      </div>
21    );
22  };
23
24  const settings = {
25    dots: false,
26    infinite: true,
27    speed: 500,
28    slidesToShow: 3,
29    slidesToScroll: 1,
30    centerMode: true,
31    nextArrow: <NextArrow />,
32    prevArrow: <PrevArrow />,
33    beforeChange: (current, next) => setImageIndex(next),
34  };
35
36  return (
37    <div className={styles.carouselContainer}>
38      <Slider {...settings} className={styles.slider}>
39        {blogs.map((blog, idx) => (
40          <div key={idx} className={styles.slide}>
41            <div
42              className={
43                idx === imageIndex
44                  ? `${styles.innerSlide} ${styles.activeSlide}`
45                  : `${styles.innerSlide} ${styles.passiveSlide}`
46              }
47            >
48              <p>{transformDate(blog.created_on)}</p>
49              <h3>{blog.title}</h3>
50              <p>{blog.subtitle}</p>
51              <button
52                className={
53                  idx === imageIndex
54                    ? `${styles.button} ${styles.activeButton}`
55                    : styles.button
56                }
57              >
58                <Link href={"/blog/" + blog.id}>READ MORE</Link>
59              </button>
60            </div>
61          </div>
62        ))}
63      </Slider>
64    </div>
65  );
66}
67
68export default Carousel;
69.slider .slick-current {
70  position: relative !important;
71  z-index: 50 !important;
72}
73function Carousel({ blogs }) {
74  const [imageIndex, setImageIndex] = useState(0);
75
76  const transformDate = (date) => {
77    return date.substring(0, 10);
78  };
79
80  const NextArrow = ({ onClick }) => {
81    return (
82      <div className={`${styles.arrow} ${styles.next}`} onClick={onClick}>
83        <FaArrowRight />
84      </div>
85    );
86  };
87
88  const PrevArrow = ({ onClick }) => {
89    return (
90      <div className={`${styles.arrow} ${styles.prev}`} onClick={onClick}>
91        <FaArrowLeft />
92      </div>
93    );
94  };
95
96  useEffect(() => {
97    document.querySelectorAll(".slick-active").forEach((el) => {
98      el.style.setProperty("position", "static", "important");
99    });
100
101    document
102      .querySelectorAll(".slick-current")
103      .style.setProperty("position", "relative", "important");
104    document
105      .querySelectorAll(".slick-current")
106      .style.setProperty("z-index", "50", "important");
107  }, [imageIndex]);
108
109  const settings = {
110    dots: false,
111    infinite: true,
112    speed: 500,
113    slidesToShow: 3,
114    slidesToScroll: 1,
115    centerMode: true,
116    nextArrow: <NextArrow />,
117    prevArrow: <PrevArrow />,
118    beforeChange: (current, next) => setImageIndex(next),
119  };
120
121  return (
122    <div className={styles.carouselContainer}>
123      <Slider {...settings}>
124        {blogs.map((blog, idx) => (
125          <div key={idx}>
126            <div
127              className={
128                idx === imageIndex
129                  ? `${styles.innerSlide} ${styles.activeSlide}`
130                  : `${styles.innerSlide} ${styles.passiveSlide}`
131              }
132            >
133              <p>{transformDate(blog.created_on)}</p>
134              <h3>{blog.title}</h3>
135              <p>{blog.subtitle}</p>
136              <button
137                className={
138                  idx === imageIndex
139                    ? `${styles.button} ${styles.activeButton}`
140                    : styles.button
141                }
142              >
143                <Link href={"/blog/" + blog.id}>READ MORE</Link>
144              </button>
145            </div>
146          </div>
147        ))}
148      </Slider>
149    </div>
150  );
151}
152
153export default Carousel;
154

Better solutions are still welcome!

Source https://stackoverflow.com/questions/69180886

QUESTION

java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;

Asked 2022-Feb-25 at 23:22

It was working fine before I have done nothing, no packages update, no gradle update no nothing just created new build and this error occurs. but for some team members the error occur after gradle sync.

The issue is that build is generating successfully without any error but when opens the app it suddenly gets crash (in both debug and release mode)

Error

1    E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
2        java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
3            at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
4            at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
5            at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
6            at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
7            at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
8            at java.lang.Thread.run(Thread.java:923)
9

gradle-wrapper.properties

1    E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
2        java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
3            at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
4            at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
5            at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
6            at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
7            at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
8            at java.lang.Thread.run(Thread.java:923)
9distributionBase=GRADLE_USER_HOME
10distributionPath=wrapper/dists
11distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
12zipStoreBase=GRADLE_USER_HOME
13zipStorePath=wrapper/dists
14

build.gradle

1    E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
2        java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
3            at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
4            at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
5            at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
6            at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
7            at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
8            at java.lang.Thread.run(Thread.java:923)
9distributionBase=GRADLE_USER_HOME
10distributionPath=wrapper/dists
11distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
12zipStoreBase=GRADLE_USER_HOME
13zipStorePath=wrapper/dists
14// Top-level build file where you can add configuration options common to all sub-projects/modules.
15
16buildscript {
17  ext {
18      buildToolsVersion = "30.0.2"
19      minSdkVersion = 21
20      compileSdkVersion = 30
21      targetSdkVersion = 30
22      ndkVersion = "21.4.7075529"
23  }
24  repositories {
25      google()
26      mavenCentral()
27      jcenter()
28      // maven {
29      //    url 'https://maven.fabric.io/public'
30      // }
31      maven { url "https://www.jitpack.io" }
32  }
33  dependencies {
34      classpath("com.android.tools.build:gradle:4.2.2")
35      classpath 'com.google.gms:google-services:4.2.0'  // Google Services plugin
36      // Add the Fabric Crashlytics plugin.
37      // classpath 'io.fabric.tools:gradle:1.31.2'
38      // firebase performance sdk
39      classpath 'com.google.firebase:perf-plugin:1.4.0'
40      classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'
41
42
43      // NOTE: Do not place your application dependencies here; they belong
44      // in the individual module build.gradle files
45  }
46}
47
48allprojects {
49  repositories {
50      mavenCentral()
51      mavenLocal()
52      maven {
53          // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
54          url("$rootDir/../node_modules/react-native/android")
55      }
56      maven {
57          // Android JSC is installed from npm
58          url("$rootDir/../node_modules/jsc-android/dist")
59      }
60
61      google()
62      jcenter()
63      maven { url 'https://www.jitpack.io' }
64  }
65}
66
67
68subprojects {
69  afterEvaluate {project ->
70      if (project.hasProperty("android")) {
71          android {
72              buildToolsVersion "28.0.3"
73              compileSdkVersion 28
74          }
75      }
76  }
77}
78
79subprojects {
80  afterEvaluate {project ->
81      if (project.hasProperty("android")) {
82          android {
83              compileSdkVersion 29
84              buildToolsVersion '29.0.3'
85          }
86      }
87  }
88}
89

packages

1    E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
2        java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
3            at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
4            at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
5            at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
6            at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
7            at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
8            at java.lang.Thread.run(Thread.java:923)
9distributionBase=GRADLE_USER_HOME
10distributionPath=wrapper/dists
11distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
12zipStoreBase=GRADLE_USER_HOME
13zipStorePath=wrapper/dists
14// Top-level build file where you can add configuration options common to all sub-projects/modules.
15
16buildscript {
17  ext {
18      buildToolsVersion = "30.0.2"
19      minSdkVersion = 21
20      compileSdkVersion = 30
21      targetSdkVersion = 30
22      ndkVersion = "21.4.7075529"
23  }
24  repositories {
25      google()
26      mavenCentral()
27      jcenter()
28      // maven {
29      //    url 'https://maven.fabric.io/public'
30      // }
31      maven { url "https://www.jitpack.io" }
32  }
33  dependencies {
34      classpath("com.android.tools.build:gradle:4.2.2")
35      classpath 'com.google.gms:google-services:4.2.0'  // Google Services plugin
36      // Add the Fabric Crashlytics plugin.
37      // classpath 'io.fabric.tools:gradle:1.31.2'
38      // firebase performance sdk
39      classpath 'com.google.firebase:perf-plugin:1.4.0'
40      classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'
41
42
43      // NOTE: Do not place your application dependencies here; they belong
44      // in the individual module build.gradle files
45  }
46}
47
48allprojects {
49  repositories {
50      mavenCentral()
51      mavenLocal()
52      maven {
53          // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
54          url("$rootDir/../node_modules/react-native/android")
55      }
56      maven {
57          // Android JSC is installed from npm
58          url("$rootDir/../node_modules/jsc-android/dist")
59      }
60
61      google()
62      jcenter()
63      maven { url 'https://www.jitpack.io' }
64  }
65}
66
67
68subprojects {
69  afterEvaluate {project ->
70      if (project.hasProperty("android")) {
71          android {
72              buildToolsVersion "28.0.3"
73              compileSdkVersion 28
74          }
75      }
76  }
77}
78
79subprojects {
80  afterEvaluate {project ->
81      if (project.hasProperty("android")) {
82          android {
83              compileSdkVersion 29
84              buildToolsVersion '29.0.3'
85          }
86      }
87  }
88}
89"dependencies": {
90  "@eva-design/eva": "^2.1.0",
91  "@react-native-async-storage/async-storage": "^1.15.14",
92  "@react-native-community/blur": "^3.6.0",
93  "@react-native-community/checkbox": "^0.5.0",
94  "@react-native-community/netinfo": "^6.0.1",
95  "@react-native-community/toolbar-android": "^0.1.0-rc.2",
96  "@react-native-firebase/analytics": "^10.3.1",
97  "@react-native-firebase/app": "^10.3.0",
98  "@react-native-firebase/auth": "^10.3.1",
99  "@react-native-firebase/crashlytics": "^10.3.1",
100  "@react-native-firebase/dynamic-links": "^10.3.1",
101  "@react-native-firebase/firestore": "^10.3.1",
102  "@react-native-firebase/iid": "^10.3.1",
103  "@react-native-firebase/in-app-messaging": "^10.3.1",
104  "@react-native-firebase/messaging": "^10.3.1",
105  "@react-native-firebase/perf": "^10.3.1",
106  "@react-native-firebase/remote-config": "^10.3.1",
107  "@react-native-firebase/storage": "^10.3.1",
108  "@react-native-picker/picker": "^2.1.0",
109  "@react-navigation/bottom-tabs": "^6.0.9",
110  "@react-navigation/native": "^6.0.6",
111  "@react-navigation/stack": "^6.0.11",
112  "@types/react-native": "^0.65.5",
113  "@ui-kitten/components": "^5.1.0",
114  "axios": "^0.19.0",
115  "i18n-js": "^3.5.1",
116  "moment": "^2.24.0",
117  "native-base": "2.13.8",
118  "react": "17.0.2",
119  "react-content-loader": "^4.3.4",
120  "react-native": "0.66.0",
121  "react-native-actions-sheet": "^0.5.6",
122  "react-native-adjust": "^4.28.0",
123  "react-native-amplitude-analytics": "^0.2.7",
124  "react-native-animatable": "^1.3.3",
125  "react-native-code-push": "^7.0.4",
126  "react-native-config": "^1.3.3",
127  "react-native-contacts": "^5.0.7",
128  "react-native-dots-pagination": "^0.2.0",
129  "react-native-fbsdk-next": "^6.2.0",
130  "react-native-fingerprint-scanner": "^6.0.0",
131  "react-native-floating-action": "^1.22.0",
132  "react-native-geocoding": "^0.4.0",
133  "react-native-geolocation-service": "^5.2.0",
134  "react-native-gesture-handler": "^1.5.2",
135  "react-native-get-random-values": "^1.4.0",
136  "react-native-html-to-pdf-lite": "^0.11.0",
137  "react-native-image-base64": "^0.1.4",
138  "react-native-image-pan-zoom": "^2.1.11",
139  "react-native-image-picker": "^4.1.2",
140  "react-native-image-resizer": "^1.2.0",
141  "react-native-in-app-review": "^2.1.7",
142  "react-native-linear-gradient": "^2.5.6",
143  "react-native-loading-spinner-overlay": "^1.1.0",
144  "react-native-material-menu": "^1.0.0",
145  "react-native-material-textfield": "^0.16.1",
146  "react-native-modal": "^13.0.0",
147  "react-native-phone-call": "^1.0.9",
148  "react-native-ratings": "^7.3.0",
149  "react-native-reanimated": "^1.13.0",
150  "react-native-safe-area-context": "^3.3.2",
151  "react-native-screens": "^3.9.0",
152  "react-native-share": "^7.2.1",
153  "react-native-smooth-pincode-input": "^1.0.9",
154  "react-native-sms-retriever": "https://github.com/sarmad1995/react-native-sms-retriever.git",
155  "react-native-snap-carousel": "^3.9.1",
156  "react-native-splash-screen": "^3.2.0",
157  "react-native-svg": "^12.1.1",
158  "react-native-version-check": "^3.4.2",
159  "react-native-version-number": "^0.3.6",
160  "react-native-view-shot": "^3.1.2",
161  "react-native-walkthrough-tooltip": "^1.3.0",
162  "react-redux": "^7.1.3",
163  "redux": "^4.0.4",
164  "redux-logger": "^3.0.6",
165  "redux-persist": "^6.0.0",
166  "redux-thunk": "^2.3.0",
167  "rn-fetch-blob": "^0.12.0",
168  "urbanairship-react-native": "^12.0.0",
169  "uuid": "^8.3.0"
170},
171

ANSWER

Answered 2022-Feb-25 at 23:22

We have fixed the issue by replacing

1    E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
2        java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
3            at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
4            at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
5            at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
6            at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
7            at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
8            at java.lang.Thread.run(Thread.java:923)
9distributionBase=GRADLE_USER_HOME
10distributionPath=wrapper/dists
11distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
12zipStoreBase=GRADLE_USER_HOME
13zipStorePath=wrapper/dists
14// Top-level build file where you can add configuration options common to all sub-projects/modules.
15
16buildscript {
17  ext {
18      buildToolsVersion = "30.0.2"
19      minSdkVersion = 21
20      compileSdkVersion = 30
21      targetSdkVersion = 30
22      ndkVersion = "21.4.7075529"
23  }
24  repositories {
25      google()
26      mavenCentral()
27      jcenter()
28      // maven {
29      //    url 'https://maven.fabric.io/public'
30      // }
31      maven { url "https://www.jitpack.io" }
32  }
33  dependencies {
34      classpath("com.android.tools.build:gradle:4.2.2")
35      classpath 'com.google.gms:google-services:4.2.0'  // Google Services plugin
36      // Add the Fabric Crashlytics plugin.
37      // classpath 'io.fabric.tools:gradle:1.31.2'
38      // firebase performance sdk
39      classpath 'com.google.firebase:perf-plugin:1.4.0'
40      classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'
41
42
43      // NOTE: Do not place your application dependencies here; they belong
44      // in the individual module build.gradle files
45  }
46}
47
48allprojects {
49  repositories {
50      mavenCentral()
51      mavenLocal()
52      maven {
53          // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
54          url("$rootDir/../node_modules/react-native/android")
55      }
56      maven {
57          // Android JSC is installed from npm
58          url("$rootDir/../node_modules/jsc-android/dist")
59      }
60
61      google()
62      jcenter()
63      maven { url 'https://www.jitpack.io' }
64  }
65}
66
67
68subprojects {
69  afterEvaluate {project ->
70      if (project.hasProperty("android")) {
71          android {
72              buildToolsVersion "28.0.3"
73              compileSdkVersion 28
74          }
75      }
76  }
77}
78
79subprojects {
80  afterEvaluate {project ->
81      if (project.hasProperty("android")) {
82          android {
83              compileSdkVersion 29
84              buildToolsVersion '29.0.3'
85          }
86      }
87  }
88}
89"dependencies": {
90  "@eva-design/eva": "^2.1.0",
91  "@react-native-async-storage/async-storage": "^1.15.14",
92  "@react-native-community/blur": "^3.6.0",
93  "@react-native-community/checkbox": "^0.5.0",
94  "@react-native-community/netinfo": "^6.0.1",
95  "@react-native-community/toolbar-android": "^0.1.0-rc.2",
96  "@react-native-firebase/analytics": "^10.3.1",
97  "@react-native-firebase/app": "^10.3.0",
98  "@react-native-firebase/auth": "^10.3.1",
99  "@react-native-firebase/crashlytics": "^10.3.1",
100  "@react-native-firebase/dynamic-links": "^10.3.1",
101  "@react-native-firebase/firestore": "^10.3.1",
102  "@react-native-firebase/iid": "^10.3.1",
103  "@react-native-firebase/in-app-messaging": "^10.3.1",
104  "@react-native-firebase/messaging": "^10.3.1",
105  "@react-native-firebase/perf": "^10.3.1",
106  "@react-native-firebase/remote-config": "^10.3.1",
107  "@react-native-firebase/storage": "^10.3.1",
108  "@react-native-picker/picker": "^2.1.0",
109  "@react-navigation/bottom-tabs": "^6.0.9",
110  "@react-navigation/native": "^6.0.6",
111  "@react-navigation/stack": "^6.0.11",
112  "@types/react-native": "^0.65.5",
113  "@ui-kitten/components": "^5.1.0",
114  "axios": "^0.19.0",
115  "i18n-js": "^3.5.1",
116  "moment": "^2.24.0",
117  "native-base": "2.13.8",
118  "react": "17.0.2",
119  "react-content-loader": "^4.3.4",
120  "react-native": "0.66.0",
121  "react-native-actions-sheet": "^0.5.6",
122  "react-native-adjust": "^4.28.0",
123  "react-native-amplitude-analytics": "^0.2.7",
124  "react-native-animatable": "^1.3.3",
125  "react-native-code-push": "^7.0.4",
126  "react-native-config": "^1.3.3",
127  "react-native-contacts": "^5.0.7",
128  "react-native-dots-pagination": "^0.2.0",
129  "react-native-fbsdk-next": "^6.2.0",
130  "react-native-fingerprint-scanner": "^6.0.0",
131  "react-native-floating-action": "^1.22.0",
132  "react-native-geocoding": "^0.4.0",
133  "react-native-geolocation-service": "^5.2.0",
134  "react-native-gesture-handler": "^1.5.2",
135  "react-native-get-random-values": "^1.4.0",
136  "react-native-html-to-pdf-lite": "^0.11.0",
137  "react-native-image-base64": "^0.1.4",
138  "react-native-image-pan-zoom": "^2.1.11",
139  "react-native-image-picker": "^4.1.2",
140  "react-native-image-resizer": "^1.2.0",
141  "react-native-in-app-review": "^2.1.7",
142  "react-native-linear-gradient": "^2.5.6",
143  "react-native-loading-spinner-overlay": "^1.1.0",
144  "react-native-material-menu": "^1.0.0",
145  "react-native-material-textfield": "^0.16.1",
146  "react-native-modal": "^13.0.0",
147  "react-native-phone-call": "^1.0.9",
148  "react-native-ratings": "^7.3.0",
149  "react-native-reanimated": "^1.13.0",
150  "react-native-safe-area-context": "^3.3.2",
151  "react-native-screens": "^3.9.0",
152  "react-native-share": "^7.2.1",
153  "react-native-smooth-pincode-input": "^1.0.9",
154  "react-native-sms-retriever": "https://github.com/sarmad1995/react-native-sms-retriever.git",
155  "react-native-snap-carousel": "^3.9.1",
156  "react-native-splash-screen": "^3.2.0",
157  "react-native-svg": "^12.1.1",
158  "react-native-version-check": "^3.4.2",
159  "react-native-version-number": "^0.3.6",
160  "react-native-view-shot": "^3.1.2",
161  "react-native-walkthrough-tooltip": "^1.3.0",
162  "react-redux": "^7.1.3",
163  "redux": "^4.0.4",
164  "redux-logger": "^3.0.6",
165  "redux-persist": "^6.0.0",
166  "redux-thunk": "^2.3.0",
167  "rn-fetch-blob": "^0.12.0",
168  "urbanairship-react-native": "^12.0.0",
169  "uuid": "^8.3.0"
170},
171implementation 'com.facebook.android:facebook-marketing:[4,5)'
172

by

1    E/AndroidRuntime: FATAL EXCEPTION: AsyncTask #3
2        java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest; or its super classes (declaration of 'com.facebook.GraphRequest' appears in /data/app/~~aLf3pfLySq5u7zpIAr2Hlg==/com.package-name-99h4GcP3GNx2sMs76AXGvA==/base.apk)
3            at com.facebook.marketing.internal.RemoteConfigManager.getRemoteConfigQueryResponse(RemoteConfigManager.java:87)
4            at com.facebook.marketing.internal.RemoteConfigManager.access$000(RemoteConfigManager.java:43)
5            at com.facebook.marketing.internal.RemoteConfigManager$1.run(RemoteConfigManager.java:64)
6            at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
7            at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
8            at java.lang.Thread.run(Thread.java:923)
9distributionBase=GRADLE_USER_HOME
10distributionPath=wrapper/dists
11distributionUrl=https\://services.gradle.org/distributions/gradle-6.9-all.zip
12zipStoreBase=GRADLE_USER_HOME
13zipStorePath=wrapper/dists
14// Top-level build file where you can add configuration options common to all sub-projects/modules.
15
16buildscript {
17  ext {
18      buildToolsVersion = "30.0.2"
19      minSdkVersion = 21
20      compileSdkVersion = 30
21      targetSdkVersion = 30
22      ndkVersion = "21.4.7075529"
23  }
24  repositories {
25      google()
26      mavenCentral()
27      jcenter()
28      // maven {
29      //    url 'https://maven.fabric.io/public'
30      // }
31      maven { url "https://www.jitpack.io" }
32  }
33  dependencies {
34      classpath("com.android.tools.build:gradle:4.2.2")
35      classpath 'com.google.gms:google-services:4.2.0'  // Google Services plugin
36      // Add the Fabric Crashlytics plugin.
37      // classpath 'io.fabric.tools:gradle:1.31.2'
38      // firebase performance sdk
39      classpath 'com.google.firebase:perf-plugin:1.4.0'
40      classpath 'com.google.firebase:firebase-crashlytics-gradle:2.7.1'
41
42
43      // NOTE: Do not place your application dependencies here; they belong
44      // in the individual module build.gradle files
45  }
46}
47
48allprojects {
49  repositories {
50      mavenCentral()
51      mavenLocal()
52      maven {
53          // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
54          url("$rootDir/../node_modules/react-native/android")
55      }
56      maven {
57          // Android JSC is installed from npm
58          url("$rootDir/../node_modules/jsc-android/dist")
59      }
60
61      google()
62      jcenter()
63      maven { url 'https://www.jitpack.io' }
64  }
65}
66
67
68subprojects {
69  afterEvaluate {project ->
70      if (project.hasProperty("android")) {
71          android {
72              buildToolsVersion "28.0.3"
73              compileSdkVersion 28
74          }
75      }
76  }
77}
78
79subprojects {
80  afterEvaluate {project ->
81      if (project.hasProperty("android")) {
82          android {
83              compileSdkVersion 29
84              buildToolsVersion '29.0.3'
85          }
86      }
87  }
88}
89"dependencies": {
90  "@eva-design/eva": "^2.1.0",
91  "@react-native-async-storage/async-storage": "^1.15.14",
92  "@react-native-community/blur": "^3.6.0",
93  "@react-native-community/checkbox": "^0.5.0",
94  "@react-native-community/netinfo": "^6.0.1",
95  "@react-native-community/toolbar-android": "^0.1.0-rc.2",
96  "@react-native-firebase/analytics": "^10.3.1",
97  "@react-native-firebase/app": "^10.3.0",
98  "@react-native-firebase/auth": "^10.3.1",
99  "@react-native-firebase/crashlytics": "^10.3.1",
100  "@react-native-firebase/dynamic-links": "^10.3.1",
101  "@react-native-firebase/firestore": "^10.3.1",
102  "@react-native-firebase/iid": "^10.3.1",
103  "@react-native-firebase/in-app-messaging": "^10.3.1",
104  "@react-native-firebase/messaging": "^10.3.1",
105  "@react-native-firebase/perf": "^10.3.1",
106  "@react-native-firebase/remote-config": "^10.3.1",
107  "@react-native-firebase/storage": "^10.3.1",
108  "@react-native-picker/picker": "^2.1.0",
109  "@react-navigation/bottom-tabs": "^6.0.9",
110  "@react-navigation/native": "^6.0.6",
111  "@react-navigation/stack": "^6.0.11",
112  "@types/react-native": "^0.65.5",
113  "@ui-kitten/components": "^5.1.0",
114  "axios": "^0.19.0",
115  "i18n-js": "^3.5.1",
116  "moment": "^2.24.0",
117  "native-base": "2.13.8",
118  "react": "17.0.2",
119  "react-content-loader": "^4.3.4",
120  "react-native": "0.66.0",
121  "react-native-actions-sheet": "^0.5.6",
122  "react-native-adjust": "^4.28.0",
123  "react-native-amplitude-analytics": "^0.2.7",
124  "react-native-animatable": "^1.3.3",
125  "react-native-code-push": "^7.0.4",
126  "react-native-config": "^1.3.3",
127  "react-native-contacts": "^5.0.7",
128  "react-native-dots-pagination": "^0.2.0",
129  "react-native-fbsdk-next": "^6.2.0",
130  "react-native-fingerprint-scanner": "^6.0.0",
131  "react-native-floating-action": "^1.22.0",
132  "react-native-geocoding": "^0.4.0",
133  "react-native-geolocation-service": "^5.2.0",
134  "react-native-gesture-handler": "^1.5.2",
135  "react-native-get-random-values": "^1.4.0",
136  "react-native-html-to-pdf-lite": "^0.11.0",
137  "react-native-image-base64": "^0.1.4",
138  "react-native-image-pan-zoom": "^2.1.11",
139  "react-native-image-picker": "^4.1.2",
140  "react-native-image-resizer": "^1.2.0",
141  "react-native-in-app-review": "^2.1.7",
142  "react-native-linear-gradient": "^2.5.6",
143  "react-native-loading-spinner-overlay": "^1.1.0",
144  "react-native-material-menu": "^1.0.0",
145  "react-native-material-textfield": "^0.16.1",
146  "react-native-modal": "^13.0.0",
147  "react-native-phone-call": "^1.0.9",
148  "react-native-ratings": "^7.3.0",
149  "react-native-reanimated": "^1.13.0",
150  "react-native-safe-area-context": "^3.3.2",
151  "react-native-screens": "^3.9.0",
152  "react-native-share": "^7.2.1",
153  "react-native-smooth-pincode-input": "^1.0.9",
154  "react-native-sms-retriever": "https://github.com/sarmad1995/react-native-sms-retriever.git",
155  "react-native-snap-carousel": "^3.9.1",
156  "react-native-splash-screen": "^3.2.0",
157  "react-native-svg": "^12.1.1",
158  "react-native-version-check": "^3.4.2",
159  "react-native-version-number": "^0.3.6",
160  "react-native-view-shot": "^3.1.2",
161  "react-native-walkthrough-tooltip": "^1.3.0",
162  "react-redux": "^7.1.3",
163  "redux": "^4.0.4",
164  "redux-logger": "^3.0.6",
165  "redux-persist": "^6.0.0",
166  "redux-thunk": "^2.3.0",
167  "rn-fetch-blob": "^0.12.0",
168  "urbanairship-react-native": "^12.0.0",
169  "uuid": "^8.3.0"
170},
171implementation 'com.facebook.android:facebook-marketing:[4,5)'
172implementation 'com.facebook.android:facebook-marketing:latest.release'
173

in android/app/build.gradle file.

Posted this so someone out there facing the same problem will find the solution easily. It took me and my team around one and a half day to figure it out as there is no clear solution out there.

Solution Ref: here

Source https://stackoverflow.com/questions/71256006

QUESTION

Error: export 'ɔCssKeyframesDriver' (imported as 'ɔCssKeyframesDriver') was not found in '@angular/animations/browser'

Asked 2022-Feb-25 at 06:57

After upgrading my Angular from 12.0.2 to 13.0.3 everything was working fine. I was trying to remove some packages that was not used such as jquery, and some other i do not remember etc. and after that I deleted node_modules, package-lock.json and run npm i to installed all packages again. After that I recieved bunch of errors which then i again reverted package.json and tried npm i then I am getting below errors. And I am unable to fixed it.

Any idea how can i resolve this ?

1./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:9-31 - Error: export 'ɔsupportsWebAnimations' (imported as 'ɔsupportsWebAnimations') was not found in '@angular/animations/browser' (possible exports: AnimationDriver, ɔAnimation, ɔAnimationEngine, ɔAnimationStyleNormalizer, ɔNoopAnimationDriver, ɔNoopAnimationStyleNormalizer, ɔWebAnimationsDriver, ɔWebAnimationsPlayer, ɔWebAnimationsStyleNormalizer, ɔallowPreviousPlayerStylesMerge, ɔcontainsElement, ɔinvokeQuery, ɔvalidateStyleProperty)
2
3./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:69-88 - Error: export 'ɔCssKeyframesDriver' (imported as 'ɔCssKeyframesDriver') was not found in '@angular/animations/browser' (possible exports: AnimationDriver, ɔAnimation, ɔAnimationEngine, ɔAnimationStyleNormalizer, ɔNoopAnimationDriver, ɔNoopAnimationStyleNormalizer, ɔWebAnimationsDriver, ɔWebAnimationsPlayer, ɔWebAnimationsStyleNormalizer, ɔallowPreviousPlayerStylesMerge, ɔcontainsElement, ɔinvokeQuery, ɔvalidateStyleProperty)
4

package.json

1./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:9-31 - Error: export 'ɔsupportsWebAnimations' (imported as 'ɔsupportsWebAnimations') was not found in '@angular/animations/browser' (possible exports: AnimationDriver, ɔAnimation, ɔAnimationEngine, ɔAnimationStyleNormalizer, ɔNoopAnimationDriver, ɔNoopAnimationStyleNormalizer, ɔWebAnimationsDriver, ɔWebAnimationsPlayer, ɔWebAnimationsStyleNormalizer, ɔallowPreviousPlayerStylesMerge, ɔcontainsElement, ɔinvokeQuery, ɔvalidateStyleProperty)
2
3./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:69-88 - Error: export 'ɔCssKeyframesDriver' (imported as 'ɔCssKeyframesDriver') was not found in '@angular/animations/browser' (possible exports: AnimationDriver, ɔAnimation, ɔAnimationEngine, ɔAnimationStyleNormalizer, ɔNoopAnimationDriver, ɔNoopAnimationStyleNormalizer, ɔWebAnimationsDriver, ɔWebAnimationsPlayer, ɔWebAnimationsStyleNormalizer, ɔallowPreviousPlayerStylesMerge, ɔcontainsElement, ɔinvokeQuery, ɔvalidateStyleProperty)
4"private": true,
5  "browser": {
6    "fs": false,
7    "path": false,
8    "os": false
9  },
10  "dependencies": {
11    "@angular-material-components/datetime-picker": "6.0.3",
12    "@angular/animations": "^13.0.3",
13    "@angular/cdk": "^13.0.3",
14    "@angular/common": "13.0.3",
15    "@angular/compiler": "13.0.3",
16    "@angular/core": "13.0.3",
17    "@angular/fire": "^6.1.4",
18    "@angular/forms": "13.0.3",
19    "@angular/material": "13.0.3",
20    "@angular/material-moment-adapter": "13.0.3",
21    "@angular/platform-browser": "13.0.3",
22    "@angular/platform-browser-dynamic": "13.0.3",
23    "@angular/platform-server": "13.0.3",
24    "@angular/router": "13.0.3",
25    "@nguniversal/express-engine": "^12.0.0",
26    "bootstrap": "^5.1.3",
27    "crypto-js": "4.0.0",
28    "domino": "^2.1.6",
29    "express": "^4.15.2",
30    "firebase": "^8.10.0",
31    "highlight.js": "10.7.2",
32    "lodash-es": "4.17.21",
33    "moment": "^2.29.1",
34    "ngx-moment": "^5.0.0",
35    "node-fetch": "^2.6.1",
36    "rrule": "2.6.8",
37    "rxjs": "7.1.0",
38    "tslib": "2.2.0",
39    "zone.js": "~0.11.4"
40  },
41  "devDependencies": {
42    "@angular-devkit/build-angular": "13.0.3",
43    "@angular/cli": "13.0.3",
44    "@angular/compiler-cli": "13.0.3",
45    "@angular/language-service": "13.0.3",
46    "@nguniversal/builders": "^12.0.0",
47    "@ngx-builders/analyze": "^2.3.0",
48    "@types/crypto-js": "4.0.1",
49    "@types/express": "^4.17.0",
50    "@types/highlight.js": "9.12.4",
51    "@types/jasmine": "3.6.10",
52    "@types/jasminewd2": "2.0.8",
53    "@types/lodash-es": "4.17.4",
54    "@types/node": "15.0.1",
55    "bufferutil": "^4.0.3",
56    "codelyzer": "6.0.2",
57    "jasmine-core": "3.7.1",
58    "jasmine-spec-reporter": "7.0.0",
59    "karma": "6.3.2",
60    "karma-chrome-launcher": "3.1.0",
61    "karma-coverage-istanbul-reporter": "3.0.3",
62    "karma-jasmine": "4.0.1",
63    "karma-jasmine-html-reporter": "1.5.4",
64    "ngx-owl-carousel-o": "^6.0.0",
65    "protractor": "7.0.0",
66    "tailwindcss": "2.1.2",
67    "ts-node": "9.1.1",
68    "tslint": "6.1.2",
69    "typescript": "~4.4.0",
70    "utf-8-validate": "^5.0.5",
71    "ws": "^8.2.2",
72    "xhr2": "^0.2.1"
73  }
74}
75

I see that the issue is with

@angular/animations package.

When I remove that and manually add that package from my old backup it works fine.

ng-project/node_modules/@angular/animations

I replace this folder completely from my backup and it worked without re-compile.

Again if I run npm installit will not work. Help me here to understand.

ANSWER

Answered 2022-Feb-25 at 06:57

As I researched a lot and did not find a solution to this issue as it's occurring only on the newer version of the animation package.

I tried the below versions:

  • 13.2.4 (Latest one) throwing same es error

  • 13.2.3 throwing same es error

  • 13.2.2 throwing same es error

  • 13.2.1 throwing same es error

  • 13.2.0 working without error.

So I think for a temporary fix you should update your package.json by pointing to a specific version of this npm like below.

1./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:9-31 - Error: export 'ɔsupportsWebAnimations' (imported as 'ɔsupportsWebAnimations') was not found in '@angular/animations/browser' (possible exports: AnimationDriver, ɔAnimation, ɔAnimationEngine, ɔAnimationStyleNormalizer, ɔNoopAnimationDriver, ɔNoopAnimationStyleNormalizer, ɔWebAnimationsDriver, ɔWebAnimationsPlayer, ɔWebAnimationsStyleNormalizer, ɔallowPreviousPlayerStylesMerge, ɔcontainsElement, ɔinvokeQuery, ɔvalidateStyleProperty)
2
3./node_modules/@angular/platform-browser/fesm2020/animations.mjs:531:69-88 - Error: export 'ɔCssKeyframesDriver' (imported as 'ɔCssKeyframesDriver') was not found in '@angular/animations/browser' (possible exports: AnimationDriver, ɔAnimation, ɔAnimationEngine, ɔAnimationStyleNormalizer, ɔNoopAnimationDriver, ɔNoopAnimationStyleNormalizer, ɔWebAnimationsDriver, ɔWebAnimationsPlayer, ɔWebAnimationsStyleNormalizer, ɔallowPreviousPlayerStylesMerge, ɔcontainsElement, ɔinvokeQuery, ɔvalidateStyleProperty)
4"private": true,
5  "browser": {
6    "fs": false,
7    "path": false,
8    "os": false
9  },
10  "dependencies": {
11    "@angular-material-components/datetime-picker": "6.0.3",
12    "@angular/animations": "^13.0.3",
13    "@angular/cdk": "^13.0.3",
14    "@angular/common": "13.0.3",
15    "@angular/compiler": "13.0.3",
16    "@angular/core": "13.0.3",
17    "@angular/fire": "^6.1.4",
18    "@angular/forms": "13.0.3",
19    "@angular/material": "13.0.3",
20    "@angular/material-moment-adapter": "13.0.3",
21    "@angular/platform-browser": "13.0.3",
22    "@angular/platform-browser-dynamic": "13.0.3",
23    "@angular/platform-server": "13.0.3",
24    "@angular/router": "13.0.3",
25    "@nguniversal/express-engine": "^12.0.0",
26    "bootstrap": "^5.1.3",
27    "crypto-js": "4.0.0",
28    "domino": "^2.1.6",
29    "express": "^4.15.2",
30    "firebase": "^8.10.0",
31    "highlight.js": "10.7.2",
32    "lodash-es": "4.17.21",
33    "moment": "^2.29.1",
34    "ngx-moment": "^5.0.0",
35    "node-fetch": "^2.6.1",
36    "rrule": "2.6.8",
37    "rxjs": "7.1.0",
38    "tslib": "2.2.0",
39    "zone.js": "~0.11.4"
40  },
41  "devDependencies": {
42    "@angular-devkit/build-angular": "13.0.3",
43    "@angular/cli": "13.0.3",
44    "@angular/compiler-cli": "13.0.3",
45    "@angular/language-service": "13.0.3",
46    "@nguniversal/builders": "^12.0.0",
47    "@ngx-builders/analyze": "^2.3.0",
48    "@types/crypto-js": "4.0.1",
49    "@types/express": "^4.17.0",
50    "@types/highlight.js": "9.12.4",
51    "@types/jasmine": "3.6.10",
52    "@types/jasminewd2": "2.0.8",
53    "@types/lodash-es": "4.17.4",
54    "@types/node": "15.0.1",
55    "bufferutil": "^4.0.3",
56    "codelyzer": "6.0.2",
57    "jasmine-core": "3.7.1",
58    "jasmine-spec-reporter": "7.0.0",
59    "karma": "6.3.2",
60    "karma-chrome-launcher": "3.1.0",
61    "karma-coverage-istanbul-reporter": "3.0.3",
62    "karma-jasmine": "4.0.1",
63    "karma-jasmine-html-reporter": "1.5.4",
64    "ngx-owl-carousel-o": "^6.0.0",
65    "protractor": "7.0.0",
66    "tailwindcss": "2.1.2",
67    "ts-node": "9.1.1",
68    "tslint": "6.1.2",
69    "typescript": "~4.4.0",
70    "utf-8-validate": "^5.0.5",
71    "ws": "^8.2.2",
72    "xhr2": "^0.2.1"
73  }
74}
75"@angular/animations": "13.2.0"
76

this or lower version will not throw any error and all newer versions have the ɔsupportsWebAnimations issue.

Ref of issue: https://github.com/angular/angular/issues/45191

Edit:

If anyone wants a proper solution and wants the latest version of @angular/animations then they need to be the exact same version as the other Angular framework packages by doing ng update so once all the core Angular framework packages match with the same version you will no longer see the above error and can build your app without error.

Source https://stackoverflow.com/questions/71146965

QUESTION

Expo SDK 44 upgrade ERROR - App.js: [BABEL]: Unexpected token '.'

Asked 2022-Jan-24 at 21:48

I have recently upgraded my app from SDK 40 to SDK 44 and came across this error App.js: [BABEL]: Unexpected token '.' (While processing: /Users/user/path/to/project/node_modules/babel-preset-expo/index.js)

Error Stack Trace:

1App.js: [BABEL]: Unexpected token '.' (While processing: /Users/user/path/to/project/node_modules/babel-preset-expo/index.js)
2/Users/user/path/to/project/node_modules/babel-preset-expo/index.js:48
3        ...(options?.jsxRuntime !== 'classic' && {
4                    ^
5
6SyntaxError: Unexpected token '.'
7    at wrapSafe (internal/modules/cjs/loader.js:931:16)
8    at Module._compile (internal/modules/cjs/loader.js:979:27)
9    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
10    at Module.load (internal/modules/cjs/loader.js:879:32)
11    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
12    at Module.require (internal/modules/cjs/loader.js:903:19)
13    at require (internal/modules/cjs/helpers.js:74:18)
14    at loadCjsDefault (/Users/user/path/to/project/node_modules/@babel/core/lib/config/files/module-types.js:85:18)
15    at loadCjsOrMjsDefault (/Users/user/path/to/project/node_modules/@babel/core/lib/config/files/module-types.js:57:16)
16

Here is my babel.config.js:

1App.js: [BABEL]: Unexpected token '.' (While processing: /Users/user/path/to/project/node_modules/babel-preset-expo/index.js)
2/Users/user/path/to/project/node_modules/babel-preset-expo/index.js:48
3        ...(options?.jsxRuntime !== 'classic' && {
4                    ^
5
6SyntaxError: Unexpected token '.'
7    at wrapSafe (internal/modules/cjs/loader.js:931:16)
8    at Module._compile (internal/modules/cjs/loader.js:979:27)
9    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
10    at Module.load (internal/modules/cjs/loader.js:879:32)
11    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
12    at Module.require (internal/modules/cjs/loader.js:903:19)
13    at require (internal/modules/cjs/helpers.js:74:18)
14    at loadCjsDefault (/Users/user/path/to/project/node_modules/@babel/core/lib/config/files/module-types.js:85:18)
15    at loadCjsOrMjsDefault (/Users/user/path/to/project/node_modules/@babel/core/lib/config/files/module-types.js:57:16)
16return {
17    presets: ['babel-preset-expo', { jsxRuntime: 'automatic' }],
18    plugins: [
19        ['inline-dotenv'],
20        ['.....']
21    ]
22}
23

Here is my package.json:

1App.js: [BABEL]: Unexpected token '.' (While processing: /Users/user/path/to/project/node_modules/babel-preset-expo/index.js)
2/Users/user/path/to/project/node_modules/babel-preset-expo/index.js:48
3        ...(options?.jsxRuntime !== 'classic' && {
4                    ^
5
6SyntaxError: Unexpected token '.'
7    at wrapSafe (internal/modules/cjs/loader.js:931:16)
8    at Module._compile (internal/modules/cjs/loader.js:979:27)
9    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
10    at Module.load (internal/modules/cjs/loader.js:879:32)
11    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
12    at Module.require (internal/modules/cjs/loader.js:903:19)
13    at require (internal/modules/cjs/helpers.js:74:18)
14    at loadCjsDefault (/Users/user/path/to/project/node_modules/@babel/core/lib/config/files/module-types.js:85:18)
15    at loadCjsOrMjsDefault (/Users/user/path/to/project/node_modules/@babel/core/lib/config/files/module-types.js:57:16)
16return {
17    presets: ['babel-preset-expo', { jsxRuntime: 'automatic' }],
18    plugins: [
19        ['inline-dotenv'],
20        ['.....']
21    ]
22}
23{
24    "main": "node_modules/expo/AppEntry.js",
25    "scripts": {
26        "start": "expo start",
27        "android": "expo start --android",
28        "ios": "expo start --ios",
29        "web": "expo start --web",
30        "eject": "expo eject",
31        "test": "jest"
32    },
33    "jest": {
34        "preset": "jest-expo"
35    },
36    "dependencies": {
37        "@babel/plugin-transform-react-jsx": "^7.16.5",
38        "@react-native-async-storage/async-storage": "~1.15.0",
39        "@react-native-community/art": "^1.2.0",
40        "@react-native-community/datetimepicker": "4.0.0",
41        "@react-native-community/masked-view": "0.1.10",
42        "@react-native-community/netinfo": "7.1.3",
43        "@react-native-community/push-notification-ios": "^1.2.2",
44        "@react-native-community/slider": "4.1.12",
45        "@react-navigation/native": "^5.1.4",
46        "aws-amplify": "^3.3.1",
47        "aws-amplify-react-native": "^4.2.6",
48        "axios": "^0.19.2",
49        "expo": "^44.0.0",
50        "expo-app-loading": "~1.3.0",
51        "expo-barcode-scanner": "~11.2.0",
52        "expo-camera": "~12.1.0",
53        "expo-constants": "~13.0.0",
54        "expo-font": "~10.0.4",
55        "expo-linking": "~3.0.0",
56        "expo-mail-composer": "~11.1.0",
57        "expo-notifications": "~0.14.0",
58        "expo-permissions": "~13.1.0",
59        "expo-secure-store": "~11.1.0",
60        "expo-sqlite": "~10.1.0",
61        "expo-updates": "~0.11.2",
62        "expo-web-browser": "~10.1.0",
63        "file-saver": "^2.0.2",
64        "jsbarcode": "^3.11.3",
65        "link": "^0.1.5",
66        "metro-config": "^0.64.0",
67        "npm": "^8.3.0",
68        "qs": "^6.9.4",
69        "react": "17.0.1",
70        "react-dom": "17.0.1",
71        "react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
72        "react-native-barcode-expo": "^1.1.1",
73        "react-native-elements": "^3.2.0",
74        "react-native-fs": "^2.16.6",
75        "react-native-gesture-handler": "~2.1.0",
76        "react-native-modal": "^11.5.6",
77        "react-native-modal-datetime-picker": "^8.6.0",
78        "react-native-paper": "^3.10.1",
79        "react-native-push-notification": "^3.5.2",
80        "react-native-reanimated": "~2.3.1",
81        "react-native-router-flux": "^4.2.0",
82        "react-native-safe-area-context": "3.3.2",
83        "react-native-screens": "~3.10.1",
84        "react-native-snap-carousel": "^3.9.1",
85        "react-native-svg": "12.1.1",
86        "react-native-web": "0.17.1",
87        "react-navigation-animated-switch": "^0.6.4",
88        "react-navigation-drawer": "^2.4.11",
89        "react-navigation-header-buttons": "^3.0.5",
90        "react-router-dom": "^6.0.0-alpha.3",
91        "yarn": "^1.22.17"
92    },
93    "devDependencies": {
94        "@babel/core": "^7.12.9",
95        "@babel/runtime": "^7.9.2",
96        "@react-native-community/eslint-config": "^0.0.7",
97        "babel-jest": "^25.1.0",
98        "babel-plugin-inline-dotenv": "^1.6.0",
99        "babel-preset-expo": "9.0.1",
100        "eslint": "^6.8.0",
101        "expo-cli": "^5.0.2",
102        "jest": "^26.6.3",
103        "jest-expo": "^44.0.0",
104        "metro-react-native-babel-preset": "^0.66.2",
105        "react-test-renderer": "^16.13.1"
106    },
107    "private": true
108}
109

Any help will be greatly appreciated.

ANSWER

Answered 2021-Dec-21 at 05:52

can you give your

  • package.json
  • node version

I think that's because of the babel issue / your node version, because it cannot transpile the optional chaining https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

maybe tried using latest LTS node version? because as far as I know, the latest LTS node version already support optional chaining

Source https://stackoverflow.com/questions/70431115

QUESTION

Angular TSLint - Cannot find builder "@angular-devkit/build-angular:tslint"

Asked 2022-Jan-04 at 13:18

When I try to run command ng lint --fix cli throws this error:

1An unhandled exception occurred: Cannot find builder "@angular-devkit/build-angular:tslint".
2See "C:\Users\MOE89A~1.ZAR\AppData\Local\Temp\ng-Ijc3an\angular-errors.log" for further details.
3

My lint confing in angular.json:

1An unhandled exception occurred: Cannot find builder "@angular-devkit/build-angular:tslint".
2See "C:\Users\MOE89A~1.ZAR\AppData\Local\Temp\ng-Ijc3an\angular-errors.log" for further details.
3"lint": {
4  "builder": "@angular-devkit/build-angular:tslint",
5  "options": {
6    "tsConfig": [
7      "projects/wepod-app/tsconfig.app.json",
8      "projects/wepod-app/tsconfig.spec.json",
9      "projects/wepod-app/e2e/tsconfig.json"
10    ],
11    "exclude": [
12      "**/node_modules/**"
13    ]
14  }
15},
16

My package.json:

1An unhandled exception occurred: Cannot find builder "@angular-devkit/build-angular:tslint".
2See "C:\Users\MOE89A~1.ZAR\AppData\Local\Temp\ng-Ijc3an\angular-errors.log" for further details.
3"lint": {
4  "builder": "@angular-devkit/build-angular:tslint",
5  "options": {
6    "tsConfig": [
7      "projects/wepod-app/tsconfig.app.json",
8      "projects/wepod-app/tsconfig.spec.json",
9      "projects/wepod-app/e2e/tsconfig.json"
10    ],
11    "exclude": [
12      "**/node_modules/**"
13    ]
14  }
15},
16{
17  "name": "wepod-clients",
18  "version": "3.2.3",
19  "scripts": {
20    "ng": "ng",
21    "start": "node patch.js && ng serve",
22    "build": "node patch.js && node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng run wepod-app:app-shell:production && ng run wepod-app:auth-standalone:production",
23    "server": "npm run build && http-server -p 9090 -c-1 dist",
24    "test": "ng test",
25    "lint": "ng lint --fix",
26    "e2e": "ng e2e",
27    "postinstall": "node patch.js && ngcc",
28    "postbuild": "node post-build.js",
29    "prepare": "husky install",
30    "build-latest": "git pull origin production && npm run build"
31  },
32  "private": true,
33  "dependencies": {
34    "@angular/animations": "^13.0.0",
35    "@angular/cdk": "^13.0.0",
36    "@angular/cli": "^13.0.1",
37    "@angular/common": "^13.0.0",
38    "@angular/compiler": "^13.0.0",
39    "@angular/core": "^13.0.0",
40    "@angular/forms": "^13.0.0",
41    "@angular/localize": "^13.0.0",
42    "@angular/platform-browser": "^13.0.0",
43    "@angular/platform-browser-dynamic": "^13.0.0",
44    "@angular/platform-server": "^13.0.0",
45    "@angular/router": "^13.0.0",
46    "@angular/service-worker": "^13.0.0",
47    "@types/video.js": "^7.3.27",
48    "animate.css": "^4.1.1",
49    "assert": "^2.0.0",
50    "bowser": "^2.11.0",
51    "buffer": "^6.0.3",
52    "bundle-loader": "^0.5.6",
53    "compare-version": "^0.1.2",
54    "constants-browserify": "^1.0.0",
55    "crypto-browserify": "^3.12.0",
56    "crypto-js": "^4.1.1",
57    "d3": "^6.5.0",
58    "hammerjs": "^2.0.8",
59    "https-browserify": "^1.0.0",
60    "jalali-moment": "^3.3.10",
61    "lottie-web": "^5.7.13",
62    "lzutf8": "^0.6.0",
63    "net": "^1.0.2",
64    "ng-gallery": "^5.1.1",
65    "ng2-jalali-date-picker": "^2.4.2",
66    "ngx-device-detector": "^1.5.2",
67    "ngx-doughnut-chart": "0.0.4",
68    "ngx-infinite-scroll": "^8.0.2",
69    "ngx-lottie": "^7.0.4",
70    "ngx-owl-carousel-o": "^3.1.1",
71    "ngx-skeleton-loader": "^2.10.1",
72    "ngx-toastr": "^12.1.0",
73    "os-browserify": "^0.3.0",
74    "podchat-browser": "^10.14.13",
75    "rxjs": "^6.6.7",
76    "stream-browserify": "^3.0.0",
77    "stream-http": "^3.2.0",
78    "tls": "0.0.1",
79    "tslib": "^2.0.0",
80    "uuid": "^8.3.2",
81    "video.js": "^7.15.4",
82    "videojs-record": "^4.5.0",
83    "zone.js": "~0.11.4"
84  },
85  "devDependencies": {
86    "@angular-devkit/build-angular": "^13.0.1",
87    "@angular-devkit/core": "^13.0.1",
88    "@angular/compiler-cli": "^13.0.0",
89    "@angular/language-service": "^13.0.0",
90    "@egjs/hammerjs": "^2.0.17",
91    "@types/hammerjs": "^2.0.40",
92    "@types/jasmine": "~3.6.0",
93    "@types/jasminewd2": "^2.0.10",
94    "@types/node": "^12.20.36",
95    "codelyzer": "^6.0.0",
96    "colors": "^1.4.0",
97    "git-tag-version": "^1.3.1",
98    "gulp": "^4.0.2",
99    "gulp-gzip": "^1.4.2",
100    "http-server": "^14.0.0",
101    "husky": "^7.0.4",
102    "jasmine-core": "~3.6.0",
103    "jasmine-spec-reporter": "~5.0.0",
104    "karma": "^6.3.7",
105    "karma-chrome-launcher": "~3.1.0",
106    "karma-coverage-istanbul-reporter": "^2.1.0",
107    "karma-jasmine": "~4.0.0",
108    "karma-jasmine-html-reporter": "^1.5.0",
109    "protractor": "^7.0.0",
110    "ts-node": "^8.10.2",
111    "tslint": "^6.1.3",
112    "typescript": "4.4.4",
113    "zip-dir": "^2.0.0"
114  },
115  "browser": {
116    "fs": false,
117    "path": false,
118    "os": false
119  }
120}
121

ANSWER

Answered 2021-Nov-28 at 10:34

From v13 angular doesn't use tslint anymore due to deprecation.

Run ng add @angular-eslint/schematics to add eslint to your application.

It will use tslint-to-eslint-config to migrate you to eslint automatically.

It will generate a .eslintrc.json file and migrate tslint.json to it.

Nothing else is needed to be done.

Source https://stackoverflow.com/questions/70141707

QUESTION

How do I loop an image carousel with React setState and setInterval?

Asked 2021-Dec-22 at 19:49

I am trying to set up an image carousel that loops through 3 images when you mouseover a div. I'm having trouble trying to figure out how to reset the loop after it reaches the third image. I need to reset the setInterval so it starts again and continuously loops through the images when you are hovering over the div. Then when you mouseout of the div, the loop needs to stop and reset to the initial state of 0. Here is the Code Sandbox:

https://codesandbox.io/s/pedantic-lake-wn3s7

1import React, { useState, useEffect } from "react";
2import { images } from "./Data";
3import "./styles.css";
4
5export default function App() {
6  let timer;
7  const [count, setCount] = useState(0);
8
9  const updateCount = () => {
10    timer = setInterval(() => {
11      setCount((prevCount) => prevCount + 1);
12    }, 1000);
13
14    if (count === 3) clearInterval(timer);
15  };
16
17  const origCount = () => {
18    clearInterval(timer);
19    setCount((count) => 0);
20  };
21
22  return (
23    <div className="App">
24      <div className="title">Image Rotate</div>
25      <div onMouseOver={updateCount} onMouseOut={origCount}>
26        <img src={images[count].source} alt={images.name} />
27        <p>count is: {count}</p>
28      </div>
29    </div>
30  );
31}
32

ANSWER

Answered 2021-Dec-22 at 19:49

Your setCount should use a condition to check to see if it should go back to the start:

1import React, { useState, useEffect } from "react";
2import { images } from "./Data";
3import "./styles.css";
4
5export default function App() {
6  let timer;
7  const [count, setCount] = useState(0);
8
9  const updateCount = () => {
10    timer = setInterval(() => {
11      setCount((prevCount) => prevCount + 1);
12    }, 1000);
13
14    if (count === 3) clearInterval(timer);
15  };
16
17  const origCount = () => {
18    clearInterval(timer);
19    setCount((count) => 0);
20  };
21
22  return (
23    <div className="App">
24      <div className="title">Image Rotate</div>
25      <div onMouseOver={updateCount} onMouseOut={origCount}>
26        <img src={images[count].source} alt={images.name} />
27        <p>count is: {count}</p>
28      </div>
29    </div>
30  );
31}
32setCount((prevCount) => prevCount === images.length - 1 ? 0 : prevCount + 1);
33

This will do setCount(0) if we're on the last image—otherwise, it will do setCount(prevCount + 1).

A faster (and potentially more readable) way of doing this would be:

1import React, { useState, useEffect } from "react";
2import { images } from "./Data";
3import "./styles.css";
4
5export default function App() {
6  let timer;
7  const [count, setCount] = useState(0);
8
9  const updateCount = () => {
10    timer = setInterval(() => {
11      setCount((prevCount) => prevCount + 1);
12    }, 1000);
13
14    if (count === 3) clearInterval(timer);
15  };
16
17  const origCount = () => {
18    clearInterval(timer);
19    setCount((count) => 0);
20  };
21
22  return (
23    <div className="App">
24      <div className="title">Image Rotate</div>
25      <div onMouseOver={updateCount} onMouseOut={origCount}>
26        <img src={images[count].source} alt={images.name} />
27        <p>count is: {count}</p>
28      </div>
29    </div>
30  );
31}
32setCount((prevCount) => prevCount === images.length - 1 ? 0 : prevCount + 1);
33setCount((prevCount) => (prevCount + 1) % images.length);
34

Source https://stackoverflow.com/questions/69485219

QUESTION

Helmet expects a string as a child of <head>. Did you forget to wrap your children in braces

Asked 2021-Dec-22 at 19:36

Hi I know this is probably a stupid question but what does this error mean in relation to my app.js file? It didn't appear until I ran my local server. Was working fine prior.

1Error: Helmet expects a string as a child of <head>. Did you forget to wrap your children in braces? ( <head>{``}</head> ) Refer to our API for more information.
2
What it's pointing at is this specific line of code in my App.js:
1Error: Helmet expects a string as a child of <head>. Did you forget to wrap your children in braces? ( <head>{``}</head> ) Refer to our API for more information.
2ReactDOM.render(<App/>,document.getElementById('root'));
3

Is it pointing to the pages I've made and an improper Helmet element? I've been browsing through the code trying to figure this one out. Any help or insight is appreciated.

Edit~Here is my homepage:
1Error: Helmet expects a string as a child of <head>. Did you forget to wrap your children in braces? ( <head>{``}</head> ) Refer to our API for more information.
2ReactDOM.render(<App/>,document.getElementById('root'));
3import React from "react";  
4import {Link} from "react-router-dom";
5import { Helmet } from 'react-helmet';
6import {Carousel} from 'react-bootstrap';                                                        
7import 'bootstrap/dist/css/bootstrap.min.css';
8import slide1 from "../images/websliders1.png";
9import slide2 from "../images/websliders2.png";
10import slide3 from "../images/websliders3.png";
11import Layout from "../components/layout";
12import "../components/scss/index.scss";
13
14const Home = () => {
15    return(
16        <div style={{ width: `100%`, marginBottom: `0`, height:'auto', overflow:'hidden', zIndex:'1'}}>
17            <Layout>
18                <Helmet>
19                    <head>
20                        <title> Home | BradGradGraphics</title>
21                        <meta property="og:description" content="Freelancing service that offers graphic design, illustration, and some small web design work digitally" />
22                        <meta property="og:url"   content="https://bradgrad.graphics" />
23                        <meta property="og:type"  content="website" />
24                        <meta property="og:title" content="BradGradGraphics" />
25                        <meta property="og:image" content="../images/SplashPgConc.png" />
26                    </head>
27                </Helmet>
28                <Carousel >
29                    <Carousel.Item>
30                        <Link to='/gallery'>
31                            <img className="d-block w-100 img-responsive"
32                            src={slide1}
33                            alt="First Slide"
34                            
35                            />
36                            
37                            <Carousel.Caption>
38                                <h1 style={{color:'black'}}>My Illustrations</h1>
39                                <p style={{color:'black'}}>Check them out!</p>
40                            </Carousel.Caption>
41                        </Link>
42                    </Carousel.Item>
43                    <Carousel.Item>
44                        <a href='https://blog.bradgrad.graphics/'>
45                            <img className="d-block w-100"
46                            src={slide2}
47                            alt="Second Slide"
48                            />
49                            
50                            <Carousel.Caption>
51                                <h1 style={{color:'black'}}>Blog</h1>
52                                <p style={{color:'black'}}>Give it a read!</p>
53                            </Carousel.Caption>
54                         </a>
55                    </Carousel.Item>
56                    <Carousel.Item>
57                        {/* <Link to='#'> */}
58                            <img className="d-block w-100"
59                            src={slide3}
60                            alt="Third Slide"
61                            />
62                            <Carousel.Caption>
63                                <h1 style={{color:'black'}}>Comics Incoming!</h1>
64                                <p style={{color:'black'}}>Stay Tuned!</p>
65                            </Carousel.Caption>
66                        {/* </Link> */}
67                    </Carousel.Item>
68                </Carousel>
69            </Layout>
70        </div>
71    );
72};
73export default Home;
74

ANSWER

Answered 2021-Dec-22 at 19:36

You don't need to have a <head> inside your <Helmet> as it already did for you

So remove the <head> tag:

1Error: Helmet expects a string as a child of &lt;head&gt;. Did you forget to wrap your children in braces? ( &lt;head&gt;{``}&lt;/head&gt; ) Refer to our API for more information.
2ReactDOM.render(&lt;App/&gt;,document.getElementById('root'));
3import React from &quot;react&quot;;  
4import {Link} from &quot;react-router-dom&quot;;
5import { Helmet } from 'react-helmet';
6import {Carousel} from 'react-bootstrap';                                                        
7import 'bootstrap/dist/css/bootstrap.min.css';
8import slide1 from &quot;../images/websliders1.png&quot;;
9import slide2 from &quot;../images/websliders2.png&quot;;
10import slide3 from &quot;../images/websliders3.png&quot;;
11import Layout from &quot;../components/layout&quot;;
12import &quot;../components/scss/index.scss&quot;;
13
14const Home = () =&gt; {
15    return(
16        &lt;div style={{ width: `100%`, marginBottom: `0`, height:'auto', overflow:'hidden', zIndex:'1'}}&gt;
17            &lt;Layout&gt;
18                &lt;Helmet&gt;
19                    &lt;head&gt;
20                        &lt;title&gt; Home | BradGradGraphics&lt;/title&gt;
21                        &lt;meta property=&quot;og:description&quot; content=&quot;Freelancing service that offers graphic design, illustration, and some small web design work digitally&quot; /&gt;
22                        &lt;meta property=&quot;og:url&quot;   content=&quot;https://bradgrad.graphics&quot; /&gt;
23                        &lt;meta property=&quot;og:type&quot;  content=&quot;website&quot; /&gt;
24                        &lt;meta property=&quot;og:title&quot; content=&quot;BradGradGraphics&quot; /&gt;
25                        &lt;meta property=&quot;og:image&quot; content=&quot;../images/SplashPgConc.png&quot; /&gt;
26                    &lt;/head&gt;
27                &lt;/Helmet&gt;
28                &lt;Carousel &gt;
29                    &lt;Carousel.Item&gt;
30                        &lt;Link to='/gallery'&gt;
31                            &lt;img className=&quot;d-block w-100 img-responsive&quot;
32                            src={slide1}
33                            alt=&quot;First Slide&quot;
34                            
35                            /&gt;
36                            
37                            &lt;Carousel.Caption&gt;
38                                &lt;h1 style={{color:'black'}}&gt;My Illustrations&lt;/h1&gt;
39                                &lt;p style={{color:'black'}}&gt;Check them out!&lt;/p&gt;
40                            &lt;/Carousel.Caption&gt;
41                        &lt;/Link&gt;
42                    &lt;/Carousel.Item&gt;
43                    &lt;Carousel.Item&gt;
44                        &lt;a href='https://blog.bradgrad.graphics/'&gt;
45                            &lt;img className=&quot;d-block w-100&quot;
46                            src={slide2}
47                            alt=&quot;Second Slide&quot;
48                            /&gt;
49                            
50                            &lt;Carousel.Caption&gt;
51                                &lt;h1 style={{color:'black'}}&gt;Blog&lt;/h1&gt;
52                                &lt;p style={{color:'black'}}&gt;Give it a read!&lt;/p&gt;
53                            &lt;/Carousel.Caption&gt;
54                         &lt;/a&gt;
55                    &lt;/Carousel.Item&gt;
56                    &lt;Carousel.Item&gt;
57                        {/* &lt;Link to='#'&gt; */}
58                            &lt;img className=&quot;d-block w-100&quot;
59                            src={slide3}
60                            alt=&quot;Third Slide&quot;
61                            /&gt;
62                            &lt;Carousel.Caption&gt;
63                                &lt;h1 style={{color:'black'}}&gt;Comics Incoming!&lt;/h1&gt;
64                                &lt;p style={{color:'black'}}&gt;Stay Tuned!&lt;/p&gt;
65                            &lt;/Carousel.Caption&gt;
66                        {/* &lt;/Link&gt; */}
67                    &lt;/Carousel.Item&gt;
68                &lt;/Carousel&gt;
69            &lt;/Layout&gt;
70        &lt;/div&gt;
71    );
72};
73export default Home;
74&lt;Helmet&gt;
75  &lt;title&gt; Home | BradGradGraphics&lt;/title&gt;
76  &lt;meta
77    property=&quot;og:description&quot;
78    content=&quot;Freelancing service that offers graphic design, illustration, and some small web design work digitally&quot;
79  /&gt;
80  &lt;meta property=&quot;og:url&quot; content=&quot;https://bradgrad.graphics&quot; /&gt;
81  &lt;meta property=&quot;og:type&quot; content=&quot;website&quot; /&gt;
82  &lt;meta property=&quot;og:title&quot; content=&quot;BradGradGraphics&quot; /&gt;
83  &lt;meta property=&quot;og:image&quot; content=&quot;../images/SplashPgConc.png&quot; /&gt;
84&lt;/Helmet&gt;;
85

Source https://stackoverflow.com/questions/69059838

QUESTION

Separate border for each slider

Asked 2021-Dec-15 at 18:12

On my page, I can have several identical sliders with different images, each has a preview image and the main image that changes. when you click on the preview image, it has a blue border. This is how it looks

1$('.img-to-select__item').click(function() {
2  let currentSelection = $(this);
3
4  $('.img-to-select__item').removeClass('selected');
5  $(currentSelection).addClass('selected');
6  let index = $(currentSelection).index();
7
8  $(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
9  $(currentSelection).closest('.custom-carousel').find('.main-image').eq(index).show();
10  $(currentSelection).closest('.img-to-select')
11    .prevAll('.custom-carousel__title').find('span')
12    .html($(currentSelection).children('img').attr('data-title'));
13});
1$('.img-to-select__item').click(function() {
2  let currentSelection = $(this);
3
4  $('.img-to-select__item').removeClass('selected');
5  $(currentSelection).addClass('selected');
6  let index = $(currentSelection).index();
7
8  $(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
9  $(currentSelection).closest('.custom-carousel').find('.main-image').eq(index).show();
10  $(currentSelection).closest('.img-to-select')
11    .prevAll('.custom-carousel__title').find('span')
12    .html($(currentSelection).children('img').attr('data-title'));
13});.custom-carousel {
14  text-align: center;
15}
16
17.main-image&gt;img {
18  width: 50px;
19}
20
21.img-to-select&gt;.img-to-select__item&gt;img {
22  height: 30px;
23  width: 30px;
24}
25
26.img-to-select {
27  overflow: hidden;
28  display: flex;
29  justify-content: space-around;
30}
31
32.img-to-select&gt;.img-to-select__item {
33  display: flex;
34  justify-content: space-around;
35}
36
37.img-to-select&gt;.img-to-select__item.selected {
38  border: 2px solid blue;
39  border-radius: 4px;
40}
1$('.img-to-select__item').click(function() {
2  let currentSelection = $(this);
3
4  $('.img-to-select__item').removeClass('selected');
5  $(currentSelection).addClass('selected');
6  let index = $(currentSelection).index();
7
8  $(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
9  $(currentSelection).closest('.custom-carousel').find('.main-image').eq(index).show();
10  $(currentSelection).closest('.img-to-select')
11    .prevAll('.custom-carousel__title').find('span')
12    .html($(currentSelection).children('img').attr('data-title'));
13});.custom-carousel {
14  text-align: center;
15}
16
17.main-image&gt;img {
18  width: 50px;
19}
20
21.img-to-select&gt;.img-to-select__item&gt;img {
22  height: 30px;
23  width: 30px;
24}
25
26.img-to-select {
27  overflow: hidden;
28  display: flex;
29  justify-content: space-around;
30}
31
32.img-to-select&gt;.img-to-select__item {
33  display: flex;
34  justify-content: space-around;
35}
36
37.img-to-select&gt;.img-to-select__item.selected {
38  border: 2px solid blue;
39  border-radius: 4px;
40}&lt;div class="custom-carousel-section"&gt;
41  &lt;div class="custom-container"&gt;
42    &lt;div class="custom-carousel"&gt;
43      &lt;div class="custom-carousel__title"&gt;
44        &lt;span&gt;Title
45        &lt;/span&gt;
46      &lt;/div&gt;
47      &lt;div class="main-image" style="display: block"&gt;
48        &lt;picture&gt;
49          &lt;source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" media="(max-width: 576px)" data-title="image-a"&gt;
50          &lt;source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a"&gt;
51          &lt;img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a"&gt;
52        &lt;/picture&gt;
53      &lt;/div&gt;
54
55      &lt;div class="main-image" style="display: none"&gt;
56        &lt;picture&gt;
57          &lt;source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" media="(max-width: 576px)" data-title="image-b"&gt;
58          &lt;source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b"&gt;
59          &lt;img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b"&gt;
60        &lt;/picture&gt;
61      &lt;/div&gt;
62
63      &lt;div class="main-image" style="display: none"&gt;
64        &lt;picture&gt;
65          &lt;source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" media="(max-width: 576px)" data-title="image-c"&gt;
66          &lt;source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c"&gt;
67          &lt;img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c"&gt;
68        &lt;/picture&gt;
69      &lt;/div&gt;
70
71      &lt;div class="main-image" style="display: none"&gt;
72        &lt;picture&gt;
73          &lt;source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" media="(max-width: 576px)" data-title="image-d"&gt;
74          &lt;source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d"&gt;
75          &lt;img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d"&gt;
76        &lt;/picture&gt;
77      &lt;/div&gt;
78      &lt;div class="img-to-select"&gt;
79        &lt;div class="img-to-select__item selected"&gt;
80          &lt;img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a"&gt;
81        &lt;/div&gt;
82        &lt;div class="img-to-select__item"&gt;
83          &lt;img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b"&gt;
84        &lt;/div&gt;
85        &lt;div class="img-to-select__item"&gt;
86          &lt;img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c"&gt;
87        &lt;/div&gt;
88        &lt;div class="img-to-select__item"&gt;
89          &lt;img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d"&gt;
90        &lt;/div&gt;
91      &lt;/div&gt;
92    &lt;/div&gt;
93  &lt;/div&gt;
94&lt;/div&gt;
95
96&lt;hr&gt;
97
98&lt;div class="custom-carousel-section"&gt;
99  &lt;div class="custom-container"&gt;
100    &lt;div class="custom-carousel"&gt;
101      &lt;div class="custom-carousel__title"&gt;
102        &lt;span&gt;Title
103        &lt;/span&gt;
104      &lt;/div&gt;
105      &lt;div class="main-image" style="display: block"&gt;
106        &lt;picture&gt;
107          &lt;source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" media="(max-width: 576px)" data-title="image-a"&gt;
108          &lt;source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a"&gt;
109          &lt;img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a"&gt;
110        &lt;/picture&gt;
111      &lt;/div&gt;
112
113      &lt;div class="main-image" style="display: none"&gt;
114        &lt;picture&gt;
115          &lt;source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" media="(max-width: 576px)" data-title="image-b"&gt;
116          &lt;source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b"&gt;
117          &lt;img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b"&gt;
118        &lt;/picture&gt;
119      &lt;/div&gt;
120
121      &lt;div class="main-image" style="display: none"&gt;
122        &lt;picture&gt;
123          &lt;source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" media="(max-width: 576px)" data-title="image-c"&gt;
124          &lt;source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c"&gt;
125          &lt;img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c"&gt;
126        &lt;/picture&gt;
127      &lt;/div&gt;
128
129      &lt;div class="main-image" style="display: none"&gt;
130        &lt;picture&gt;
131          &lt;source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" media="(max-width: 576px)" data-title="image-d"&gt;
132          &lt;source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d"&gt;
133          &lt;img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d"&gt;
134        &lt;/picture&gt;
135      &lt;/div&gt;
136      &lt;div class="img-to-select"&gt;
137        &lt;div class="img-to-select__item selected"&gt;
138          &lt;img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" alt="" data-title="image-a"&gt;
139        &lt;/div&gt;
140        &lt;div class="img-to-select__item"&gt;
141          &lt;img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-b"&gt;
142        &lt;/div&gt;
143        &lt;div class="img-to-select__item"&gt;
144          &lt;img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-c"&gt;
145        &lt;/div&gt;
146        &lt;div class="img-to-select__item"&gt;
147          &lt;img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" data-title="image-d"&gt;
148        &lt;/div&gt;
149      &lt;/div&gt;
150    &lt;/div&gt;
151  &lt;/div&gt;
152&lt;/div&gt;
153
154&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

The problem is that this blue border is the same for all sliders. Is there any way to make each slider have a separate border?

ANSWER

Answered 2021-Dec-15 at 18:12

When you are removing the class .selected, you should find .img-to-select__item on parent element. So that it will have boundary instead of entire page.

So basically check $(this).parent().find('.img-to-select__item') to remove the selected class.

See the Snippet below:

1$('.img-to-select__item').click(function() {
2  let currentSelection = $(this);
3
4  $('.img-to-select__item').removeClass('selected');
5  $(currentSelection).addClass('selected');
6  let index = $(currentSelection).index();
7
8  $(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
9  $(currentSelection).closest('.custom-carousel').find('.main-image').eq(index).show();
10  $(currentSelection).closest('.img-to-select')
11    .prevAll('.custom-carousel__title').find('span')
12    .html($(currentSelection).children('img').attr('data-title'));
13});.custom-carousel {
14  text-align: center;
15}
16
17.main-image&gt;img {
18  width: 50px;
19}
20
21.img-to-select&gt;.img-to-select__item&gt;img {
22  height: 30px;
23  width: 30px;
24}
25
26.img-to-select {
27  overflow: hidden;
28  display: flex;
29  justify-content: space-around;
30}
31
32.img-to-select&gt;.img-to-select__item {
33  display: flex;
34  justify-content: space-around;
35}
36
37.img-to-select&gt;.img-to-select__item.selected {
38  border: 2px solid blue;
39  border-radius: 4px;
40}&lt;div class="custom-carousel-section"&gt;
41  &lt;div class="custom-container"&gt;
42    &lt;div class="custom-carousel"&gt;
43      &lt;div class="custom-carousel__title"&gt;
44        &lt;span&gt;Title
45        &lt;/span&gt;
46      &lt;/div&gt;
47      &lt;div class="main-image" style="display: block"&gt;
48        &lt;picture&gt;
49          &lt;source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" media="(max-width: 576px)" data-title="image-a"&gt;
50          &lt;source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a"&gt;
51          &lt;img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a"&gt;
52        &lt;/picture&gt;
53      &lt;/div&gt;
54
55      &lt;div class="main-image" style="display: none"&gt;
56        &lt;picture&gt;
57          &lt;source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" media="(max-width: 576px)" data-title="image-b"&gt;
58          &lt;source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b"&gt;
59          &lt;img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b"&gt;
60        &lt;/picture&gt;
61      &lt;/div&gt;
62
63      &lt;div class="main-image" style="display: none"&gt;
64        &lt;picture&gt;
65          &lt;source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" media="(max-width: 576px)" data-title="image-c"&gt;
66          &lt;source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c"&gt;
67          &lt;img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c"&gt;
68        &lt;/picture&gt;
69      &lt;/div&gt;
70
71      &lt;div class="main-image" style="display: none"&gt;
72        &lt;picture&gt;
73          &lt;source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" media="(max-width: 576px)" data-title="image-d"&gt;
74          &lt;source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d"&gt;
75          &lt;img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d"&gt;
76        &lt;/picture&gt;
77      &lt;/div&gt;
78      &lt;div class="img-to-select"&gt;
79        &lt;div class="img-to-select__item selected"&gt;
80          &lt;img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a"&gt;
81        &lt;/div&gt;
82        &lt;div class="img-to-select__item"&gt;
83          &lt;img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b"&gt;
84        &lt;/div&gt;
85        &lt;div class="img-to-select__item"&gt;
86          &lt;img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c"&gt;
87        &lt;/div&gt;
88        &lt;div class="img-to-select__item"&gt;
89          &lt;img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d"&gt;
90        &lt;/div&gt;
91      &lt;/div&gt;
92    &lt;/div&gt;
93  &lt;/div&gt;
94&lt;/div&gt;
95
96&lt;hr&gt;
97
98&lt;div class="custom-carousel-section"&gt;
99  &lt;div class="custom-container"&gt;
100    &lt;div class="custom-carousel"&gt;
101      &lt;div class="custom-carousel__title"&gt;
102        &lt;span&gt;Title
103        &lt;/span&gt;
104      &lt;/div&gt;
105      &lt;div class="main-image" style="display: block"&gt;
106        &lt;picture&gt;
107          &lt;source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" media="(max-width: 576px)" data-title="image-a"&gt;
108          &lt;source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a"&gt;
109          &lt;img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a"&gt;
110        &lt;/picture&gt;
111      &lt;/div&gt;
112
113      &lt;div class="main-image" style="display: none"&gt;
114        &lt;picture&gt;
115          &lt;source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" media="(max-width: 576px)" data-title="image-b"&gt;
116          &lt;source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b"&gt;
117          &lt;img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b"&gt;
118        &lt;/picture&gt;
119      &lt;/div&gt;
120
121      &lt;div class="main-image" style="display: none"&gt;
122        &lt;picture&gt;
123          &lt;source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" media="(max-width: 576px)" data-title="image-c"&gt;
124          &lt;source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c"&gt;
125          &lt;img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c"&gt;
126        &lt;/picture&gt;
127      &lt;/div&gt;
128
129      &lt;div class="main-image" style="display: none"&gt;
130        &lt;picture&gt;
131          &lt;source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" media="(max-width: 576px)" data-title="image-d"&gt;
132          &lt;source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d"&gt;
133          &lt;img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d"&gt;
134        &lt;/picture&gt;
135      &lt;/div&gt;
136      &lt;div class="img-to-select"&gt;
137        &lt;div class="img-to-select__item selected"&gt;
138          &lt;img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" alt="" data-title="image-a"&gt;
139        &lt;/div&gt;
140        &lt;div class="img-to-select__item"&gt;
141          &lt;img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-b"&gt;
142        &lt;/div&gt;
143        &lt;div class="img-to-select__item"&gt;
144          &lt;img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-c"&gt;
145        &lt;/div&gt;
146        &lt;div class="img-to-select__item"&gt;
147          &lt;img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" data-title="image-d"&gt;
148        &lt;/div&gt;
149      &lt;/div&gt;
150    &lt;/div&gt;
151  &lt;/div&gt;
152&lt;/div&gt;
153
154&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;$('.img-to-select__item').click(function() {
155  let currentSelection = $(this);
156
157  $(this).parent().find('.img-to-select__item').removeClass('selected');
158  $(currentSelection).addClass('selected');
159  let index = $(currentSelection).index();
160
161  $(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
162  $(currentSelection).closest('.custom-carousel').find('.main-image').eq(index).show();
163  $(currentSelection).closest('.img-to-select')
164    .prevAll('.custom-carousel__title').find('span')
165    .html($(currentSelection).children('img').attr('data-title'));
166});
1$('.img-to-select__item').click(function() {
2  let currentSelection = $(this);
3
4  $('.img-to-select__item').removeClass('selected');
5  $(currentSelection).addClass('selected');
6  let index = $(currentSelection).index();
7
8  $(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
9  $(currentSelection).closest('.custom-carousel').find('.main-image').eq(index).show();
10  $(currentSelection).closest('.img-to-select')
11    .prevAll('.custom-carousel__title').find('span')
12    .html($(currentSelection).children('img').attr('data-title'));
13});.custom-carousel {
14  text-align: center;
15}
16
17.main-image&gt;img {
18  width: 50px;
19}
20
21.img-to-select&gt;.img-to-select__item&gt;img {
22  height: 30px;
23  width: 30px;
24}
25
26.img-to-select {
27  overflow: hidden;
28  display: flex;
29  justify-content: space-around;
30}
31
32.img-to-select&gt;.img-to-select__item {
33  display: flex;
34  justify-content: space-around;
35}
36
37.img-to-select&gt;.img-to-select__item.selected {
38  border: 2px solid blue;
39  border-radius: 4px;
40}&lt;div class="custom-carousel-section"&gt;
41  &lt;div class="custom-container"&gt;
42    &lt;div class="custom-carousel"&gt;
43      &lt;div class="custom-carousel__title"&gt;
44        &lt;span&gt;Title
45        &lt;/span&gt;
46      &lt;/div&gt;
47      &lt;div class="main-image" style="display: block"&gt;
48        &lt;picture&gt;
49          &lt;source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" media="(max-width: 576px)" data-title="image-a"&gt;
50          &lt;source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a"&gt;
51          &lt;img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a"&gt;
52        &lt;/picture&gt;
53      &lt;/div&gt;
54
55      &lt;div class="main-image" style="display: none"&gt;
56        &lt;picture&gt;
57          &lt;source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" media="(max-width: 576px)" data-title="image-b"&gt;
58          &lt;source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b"&gt;
59          &lt;img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b"&gt;
60        &lt;/picture&gt;
61      &lt;/div&gt;
62
63      &lt;div class="main-image" style="display: none"&gt;
64        &lt;picture&gt;
65          &lt;source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" media="(max-width: 576px)" data-title="image-c"&gt;
66          &lt;source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c"&gt;
67          &lt;img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c"&gt;
68        &lt;/picture&gt;
69      &lt;/div&gt;
70
71      &lt;div class="main-image" style="display: none"&gt;
72        &lt;picture&gt;
73          &lt;source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" media="(max-width: 576px)" data-title="image-d"&gt;
74          &lt;source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d"&gt;
75          &lt;img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d"&gt;
76        &lt;/picture&gt;
77      &lt;/div&gt;
78      &lt;div class="img-to-select"&gt;
79        &lt;div class="img-to-select__item selected"&gt;
80          &lt;img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a"&gt;
81        &lt;/div&gt;
82        &lt;div class="img-to-select__item"&gt;
83          &lt;img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b"&gt;
84        &lt;/div&gt;
85        &lt;div class="img-to-select__item"&gt;
86          &lt;img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c"&gt;
87        &lt;/div&gt;
88        &lt;div class="img-to-select__item"&gt;
89          &lt;img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d"&gt;
90        &lt;/div&gt;
91      &lt;/div&gt;
92    &lt;/div&gt;
93  &lt;/div&gt;
94&lt;/div&gt;
95
96&lt;hr&gt;
97
98&lt;div class="custom-carousel-section"&gt;
99  &lt;div class="custom-container"&gt;
100    &lt;div class="custom-carousel"&gt;
101      &lt;div class="custom-carousel__title"&gt;
102        &lt;span&gt;Title
103        &lt;/span&gt;
104      &lt;/div&gt;
105      &lt;div class="main-image" style="display: block"&gt;
106        &lt;picture&gt;
107          &lt;source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" media="(max-width: 576px)" data-title="image-a"&gt;
108          &lt;source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a"&gt;
109          &lt;img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a"&gt;
110        &lt;/picture&gt;
111      &lt;/div&gt;
112
113      &lt;div class="main-image" style="display: none"&gt;
114        &lt;picture&gt;
115          &lt;source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" media="(max-width: 576px)" data-title="image-b"&gt;
116          &lt;source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b"&gt;
117          &lt;img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b"&gt;
118        &lt;/picture&gt;
119      &lt;/div&gt;
120
121      &lt;div class="main-image" style="display: none"&gt;
122        &lt;picture&gt;
123          &lt;source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" media="(max-width: 576px)" data-title="image-c"&gt;
124          &lt;source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c"&gt;
125          &lt;img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c"&gt;
126        &lt;/picture&gt;
127      &lt;/div&gt;
128
129      &lt;div class="main-image" style="display: none"&gt;
130        &lt;picture&gt;
131          &lt;source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" media="(max-width: 576px)" data-title="image-d"&gt;
132          &lt;source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d"&gt;
133          &lt;img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d"&gt;
134        &lt;/picture&gt;
135      &lt;/div&gt;
136      &lt;div class="img-to-select"&gt;
137        &lt;div class="img-to-select__item selected"&gt;
138          &lt;img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" alt="" data-title="image-a"&gt;
139        &lt;/div&gt;
140        &lt;div class="img-to-select__item"&gt;
141          &lt;img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-b"&gt;
142        &lt;/div&gt;
143        &lt;div class="img-to-select__item"&gt;
144          &lt;img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-c"&gt;
145        &lt;/div&gt;
146        &lt;div class="img-to-select__item"&gt;
147          &lt;img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" data-title="image-d"&gt;
148        &lt;/div&gt;
149      &lt;/div&gt;
150    &lt;/div&gt;
151  &lt;/div&gt;
152&lt;/div&gt;
153
154&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;$('.img-to-select__item').click(function() {
155  let currentSelection = $(this);
156
157  $(this).parent().find('.img-to-select__item').removeClass('selected');
158  $(currentSelection).addClass('selected');
159  let index = $(currentSelection).index();
160
161  $(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
162  $(currentSelection).closest('.custom-carousel').find('.main-image').eq(index).show();
163  $(currentSelection).closest('.img-to-select')
164    .prevAll('.custom-carousel__title').find('span')
165    .html($(currentSelection).children('img').attr('data-title'));
166});.custom-carousel {
167  text-align: center;
168}
169
170.main-image&gt;img {
171  width: 50px;
172}
173
174.img-to-select&gt;.img-to-select__item&gt;img {
175  height: 30px;
176  width: 30px;
177}
178
179.img-to-select {
180  overflow: hidden;
181  display: flex;
182  justify-content: space-around;
183}
184
185.img-to-select&gt;.img-to-select__item {
186  display: flex;
187  justify-content: space-around;
188}
189
190.img-to-select&gt;.img-to-select__item.selected {
191  border: 2px solid blue;
192  border-radius: 4px;
193}
1$('.img-to-select__item').click(function() {
2  let currentSelection = $(this);
3
4  $('.img-to-select__item').removeClass('selected');
5  $(currentSelection).addClass('selected');
6  let index = $(currentSelection).index();
7
8  $(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
9  $(currentSelection).closest('.custom-carousel').find('.main-image').eq(index).show();
10  $(currentSelection).closest('.img-to-select')
11    .prevAll('.custom-carousel__title').find('span')
12    .html($(currentSelection).children('img').attr('data-title'));
13});.custom-carousel {
14  text-align: center;
15}
16
17.main-image&gt;img {
18  width: 50px;
19}
20
21.img-to-select&gt;.img-to-select__item&gt;img {
22  height: 30px;
23  width: 30px;
24}
25
26.img-to-select {
27  overflow: hidden;
28  display: flex;
29  justify-content: space-around;
30}
31
32.img-to-select&gt;.img-to-select__item {
33  display: flex;
34  justify-content: space-around;
35}
36
37.img-to-select&gt;.img-to-select__item.selected {
38  border: 2px solid blue;
39  border-radius: 4px;
40}&lt;div class="custom-carousel-section"&gt;
41  &lt;div class="custom-container"&gt;
42    &lt;div class="custom-carousel"&gt;
43      &lt;div class="custom-carousel__title"&gt;
44        &lt;span&gt;Title
45        &lt;/span&gt;
46      &lt;/div&gt;
47      &lt;div class="main-image" style="display: block"&gt;
48        &lt;picture&gt;
49          &lt;source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" media="(max-width: 576px)" data-title="image-a"&gt;
50          &lt;source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a"&gt;
51          &lt;img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a"&gt;
52        &lt;/picture&gt;
53      &lt;/div&gt;
54
55      &lt;div class="main-image" style="display: none"&gt;
56        &lt;picture&gt;
57          &lt;source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" media="(max-width: 576px)" data-title="image-b"&gt;
58          &lt;source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b"&gt;
59          &lt;img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b"&gt;
60        &lt;/picture&gt;
61      &lt;/div&gt;
62
63      &lt;div class="main-image" style="display: none"&gt;
64        &lt;picture&gt;
65          &lt;source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" media="(max-width: 576px)" data-title="image-c"&gt;
66          &lt;source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c"&gt;
67          &lt;img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c"&gt;
68        &lt;/picture&gt;
69      &lt;/div&gt;
70
71      &lt;div class="main-image" style="display: none"&gt;
72        &lt;picture&gt;
73          &lt;source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" media="(max-width: 576px)" data-title="image-d"&gt;
74          &lt;source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d"&gt;
75          &lt;img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d"&gt;
76        &lt;/picture&gt;
77      &lt;/div&gt;
78      &lt;div class="img-to-select"&gt;
79        &lt;div class="img-to-select__item selected"&gt;
80          &lt;img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a"&gt;
81        &lt;/div&gt;
82        &lt;div class="img-to-select__item"&gt;
83          &lt;img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b"&gt;
84        &lt;/div&gt;
85        &lt;div class="img-to-select__item"&gt;
86          &lt;img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c"&gt;
87        &lt;/div&gt;
88        &lt;div class="img-to-select__item"&gt;
89          &lt;img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d"&gt;
90        &lt;/div&gt;
91      &lt;/div&gt;
92    &lt;/div&gt;
93  &lt;/div&gt;
94&lt;/div&gt;
95
96&lt;hr&gt;
97
98&lt;div class="custom-carousel-section"&gt;
99  &lt;div class="custom-container"&gt;
100    &lt;div class="custom-carousel"&gt;
101      &lt;div class="custom-carousel__title"&gt;
102        &lt;span&gt;Title
103        &lt;/span&gt;
104      &lt;/div&gt;
105      &lt;div class="main-image" style="display: block"&gt;
106        &lt;picture&gt;
107          &lt;source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" media="(max-width: 576px)" data-title="image-a"&gt;
108          &lt;source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a"&gt;
109          &lt;img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a"&gt;
110        &lt;/picture&gt;
111      &lt;/div&gt;
112
113      &lt;div class="main-image" style="display: none"&gt;
114        &lt;picture&gt;
115          &lt;source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" media="(max-width: 576px)" data-title="image-b"&gt;
116          &lt;source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b"&gt;
117          &lt;img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b"&gt;
118        &lt;/picture&gt;
119      &lt;/div&gt;
120
121      &lt;div class="main-image" style="display: none"&gt;
122        &lt;picture&gt;
123          &lt;source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" media="(max-width: 576px)" data-title="image-c"&gt;
124          &lt;source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c"&gt;
125          &lt;img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c"&gt;
126        &lt;/picture&gt;
127      &lt;/div&gt;
128
129      &lt;div class="main-image" style="display: none"&gt;
130        &lt;picture&gt;
131          &lt;source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" media="(max-width: 576px)" data-title="image-d"&gt;
132          &lt;source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d"&gt;
133          &lt;img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d"&gt;
134        &lt;/picture&gt;
135      &lt;/div&gt;
136      &lt;div class="img-to-select"&gt;
137        &lt;div class="img-to-select__item selected"&gt;
138          &lt;img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" alt="" data-title="image-a"&gt;
139        &lt;/div&gt;
140        &lt;div class="img-to-select__item"&gt;
141          &lt;img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-b"&gt;
142        &lt;/div&gt;
143        &lt;div class="img-to-select__item"&gt;
144          &lt;img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-c"&gt;
145        &lt;/div&gt;
146        &lt;div class="img-to-select__item"&gt;
147          &lt;img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" data-title="image-d"&gt;
148        &lt;/div&gt;
149      &lt;/div&gt;
150    &lt;/div&gt;
151  &lt;/div&gt;
152&lt;/div&gt;
153
154&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;$('.img-to-select__item').click(function() {
155  let currentSelection = $(this);
156
157  $(this).parent().find('.img-to-select__item').removeClass('selected');
158  $(currentSelection).addClass('selected');
159  let index = $(currentSelection).index();
160
161  $(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
162  $(currentSelection).closest('.custom-carousel').find('.main-image').eq(index).show();
163  $(currentSelection).closest('.img-to-select')
164    .prevAll('.custom-carousel__title').find('span')
165    .html($(currentSelection).children('img').attr('data-title'));
166});.custom-carousel {
167  text-align: center;
168}
169
170.main-image&gt;img {
171  width: 50px;
172}
173
174.img-to-select&gt;.img-to-select__item&gt;img {
175  height: 30px;
176  width: 30px;
177}
178
179.img-to-select {
180  overflow: hidden;
181  display: flex;
182  justify-content: space-around;
183}
184
185.img-to-select&gt;.img-to-select__item {
186  display: flex;
187  justify-content: space-around;
188}
189
190.img-to-select&gt;.img-to-select__item.selected {
191  border: 2px solid blue;
192  border-radius: 4px;
193}&lt;div class="custom-carousel-section"&gt;
194  &lt;div class="custom-container"&gt;
195    &lt;div class="custom-carousel"&gt;
196      &lt;div class="custom-carousel__title"&gt;
197        &lt;span&gt;Title
198        &lt;/span&gt;
199      &lt;/div&gt;
200      &lt;div class="main-image" style="display: block"&gt;
201        &lt;picture&gt;
202          &lt;source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" media="(max-width: 576px)" data-title="image-a"&gt;
203          &lt;source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a"&gt;
204          &lt;img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a"&gt;
205        &lt;/picture&gt;
206      &lt;/div&gt;
207
208      &lt;div class="main-image" style="display: none"&gt;
209        &lt;picture&gt;
210          &lt;source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" media="(max-width: 576px)" data-title="image-b"&gt;
211          &lt;source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b"&gt;
212          &lt;img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b"&gt;
213        &lt;/picture&gt;
214      &lt;/div&gt;
215
216      &lt;div class="main-image" style="display: none"&gt;
217        &lt;picture&gt;
218          &lt;source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" media="(max-width: 576px)" data-title="image-c"&gt;
219          &lt;source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c"&gt;
220          &lt;img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c"&gt;
221        &lt;/picture&gt;
222      &lt;/div&gt;
223
224      &lt;div class="main-image" style="display: none"&gt;
225        &lt;picture&gt;
226          &lt;source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" media="(max-width: 576px)" data-title="image-d"&gt;
227          &lt;source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d"&gt;
228          &lt;img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d"&gt;
229        &lt;/picture&gt;
230      &lt;/div&gt;
231      &lt;div class="img-to-select"&gt;
232        &lt;div class="img-to-select__item selected"&gt;
233          &lt;img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a"&gt;
234        &lt;/div&gt;
235        &lt;div class="img-to-select__item"&gt;
236          &lt;img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b"&gt;
237        &lt;/div&gt;
238        &lt;div class="img-to-select__item"&gt;
239          &lt;img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c"&gt;
240        &lt;/div&gt;
241        &lt;div class="img-to-select__item"&gt;
242          &lt;img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d"&gt;
243        &lt;/div&gt;
244      &lt;/div&gt;
245    &lt;/div&gt;
246  &lt;/div&gt;
247&lt;/div&gt;
248
249&lt;hr&gt;
250
251&lt;div class="custom-carousel-section"&gt;
252  &lt;div class="custom-container"&gt;
253    &lt;div class="custom-carousel"&gt;
254      &lt;div class="custom-carousel__title"&gt;
255        &lt;span&gt;Title
256        &lt;/span&gt;
257      &lt;/div&gt;
258      &lt;div class="main-image" style="display: block"&gt;
259        &lt;picture&gt;
260          &lt;source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" media="(max-width: 576px)" data-title="image-a"&gt;
261          &lt;source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a"&gt;
262          &lt;img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a"&gt;
263        &lt;/picture&gt;
264      &lt;/div&gt;
265
266      &lt;div class="main-image" style="display: none"&gt;
267        &lt;picture&gt;
268          &lt;source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" media="(max-width: 576px)" data-title="image-b"&gt;
269          &lt;source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b"&gt;
270          &lt;img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b"&gt;
271        &lt;/picture&gt;
272      &lt;/div&gt;
273
274      &lt;div class="main-image" style="display: none"&gt;
275        &lt;picture&gt;
276          &lt;source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" media="(max-width: 576px)" data-title="image-c"&gt;
277          &lt;source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c"&gt;
278          &lt;img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c"&gt;
279        &lt;/picture&gt;
280      &lt;/div&gt;
281
282      &lt;div class="main-image" style="display: none"&gt;
283        &lt;picture&gt;
284          &lt;source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" media="(max-width: 576px)" data-title="image-d"&gt;
285          &lt;source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d"&gt;
286          &lt;img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d"&gt;
287        &lt;/picture&gt;
288      &lt;/div&gt;
289      &lt;div class="img-to-select"&gt;
290        &lt;div class="img-to-select__item selected"&gt;
291          &lt;img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" alt="" data-title="image-a"&gt;
292        &lt;/div&gt;
293        &lt;div class="img-to-select__item"&gt;
294          &lt;img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-b"&gt;
295        &lt;/div&gt;
296        &lt;div class="img-to-select__item"&gt;
297          &lt;img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&amp;hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-c"&gt;
298        &lt;/div&gt;
299        &lt;div class="img-to-select__item"&gt;
300          &lt;img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&amp;grayscale&amp;hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" data-title="image-d"&gt;
301        &lt;/div&gt;
302      &lt;/div&gt;
303    &lt;/div&gt;
304  &lt;/div&gt;
305&lt;/div&gt;
306
307&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

Source https://stackoverflow.com/questions/70368331

Community Discussions contain sources that include Stack Exchange Network

Tutorials and Learning Resources in Carousel

Tutorials and Learning Resources are not available at this moment for Carousel

Share this Page

share link

Get latest updates on Carousel