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 
javascript
30789 MIT
Most modern mobile touch slider with hardware accelerated transitions
react-slick
by akiran javascript
10303 MIT
React carousel component
OwlCarousel2
by OwlCarousel2 javascript
7473 NOASSERTION
DEPRECATED jQuery Responsive Carousel.
flickity
by metafizzy javascript
6807
:leaves: Touch, responsive, flickable carousels
siema
by pawelgrzybek javascript
3334 NOASSERTION
Siema - Lightweight and simple carousel in pure JavaScript
react-image-gallery
by xiaolin javascript
3022 MIT
React carousel image gallery component with thumbnail support 🖼
nuka-carousel
by FormidableLabs javascript
2651 NOASSERTION
Pure React Carousel Component
react-awesome-slider
by rcaferati javascript
2392 MIT
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 javascript
2287 MIT
🌄 A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS
Trending New libraries in Carousel
react-native-reanimated-carousel
by dohooo typescript
674 MIT
Simple React Native carousel component,fully implemented using reanimated v2,support to iOS/Android/Web.（轮播图、swiper）
Why-Not-Image-Carousel
by ImaginativeShohag kotlin
223 Apache-2.0
Why Not use Image Carousel if you have lots of images to show!
vue3-carousel
by ismail9k typescript
184
Vue 3 carousel component
noodel-js
by zlu883 typescript
175 MIT
User interface for responsive, dynamic content trees
ui
by fancyapps javascript
165 NOASSERTION
JavaScript UI component library, includes the latest Fancybox
react-carousel
by Trendyol typescript
160 MIT
Lightweight carousel component for react
react-touch-drag-slider
by bushblade javascript
139
Touch and drag slider carousel component for React
vue-snap
by bartdominiak javascript
124 MIT
⚡️ Lightweight Carousel based on CSS Scroll Snapping (Vue 2/3)
react-native-movie-2.0-carousel
by catalinmiron javascript
94
react-native-movie-2.0-carousel
Top Authors in Carousel
1
4 Libraries
15
2
3 Libraries
279
3
3 Libraries
12
4
3 Libraries
20
5
3 Libraries
1988
6
2 Libraries
6845
7
2 Libraries
21
8
2 Libraries
15
9
2 Libraries
4
10
2 Libraries
39
1
4 Libraries
15
2
3 Libraries
279
3
3 Libraries
12
4
3 Libraries
20
5
3 Libraries
1988
6
2 Libraries
6845
7
2 Libraries
21
8
2 Libraries
15
9
2 Libraries
4
10
2 Libraries
39
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:23I 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.
7Upon 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
9I 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'
55package.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}
234ANSWER
Answered 2022-Mar-16 at 07:01First, 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
236That will change any git://github.com/ into https://github.com/.
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/
237You 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/
238That will change any git://github.com/ (unencrypted Git protocol) into git@github.com: (SSH URL).
QUESTION
Could not find a declaration file for module 'react-slick'
Asked 2022-Mar-20 at 16:031import Slider from "react-slick";
2i 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
18packagelock 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",
21it'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:03You 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
QUESTION
Setting styles for react-slick
Asked 2022-Mar-04 at 11:31I 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;
69So 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}
73However, 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:23I 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;
154Better solutions are still welcome!
QUESTION
java.lang.NoSuchMethodError: No virtual method setSkipClientToken(Z)V in class Lcom/facebook/GraphRequest;
Asked 2022-Feb-25 at 23:22It 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)
9gradle-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
14build.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}
89packages
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},
171ANSWER
Answered 2022-Feb-25 at 23:22We 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)'
172by
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'
173in 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
QUESTION
Error: export 'ɵCssKeyframesDriver' (imported as 'ɵCssKeyframesDriver') was not found in '@angular/animations/browser'
Asked 2022-Feb-25 at 06:57After 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)
4package.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}
75I 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:57As 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"
76this 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.
QUESTION
Expo SDK 44 upgrade ERROR - App.js: [BABEL]: Unexpected token '.'
Asked 2022-Jan-24 at 21:48I 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)
16Here 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}
23Here 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}
109Any help will be greatly appreciated.
ANSWER
Answered 2021-Dec-21 at 05:52can 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
QUESTION
Angular TSLint - Cannot find builder "@angular-devkit/build-angular:tslint"
Asked 2022-Jan-04 at 13:18When 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.
3My 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},
16My 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}
121ANSWER
Answered 2021-Nov-28 at 10:34From 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.
QUESTION
How do I loop an image carousel with React setState and setInterval?
Asked 2021-Dec-22 at 19:49I 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:
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}
32ANSWER
Answered 2021-Dec-22 at 19:49Your 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);
33This 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);
34QUESTION
Helmet expects a string as a child of <head>. Did you forget to wrap your children in braces
Asked 2021-Dec-22 at 19:36Hi 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'));
3Is 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.
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;
74ANSWER
Answered 2021-Dec-22 at 19:36You 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 <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<Helmet>
75 <title> Home | BradGradGraphics</title>
76 <meta
77 property="og:description"
78 content="Freelancing service that offers graphic design, illustration, and some small web design work digitally"
79 />
80 <meta property="og:url" content="https://bradgrad.graphics" />
81 <meta property="og:type" content="website" />
82 <meta property="og:title" content="BradGradGraphics" />
83 <meta property="og:image" content="../images/SplashPgConc.png" />
84</Helmet>;
85QUESTION
Separate border for each slider
Asked 2021-Dec-15 at 18:12On 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>img {
18 width: 50px;
19}
20
21.img-to-select>.img-to-select__item>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>.img-to-select__item {
33 display: flex;
34 justify-content: space-around;
35}
36
37.img-to-select>.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>img {
18 width: 50px;
19}
20
21.img-to-select>.img-to-select__item>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>.img-to-select__item {
33 display: flex;
34 justify-content: space-around;
35}
36
37.img-to-select>.img-to-select__item.selected {
38 border: 2px solid blue;
39 border-radius: 4px;
40}<div class="custom-carousel-section">
41 <div class="custom-container">
42 <div class="custom-carousel">
43 <div class="custom-carousel__title">
44 <span>Title
45 </span>
46 </div>
47 <div class="main-image" style="display: block">
48 <picture>
49 <source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" media="(max-width: 576px)" data-title="image-a">
50 <source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
51 <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
52 </picture>
53 </div>
54
55 <div class="main-image" style="display: none">
56 <picture>
57 <source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" media="(max-width: 576px)" data-title="image-b">
58 <source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
59 <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
60 </picture>
61 </div>
62
63 <div class="main-image" style="display: none">
64 <picture>
65 <source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" media="(max-width: 576px)" data-title="image-c">
66 <source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
67 <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
68 </picture>
69 </div>
70
71 <div class="main-image" style="display: none">
72 <picture>
73 <source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" media="(max-width: 576px)" data-title="image-d">
74 <source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
75 <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
76 </picture>
77 </div>
78 <div class="img-to-select">
79 <div class="img-to-select__item selected">
80 <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
81 </div>
82 <div class="img-to-select__item">
83 <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b">
84 </div>
85 <div class="img-to-select__item">
86 <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c">
87 </div>
88 <div class="img-to-select__item">
89 <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d">
90 </div>
91 </div>
92 </div>
93 </div>
94</div>
95
96<hr>
97
98<div class="custom-carousel-section">
99 <div class="custom-container">
100 <div class="custom-carousel">
101 <div class="custom-carousel__title">
102 <span>Title
103 </span>
104 </div>
105 <div class="main-image" style="display: block">
106 <picture>
107 <source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" media="(max-width: 576px)" data-title="image-a">
108 <source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
109 <img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
110 </picture>
111 </div>
112
113 <div class="main-image" style="display: none">
114 <picture>
115 <source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" media="(max-width: 576px)" data-title="image-b">
116 <source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
117 <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
118 </picture>
119 </div>
120
121 <div class="main-image" style="display: none">
122 <picture>
123 <source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" media="(max-width: 576px)" data-title="image-c">
124 <source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
125 <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
126 </picture>
127 </div>
128
129 <div class="main-image" style="display: none">
130 <picture>
131 <source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" media="(max-width: 576px)" data-title="image-d">
132 <source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
133 <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
134 </picture>
135 </div>
136 <div class="img-to-select">
137 <div class="img-to-select__item selected">
138 <img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" alt="" data-title="image-a">
139 </div>
140 <div class="img-to-select__item">
141 <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-b">
142 </div>
143 <div class="img-to-select__item">
144 <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-c">
145 </div>
146 <div class="img-to-select__item">
147 <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" data-title="image-d">
148 </div>
149 </div>
150 </div>
151 </div>
152</div>
153
154<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>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:12When 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>img {
18 width: 50px;
19}
20
21.img-to-select>.img-to-select__item>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>.img-to-select__item {
33 display: flex;
34 justify-content: space-around;
35}
36
37.img-to-select>.img-to-select__item.selected {
38 border: 2px solid blue;
39 border-radius: 4px;
40}<div class="custom-carousel-section">
41 <div class="custom-container">
42 <div class="custom-carousel">
43 <div class="custom-carousel__title">
44 <span>Title
45 </span>
46 </div>
47 <div class="main-image" style="display: block">
48 <picture>
49 <source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" media="(max-width: 576px)" data-title="image-a">
50 <source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
51 <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
52 </picture>
53 </div>
54
55 <div class="main-image" style="display: none">
56 <picture>
57 <source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" media="(max-width: 576px)" data-title="image-b">
58 <source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
59 <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
60 </picture>
61 </div>
62
63 <div class="main-image" style="display: none">
64 <picture>
65 <source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" media="(max-width: 576px)" data-title="image-c">
66 <source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
67 <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
68 </picture>
69 </div>
70
71 <div class="main-image" style="display: none">
72 <picture>
73 <source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" media="(max-width: 576px)" data-title="image-d">
74 <source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
75 <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
76 </picture>
77 </div>
78 <div class="img-to-select">
79 <div class="img-to-select__item selected">
80 <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
81 </div>
82 <div class="img-to-select__item">
83 <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b">
84 </div>
85 <div class="img-to-select__item">
86 <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c">
87 </div>
88 <div class="img-to-select__item">
89 <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d">
90 </div>
91 </div>
92 </div>
93 </div>
94</div>
95
96<hr>
97
98<div class="custom-carousel-section">
99 <div class="custom-container">
100 <div class="custom-carousel">
101 <div class="custom-carousel__title">
102 <span>Title
103 </span>
104 </div>
105 <div class="main-image" style="display: block">
106 <picture>
107 <source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" media="(max-width: 576px)" data-title="image-a">
108 <source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
109 <img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
110 </picture>
111 </div>
112
113 <div class="main-image" style="display: none">
114 <picture>
115 <source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" media="(max-width: 576px)" data-title="image-b">
116 <source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
117 <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
118 </picture>
119 </div>
120
121 <div class="main-image" style="display: none">
122 <picture>
123 <source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" media="(max-width: 576px)" data-title="image-c">
124 <source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
125 <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
126 </picture>
127 </div>
128
129 <div class="main-image" style="display: none">
130 <picture>
131 <source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" media="(max-width: 576px)" data-title="image-d">
132 <source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
133 <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
134 </picture>
135 </div>
136 <div class="img-to-select">
137 <div class="img-to-select__item selected">
138 <img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" alt="" data-title="image-a">
139 </div>
140 <div class="img-to-select__item">
141 <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-b">
142 </div>
143 <div class="img-to-select__item">
144 <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-c">
145 </div>
146 <div class="img-to-select__item">
147 <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" data-title="image-d">
148 </div>
149 </div>
150 </div>
151 </div>
152</div>
153
154<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>$('.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>img {
18 width: 50px;
19}
20
21.img-to-select>.img-to-select__item>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>.img-to-select__item {
33 display: flex;
34 justify-content: space-around;
35}
36
37.img-to-select>.img-to-select__item.selected {
38 border: 2px solid blue;
39 border-radius: 4px;
40}<div class="custom-carousel-section">
41 <div class="custom-container">
42 <div class="custom-carousel">
43 <div class="custom-carousel__title">
44 <span>Title
45 </span>
46 </div>
47 <div class="main-image" style="display: block">
48 <picture>
49 <source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" media="(max-width: 576px)" data-title="image-a">
50 <source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
51 <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
52 </picture>
53 </div>
54
55 <div class="main-image" style="display: none">
56 <picture>
57 <source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" media="(max-width: 576px)" data-title="image-b">
58 <source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
59 <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
60 </picture>
61 </div>
62
63 <div class="main-image" style="display: none">
64 <picture>
65 <source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" media="(max-width: 576px)" data-title="image-c">
66 <source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
67 <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
68 </picture>
69 </div>
70
71 <div class="main-image" style="display: none">
72 <picture>
73 <source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" media="(max-width: 576px)" data-title="image-d">
74 <source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
75 <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
76 </picture>
77 </div>
78 <div class="img-to-select">
79 <div class="img-to-select__item selected">
80 <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
81 </div>
82 <div class="img-to-select__item">
83 <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b">
84 </div>
85 <div class="img-to-select__item">
86 <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c">
87 </div>
88 <div class="img-to-select__item">
89 <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d">
90 </div>
91 </div>
92 </div>
93 </div>
94</div>
95
96<hr>
97
98<div class="custom-carousel-section">
99 <div class="custom-container">
100 <div class="custom-carousel">
101 <div class="custom-carousel__title">
102 <span>Title
103 </span>
104 </div>
105 <div class="main-image" style="display: block">
106 <picture>
107 <source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" media="(max-width: 576px)" data-title="image-a">
108 <source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
109 <img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
110 </picture>
111 </div>
112
113 <div class="main-image" style="display: none">
114 <picture>
115 <source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" media="(max-width: 576px)" data-title="image-b">
116 <source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
117 <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
118 </picture>
119 </div>
120
121 <div class="main-image" style="display: none">
122 <picture>
123 <source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" media="(max-width: 576px)" data-title="image-c">
124 <source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
125 <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
126 </picture>
127 </div>
128
129 <div class="main-image" style="display: none">
130 <picture>
131 <source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" media="(max-width: 576px)" data-title="image-d">
132 <source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
133 <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
134 </picture>
135 </div>
136 <div class="img-to-select">
137 <div class="img-to-select__item selected">
138 <img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" alt="" data-title="image-a">
139 </div>
140 <div class="img-to-select__item">
141 <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-b">
142 </div>
143 <div class="img-to-select__item">
144 <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-c">
145 </div>
146 <div class="img-to-select__item">
147 <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" data-title="image-d">
148 </div>
149 </div>
150 </div>
151 </div>
152</div>
153
154<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>$('.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>img {
171 width: 50px;
172}
173
174.img-to-select>.img-to-select__item>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>.img-to-select__item {
186 display: flex;
187 justify-content: space-around;
188}
189
190.img-to-select>.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>img {
18 width: 50px;
19}
20
21.img-to-select>.img-to-select__item>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>.img-to-select__item {
33 display: flex;
34 justify-content: space-around;
35}
36
37.img-to-select>.img-to-select__item.selected {
38 border: 2px solid blue;
39 border-radius: 4px;
40}<div class="custom-carousel-section">
41 <div class="custom-container">
42 <div class="custom-carousel">
43 <div class="custom-carousel__title">
44 <span>Title
45 </span>
46 </div>
47 <div class="main-image" style="display: block">
48 <picture>
49 <source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" media="(max-width: 576px)" data-title="image-a">
50 <source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
51 <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
52 </picture>
53 </div>
54
55 <div class="main-image" style="display: none">
56 <picture>
57 <source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" media="(max-width: 576px)" data-title="image-b">
58 <source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
59 <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
60 </picture>
61 </div>
62
63 <div class="main-image" style="display: none">
64 <picture>
65 <source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" media="(max-width: 576px)" data-title="image-c">
66 <source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
67 <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
68 </picture>
69 </div>
70
71 <div class="main-image" style="display: none">
72 <picture>
73 <source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" media="(max-width: 576px)" data-title="image-d">
74 <source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
75 <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
76 </picture>
77 </div>
78 <div class="img-to-select">
79 <div class="img-to-select__item selected">
80 <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
81 </div>
82 <div class="img-to-select__item">
83 <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b">
84 </div>
85 <div class="img-to-select__item">
86 <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c">
87 </div>
88 <div class="img-to-select__item">
89 <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d">
90 </div>
91 </div>
92 </div>
93 </div>
94</div>
95
96<hr>
97
98<div class="custom-carousel-section">
99 <div class="custom-container">
100 <div class="custom-carousel">
101 <div class="custom-carousel__title">
102 <span>Title
103 </span>
104 </div>
105 <div class="main-image" style="display: block">
106 <picture>
107 <source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" media="(max-width: 576px)" data-title="image-a">
108 <source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
109 <img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
110 </picture>
111 </div>
112
113 <div class="main-image" style="display: none">
114 <picture>
115 <source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" media="(max-width: 576px)" data-title="image-b">
116 <source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
117 <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
118 </picture>
119 </div>
120
121 <div class="main-image" style="display: none">
122 <picture>
123 <source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" media="(max-width: 576px)" data-title="image-c">
124 <source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
125 <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
126 </picture>
127 </div>
128
129 <div class="main-image" style="display: none">
130 <picture>
131 <source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" media="(max-width: 576px)" data-title="image-d">
132 <source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
133 <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
134 </picture>
135 </div>
136 <div class="img-to-select">
137 <div class="img-to-select__item selected">
138 <img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" alt="" data-title="image-a">
139 </div>
140 <div class="img-to-select__item">
141 <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-b">
142 </div>
143 <div class="img-to-select__item">
144 <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-c">
145 </div>
146 <div class="img-to-select__item">
147 <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" data-title="image-d">
148 </div>
149 </div>
150 </div>
151 </div>
152</div>
153
154<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>$('.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>img {
171 width: 50px;
172}
173
174.img-to-select>.img-to-select__item>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>.img-to-select__item {
186 display: flex;
187 justify-content: space-around;
188}
189
190.img-to-select>.img-to-select__item.selected {
191 border: 2px solid blue;
192 border-radius: 4px;
193}<div class="custom-carousel-section">
194 <div class="custom-container">
195 <div class="custom-carousel">
196 <div class="custom-carousel__title">
197 <span>Title
198 </span>
199 </div>
200 <div class="main-image" style="display: block">
201 <picture>
202 <source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" media="(max-width: 576px)" data-title="image-a">
203 <source srcset="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
204 <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" data-title="image-a">
205 </picture>
206 </div>
207
208 <div class="main-image" style="display: none">
209 <picture>
210 <source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" media="(max-width: 576px)" data-title="image-b">
211 <source srcset="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
212 <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" data-title="image-b">
213 </picture>
214 </div>
215
216 <div class="main-image" style="display: none">
217 <picture>
218 <source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" media="(max-width: 576px)" data-title="image-c">
219 <source srcset="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
220 <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" data-title="image-c">
221 </picture>
222 </div>
223
224 <div class="main-image" style="display: none">
225 <picture>
226 <source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" media="(max-width: 576px)" data-title="image-d">
227 <source srcset="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
228 <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" data-title="image-d">
229 </picture>
230 </div>
231 <div class="img-to-select">
232 <div class="img-to-select__item selected">
233 <img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
234 </div>
235 <div class="img-to-select__item">
236 <img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b">
237 </div>
238 <div class="img-to-select__item">
239 <img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c">
240 </div>
241 <div class="img-to-select__item">
242 <img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d">
243 </div>
244 </div>
245 </div>
246 </div>
247</div>
248
249<hr>
250
251<div class="custom-carousel-section">
252 <div class="custom-container">
253 <div class="custom-carousel">
254 <div class="custom-carousel__title">
255 <span>Title
256 </span>
257 </div>
258 <div class="main-image" style="display: block">
259 <picture>
260 <source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" media="(max-width: 576px)" data-title="image-a">
261 <source srcset="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
262 <img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" data-title="image-a">
263 </picture>
264 </div>
265
266 <div class="main-image" style="display: none">
267 <picture>
268 <source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" media="(max-width: 576px)" data-title="image-b">
269 <source srcset="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
270 <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" data-title="image-b">
271 </picture>
272 </div>
273
274 <div class="main-image" style="display: none">
275 <picture>
276 <source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" media="(max-width: 576px)" data-title="image-c">
277 <source srcset="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
278 <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" data-title="image-c">
279 </picture>
280 </div>
281
282 <div class="main-image" style="display: none">
283 <picture>
284 <source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" media="(max-width: 576px)" data-title="image-d">
285 <source srcset="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
286 <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" data-title="image-d">
287 </picture>
288 </div>
289 <div class="img-to-select">
290 <div class="img-to-select__item selected">
291 <img src="https://i.picsum.photos/id/295/200/300.jpg?hmac=b6Ets6Bu47pFHcU4UK7lI6xYkfy48orifVzWeHAe0zM" alt="" data-title="image-a">
292 </div>
293 <div class="img-to-select__item">
294 <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" alt="" data-title="image-b">
295 </div>
296 <div class="img-to-select__item">
297 <img src="https://i.picsum.photos/id/67/200/300.jpg?grayscale&hmac=QQ5thxbuAGWtWAFN4RludrKCymojOtz1l6aIxAWLDSY" alt="" data-title="image-c">
298 </div>
299 <div class="img-to-select__item">
300 <img src="https://i.picsum.photos/id/870/200/300.jpg?blur=2&grayscale&hmac=ujRymp644uYVjdKJM7kyLDSsrqNSMVRPnGU99cKl6Vs" alt="" data-title="image-d">
301 </div>
302 </div>
303 </div>
304 </div>
305</div>
306
307<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>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
Get latest updates on Carousel