swiper | modern mobile touch slider with hardware | Carousel library

    add_filter( 'pre_get_posts', 'custom_post_types_sort' );

    function custom_post_types_sort( $query ) {

        if ( is_tax('portfolio') || is_tag() ) {

            $cptui_post_types = cptui_get_post_type_slugs();

            // Sort portfolio taxonomy posts by project start date.
            $query->set( 'post_type', $cptui_post_types );
            $query->set( 'order', 'DESC' );
            $query->set( 'orderby', 'meta_value_num' );
            $query->set( 'meta_key', 'date' );
        }
    }

?>

<?php 
    /**
    *    Portfolio Taxonomy Template
    */
    get_header();
?>

<section class="portfolio-template swiper">
    <div class="swiper-wrapper postfolio-list">
        <div class="swiper-slide">
            <?php get_template_part( 'template-parts/breadcrumbs' ); ?>
            <div class="portfolio-project-items">
                <?php if ( have_posts() ) : ?>
                    <?php while ( have_posts() ) : the_post(); ?>
                        <?php get_template_part( 'template-parts/content', 'portfolio-item' ); ?>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<?php get_footer(); ?>

import { useSwiper } from 'swiper/react';

//more code

const swiper = useSwiper();

//more code

<Swiper
    modules={[Navigation, Pagination, Scrollbar, A11y]}
    navigation
    spaceBetween={20}
    slidesPerView={1}
>
    <button onClick={() => swiper.slideNext()}>Slide</button>
    {
        ads.map(ad => <SwiperSlide>
            slider explanation
        </SwiperSlide>
    )}
</Swiper>      

...    
include ':react-native-document-picker'
project(':react-native-document-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-document-picker/android')
...

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    ...
    ...
    implementation project(':react-native-document-picker')
}

{
  "name": "awesomeproject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/datetimepicker": "^6.0.2",
    "@react-navigation/drawer": "^6.3.1",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/stack": "^6.1.1",
    "axios": "^0.26.1",
    "moment": "^2.29.1",
    "native-base": "^3.3.7",
    "react": "17.0.2",
    "react-native": "0.67.2",
    "react-native-action-button": "^2.8.5",
    "react-native-document-picker": "^8.0.0",
    "react-native-dropdownalert": "^4.5.1",
    "react-native-fcm": "^16.2.4",
    "react-native-fetch-blob": "^0.10.8",
    "react-native-fs": "^2.19.0",
    "react-native-gesture-handler": "^2.3.2",
    "react-native-image-picker": "^4.7.3",
    "react-native-iphone-x-helper": "^1.3.1",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-keyboard-spacer": "^0.4.1",
    "react-native-loading-spinner-overlay": "^3.0.0",
    "react-native-modal-datetime-picker": "^13.1.0",
    "react-native-modalbox": "^2.0.2",
    "react-native-reanimated": "^2.4.1",
    "react-native-safe-area-context": "^4.1.2",
    "react-native-screens": "^3.13.0",
    "react-native-simple-radio-button": "^2.7.4",
    "react-native-simple-toast": "^1.1.3",
    "react-native-svg": "^12.3.0",
    "react-native-swiper": "^1.6.0",
    "react-native-vector-icons": "^9.1.0",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-test-renderer": "17.0.2"
  },
  "jest": {
    "preset": "react-native"
  }
}

import {DocumentPicker, DocumentPickerUtil} from 'react-native-document-picker';

    pressOnAttach() {
        Keyboard.dismiss();
        this.refs.NoticeTitle.blur();
        this.refs.NoticeDescription.blur();
        setTimeout(() => {
                DocumentPicker.show({
                filetype: [DocumentPickerUtil.allFiles()],
            }, (error, res) => {
                if (error === null) {
                    setTimeout(() => {
                        if (!this.checkFileExtension(res.fileName)) {
                            alert(AppText.VALID_EXTENSION_MESSAGE)
                        } else {
                            this.generateList(res.uri, res.fileName, res.fileSize);
                        }
                    }, 1000)
                }
            });
        }, 1000)
    }

class DonationCategory extends StatefulWidget {
 const DonationCategory(
  {Key? key,
  required this.position,
  required this.name,
  required this.iconImage,
  required this.description,
  required this.images,
  required this.url})
  : super(key: key);
 final int position;
 final String name;
 final String iconImage;
 final String description;
 final List<String> images;
 final Uri url;

@override
State<DonationCategory> createState() => 
_DonationCategoryState();
}

List<DonationCategory> donate = [];

class _DonationCategoryState extends State<DonationCategory> {
@override
 void initState() {
super.initState();
SchedulerBinding.instance?.addPostFrameCallback((_) {
  setState(() {
    donate = [
      DonationCategory(
        position: 1,
        name: AppLocalizations.of(context)!.water, //use localization here
        iconImage: 'assets/images/who.gif',
        description:
            "“Ensure availability and sustainable management of water and sanitation for all”.  ",
        images: const [
          'assets/images/who.gif',
          'assets/images/who2.gif',
          // 'assets/images/water02.jpg',
          // 'assets/images/water02.jpg',
          // 'assets/images/water02.jpg',
        ],
        url: Uri.dataFromString(
            '<html><body><iframe src="https://ourworldindata.org/grapher/death-rates-unsafe-water" loading="lazy" style="width: 100%; height: 600px; border: 0px none;"></iframe></body></html>',
            mimeType: 'text/html'),
      ),
      DonationCategory(
        position: 2,
        name: AppLocalizations.of(context)!.food,
        iconImage: 'assets/images/food2.png',
        description:
            "The second of the UN's,
        images: [
          // 'https://cdn.pixabay.com/photo/2011/12/13/14/39/venus-11022_1280.jpg',
          // 'https://image.shutterstock.com/image-photo/solar-system-venus-second-planet-600w-515581927.jpg'
        ],
        url: Uri.dataFromString(
            '<html><body><iframe src="https://ourworldindata.org/grapher/global-hunger-index?country=IND~BGD~NPL~PAK" loading="lazy" style="width: 100%; height: 600px; border: 0px none;"></iframe></body></html>',
            mimeType: 'text/html'),
      ),
      DonationCategory(
        position: 3,
        name: AppLocalizations.of(context)!.health,
        iconImage: 'assets/images/hospital2.jpg',
        description:
            "In several . “Small contributions quickly add up if enough people take up the cause.”",
        images: [
          // 'https://cdn.pixabay.com/photo/2011/12/13/14/31/earth-11015_1280.jpg',
          // 'https://cdn.pixabay.com/photo/2011/12/14/12/11/astronaut-11080_1280.jpg',
          // 'https://cdn.pixabay.com/photo/2016/01/19/17/29/earth-1149733_1280.jpg',
          // 'https://image.shutterstock.com/image-photo/3d-render-planet-earth-viewed-600w-1069251782.jpg'
        ],
        url: Uri.dataFromString(
            '<html><body><iframe src="https://ourworldindata.org/grapher/dalys-rate-from-all-causes" loading="lazy" style="width: 100%; height: 600px; border: 0px none;"></iframe></body></html>',
            mimeType: 'text/html'),
      ),
      DonationCategory(
        position: 4,
        name: AppLocalizations.of(context)!.education,
        iconImage: 'assets/images/educated.png',
        description:
            "It is estimated that 101 million additional children and young people (from grades 1 to 8)  ",
        images: [],
        url: Uri.dataFromString(
            '<html><body><iframe src="https://ourworldindata.org/grapher/out-of-school-girls-of-primary-school-age-by-world-region" loading="lazy" style="width: 100%; height: 600px; border: 0px none;"></iframe></body></html>',
            mimeType: 'text/html'),
      ),
      DonationCategory(
        position: 5,
        name: AppLocalizations.of(context)!.adequacy,
        iconImage: 'assets/images/poor.png',
        description:
            "Ending poverty to live in extreme poverty by 2030.",
        images: [],
        url: Uri.dataFromString(
            '<html><body><iframe src="https://ourworldindata.org/grapher/size-poverty-gap-countries?country=~BRA" loading="lazy" style="width: 100%; height: 600px; border: 0px none;"></iframe></body></html>',
            mimeType: 'text/html'),
      ),
    ];
  });
});

import 'package:flutter/material.dart';
import 'package:sdg_app2/constants.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'donation_data.dart';
import 'donate_details.dart';

class GivePage extends StatefulWidget {
@override
_GivePageState createState() => _GivePageState();
}

class _GivePageState extends State<GivePage> {
 @override
  Widget build(BuildContext context) {
   return Scaffold(
    backgroundColor: kSecondaryColor,
    body: Container(
      decoration: const BoxDecoration(
          gradient: LinearGradient(
              colors: [kPrimaryColor, kSecondaryColor],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: [0.3, 0.7])),
      child: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(26.0),
              child: Column(
                children: <Widget>[
                  const Text(
                    'Give Support',
                    style: TextStyle(
                      fontFamily: 'Quicksand',
                      fontSize: 30,
                      color: Color(0xffffffff),
                      fontWeight: FontWeight.w900,
                    ),
                    textAlign: TextAlign.left,
                  ),
                  DropdownButton<String>(
                    items: const [
                      DropdownMenuItem(
                        child: Text(
                          'Where Needed',
                          style: TextStyle(
                            fontFamily: 'Quicksand',
                            fontSize: 24,
                            color: Color(0x7cdbf1ff),
                            fontWeight: FontWeight.w500,
                          ),
                          textAlign: TextAlign.left,
                        ),
                      ),
                    ],
                    onChanged: (value) {},
                    icon: const Padding(
                      padding: EdgeInsets.only(left: 16.0),
                    ),
                    underline: const SizedBox(),
                  ),
                ],
              ),
            ),
            Container(
              height: 500,
              padding: const EdgeInsets.only(left: 32),
              child: Swiper(
                itemCount: donate.length,
                itemWidth: MediaQuery.of(context).size.width - 2 * 64,
                layout: SwiperLayout.STACK,
                pagination: const SwiperPagination(
                  builder:
                      DotSwiperPaginationBuilder(activeSize: 20, space: 4),
                ),
                itemBuilder: (context, index) {
                  return InkWell(
                    onTap: () {
                      Navigator.push(
                        context,
                        PageRouteBuilder(
                          pageBuilder: (context, a, b) => donationdetail(
                            donationInfo: donate[index], //I want to access donate here but it gives me an empty list
                          ),
                        ),
                      );
                    },
                    child: Stack(
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            const SizedBox(height: 100),
                            Card(
                              elevation: 8,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(32),
                              ),
                              color: Colors.white,
                              child: Padding(
                                padding: const EdgeInsets.all(32.0),
                                child: Column(
                                  crossAxisAlignment:
                                      CrossAxisAlignment.start,
                                  children: <Widget>[
                                    const SizedBox(height: 100),
                                    Text(
                                      donate[index].name.toString(), //I want to access donate here but it gives me an empty list
                                      style: const TextStyle(
                                        fontFamily: 'Quicksand',
                                        fontSize: 35,
                                        color: Color(0xff47455f),
                                        fontWeight: FontWeight.w900,
                                      ),
                                      textAlign: TextAlign.left,
                                    ),
                                    const Text(
                                      'Where Needed',
                                      style: TextStyle(
                                        fontFamily: 'Quicksand',
                                        fontSize: 23,
                                        color: Colors.black,
                                        fontWeight: FontWeight.w500,
                                      ),
                                      textAlign: TextAlign.left,
                                    ),
                                    const SizedBox(height: 32),
                                    Row(
                                      children: const <Widget>[
                                        Text(
                                          'Know more',
                                          style: TextStyle(
                                            fontFamily: 'Avenir',
                                            fontSize: 18,
                                            color: kPrimaryColor,
                                            fontWeight: FontWeight.w500,
                                          ),
                                          textAlign: TextAlign.left,
                                        ),
                                        Icon(
                                          Icons.arrow_forward,
                                          color: kSecondaryColor,
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                        Positioned(
                          right: 22,
                          bottom: 60,
                          child: Text(
                            donate[index].position.toString(), //I want to access donate here but it gives me an empty list
                            style: TextStyle(
                              fontFamily: 'Quicksand',
                              fontSize: 200,
                              color: Colors.black.withOpacity(0.08),
                              fontWeight: FontWeight.w900,
                            ),
                            textAlign: TextAlign.left,
                          ),
                        ),
                      ],
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    ));

┌─ Flutter Fix ────────────────────────────────────────────────────────────────────────────────┐
│ [!] Your project requires a newer version of the Kotlin Gradle plugin.                       │
│ Find the latest version on https://kotlinlang.org/docs/gradle.html#plugin-and-versions, then │
│ update C:\Users\myUsername\Desktop\Swiper\Swiper-main\android\build.gradle:                  │
│ ext.kotlin_version = '<latest-version>'                                                      │
└──────────────────────────────────────────────────────────────────────────────────────────────┘
Exception: Gradle task assembleDebug failed with exit code 1
Exited (sigterm)

buildscript {
    ext.kotlin_version = '1.6.10' //there was nothing here before
    repositories {
        google()
        jcenter()
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
        classpath 'com.google.gms:google-services:4.3.5'
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}
(...)

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { of } from 'rxjs';
import { SwiperComponent, SwiperModule } from 'swiper/angular';

import { TeaserWrapperContainerComponent } from './teaser-wrapper-container.component';
import { InterfaceState } from '@migrosonline/shared-deps-all/core/interface/interface.store';


describe('TeaserWrapperContainerComponent', () => {
    let component: TeaserWrapperContainerComponent;
    let fixture: ComponentFixture<TeaserWrapperContainerComponent>;

const mockedSwiperComponent = {
        swiperRef: {
            slideNext: jest.fn(),
            slidePrev: jest.fn(),
            destroy: jest.fn(),
            update: jest.fn()
        }
    } as unknown as SwiperComponent;

beforeEach(
        waitForAsync(() => {
            mockedInterfaceService.prototype.select = jest.fn();

            TestBed.configureTestingModule({
                declarations: [TeaserWrapperContainerComponent],
                imports: [SwiperModule],
                providers: [{ provide: InterfaceService, useClass: mockedInterfaceService }],
                schemas: [CUSTOM_ELEMENTS_SCHEMA]
            }).compileComponents();
        })
    );

    beforeEach(() => {
        fixture = TestBed.createComponent(TeaserWrapperContainerComponent);
        component = fixture.componentInstance;
        component.teaserGroupSliderRef = mockedSwiperComponent;
    });

    it('should create', () => {
        fixture.detectChanges();

        expect(component).toBeTruthy();
    });

});

Cannot find module 'swiper_angular' from 'src/lib/shared/teaser/teaser-wrapper-container/teaser-wrapper-container.component.spec.ts'

      3 | import { of } from 'rxjs';
    > 4 | import { SwiperComponent, SwiperModule } from 'swiper/angular';

This dependency was not found:

* swiper/vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Home.vue?vue&type=script&lang=js

To install it, you can run: npm install --save swiper/vue