Next.jsをApolloで使用する理由

 Apolloの中心は、人々がデータを管理するのに役立つGraphQL実装です。また、Next.jsなどのReactフレームワークで使用できるGraphQLクライアント(Apolloクライアント)を作成および保守します。

Apolloクライアントは、GraphQLを使用してローカルデータとリモートデータの両方を管理できる状態管理クライアントであり、アプリケーションデータのフェッチ、キャッシュ、および変更に使用できます。

この記事では、Next.jsでApolloクライアントを使用する理由と、Next.jsでサポートされている3つのレンダリング方法でページをレンダリングするためにNext.jsでApolloクライアントを使用する方法について説明します。静的サイト生成(SSG)、サーバー側レンダリング(SSR)、およびクライアント側レンダリング(CSR)。

それで、それ以上の苦労なしに、始めましょう。

Next.jsでApolloクライアントを使用する理由

まず、Next.jsでApolloクライアントを使用する理由を見てみましょう。Apolloクライアントを使用する主な理由は3つあります。

  1. キャッシングのすぐに使えるサポート
  2. 組み込みのロードおよびエラー状態
  3. データフェッチへの宣言型アプローチ

キャッシングのすぐに使えるサポート

Apollo自身の言葉では、グラフのキャッシュは簡単な作業ではありませんが、2年間はグラフの解決に集中してきました。」

Apolloは、キャッシングプロセスを可能な限り最も効率的かつ効果的にするために多大な時間を費やしてきました。では、なぜ車輪の再発明を試みてみてください。アプリケーションでデータをフェッチしてGraphQLを操作している場合、Apolloクライアントはデータを処理するための優れた方法です。

もう1つの利点は、クライアントを使用する開発者に必要なセットアップが最小限で済むことです。Apolloはそれを「zero-config」とラベル付けしています。これについては、後のアプリケーションの例で詳しく説明しますが、アプリケーションでキャッシュを設定するには、以下のコードをアプリケーションに追加するだけです。

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  cache: new InMemoryCache()
})

Apolloは、ドキュメントにゼロ構成キャッシングに関する優れた記事を掲載しています。あなたがそれを読むことに興味があるなら、あなたはここですることができます。

組み込みのロードおよびエラー状態

Apolloクライアントには、ブロックと呼ばれるカスタムReactフックが組み込まれていますuseQuery。これは、サンプルアプリケーションで使用し、使用するための組み込みの読み込み状態とエラー状態を提供します。

これは印象的ではありませんが、開発者にとって意味することは、このロジックを自分で実装するために時間を費やす必要がないということです。フックが返すブール値を取得し、必要に応じてアプリケーションのレンダリングを変更できます。

これらの組み込み状態のおかげで、Apollo Clientを使用することで、データフェッチロジックの実装について心配する時間を減らし、アプリケーションの構築に集中することができます。

データフェッチへの宣言型アプローチ

Apolloクライアントがフックを実装する方法のもう1つの利点は、ApolloクライアントuseQueryを使用したデータフェッチが必須ではなく宣言型であるということです。

これが私たちにとって意味することは、私たちが必要とするデータをApolloに伝えるだけでよく、それが私たちのためにそれを取得するということです。ロジックを記述して、それを実行または処理する方法について段階的な手順のリストを提供する必要はありません。

繰り返しになりますが、これは、Apollo Clientが開発をスピードアップし、GraphQLを使用する際の開発者の効率を高めるのに役立つもう1つの優れた例です。

Next.jsのレンダリング方法

Next.jsには、Apolloクライアントと組み合わせて使用​​できる3つのレンダリングメソッドがあります。これらは、SSG、SSR、およびCSRです。これらのそれぞれ、それらが何をするか、そしてそれらがNext.jsでどのように機能するかを見てみましょう。

次に、ApolloクライアントがNext.jsとこれらのレンダリングメソッドでどのように機能するかを示すアプリケーションを構築します。

静的サイト生成(SSG)

SSGを使用すると、ユーザーがページを要求する前に、ビルド時にサーバー上でページが生成され、HTMLに変換されます。つまり、ユーザーがページをリクエストしたときに実行する必要があるのは、生成されたHTMLをユーザーに送信して表示することだけです。

このため、リクエストが着信したときにサーバー上にレンダリングがないため、ユーザーの読み込み時間が短縮されます。

多くのWebサイトでは、このページのレンダリング方法は優れています。SSGはランディングページやブログページに最適ですが、SSGを使用することの固有の欠点は、ビルド時にのみデータを更新できることです。これは2つのことを意味します:

  1. サーバーがデータをクエリするには、ビルド時にデータが利用可能である必要があります
  2. ページのビルド後にデータが更新される場合、データは古く、新しいビルドをデプロイすることによってのみ更新できます

この古いデータの問題を解決する1つの方法は、SSRを使用することです。それでは、それを見てみましょう。

サーバーサイドレンダリング(SSR)

SSRを使用すると、サーバーはSSGのようなページを生成しますが、ビルド時に1回生成するのではなく、ユーザーが送信するリクエストごとに生成します。これにより、Webサイトの展開の間にコンテンツを最新バージョンに更新できるため、SSGを悩ませている問題が解決されます。

ただし、このレンダリング方法の欠点は、サーバーへの各要求でレンダリングすることにより、サーバーの応答待ち時間を増やす可能性のある余分な処理時間を追加することです。

クライアント側レンダリング(CSR)

サーバーの応答待ち時間を抑えたい場合は、CSRを使用すると便利です。CSRは、典型的なReactアプリケーションの仕組みです。Reactはページをレンダリングしてから、データを要求します。データを取得すると、ページに表示されます。

このレンダリング方法では、ページの読み込みが高速に保たれますが、生成されたHTMLをクロールするSEOクローラーと互換性がないという欠点があります。

これは、SSRやSSGのように、サーバー上でデータがHTMLに生成されないためです。代わりに、クライアントによってレンダリングされるとページに追加されます。

ご覧のとおり、Next.jsがサポートする3つの異なるレンダリング戦略には、それぞれ長所と短所があります。ページに選択するレンダリング方法と、Apolloクライアントを使用してNext.js内でデータをフェッチする方法は、現在の状況によって異なります。

それでは、これら3つのメソッドの動作を示すサンプルアプリケーションを作成しましょう。

Next.jsでApolloを使用する方法

Next.jsとApolloを使用してアプリケーションを作成する前に、アプリケーションで使用するAPIを少し見てみましょう。

このAPIは、過去および今後のすべてのミッションを追跡する非公式のSpaceXAPIです。興味があれば、ここでAPIのデータを試してみることができます。ただし、このAPIのデータは古く、最近更新されていないようですが、このチュートリアルでは機能することに注意してください。

APIについて説明したので、アプリケーションの構築に取り掛かりましょう。まず、新しいNext.jsアプリケーションを作成しましょう。これを行うには、ターミナルで次のコマンドを実行します。

npx create-next-app <プロジェクトの名前>

プロジェクトに名前を付けましnextjs-apolloたが、好きな名前を付けることができます。

これを並べ替えたら、ターミナルで次のコマンドを実行して、プロジェクトフォルダーに移動できます。

cd nextjs-apollo

ここで、最初に実行したいのは、Apolloクライアントをインストールすることです。これは次のコマンドで実行できます。

npm install @apollo/client graphql

これで、プロジェクトに必要なすべての依存関係のインストールが完了しました。ただし、ビルドを開始する前に、APIで動作するようにApolloクライアントを構成する必要があります。

これを行うには、選択したIDEでプロジェクトを開き、プロジェクトのルートに。という名前の新しいファイルを作成しますapollo-client.js

このファイルの中に、次のコードを入れます。これにより、Apolloクライアントが作成され、Next.jsアプリケーション全体でAPIをクエリできるようになります。

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
    uri: "https://api.spacex.land/graphql",
    cache: new InMemoryCache(),
});

export default client;

この設定により、アプリケーションで3つのページを作成して、前に説明した3つのレンダリング方法を紹介することができます。

Apollo Client forSSGページを使用したデータの取得

SSGページのデータをクエリするために、Apolloクライアントからのデータフェッチにフックを使用しませんが、getStaticProps()代わりにNext.jsの組み込み関数を使用します。とApolloClientを併用getStaticProps()することで、SSGページを簡単に作成できます。

まず、に移動して開きpages/index.jsます。このファイル内で、ページの下部に次のコードを追加します。

export async function getStaticProps() {
  const { data } = await client.query({
    query: gql`
      query NextLaunch {
        launchNext {
          mission_name
          launch_date_local
          launch_site {
            site_name_long
          }
        }
      }
    `,
  });
  return {
    props: {
      nextLaunch: data.launchNext,
    },
 };
}

次に、次の行をファイルの先頭に追加します。

import { gql } from "@apollo/client";
import client from "../apollo-client";

これらのコードセクションが追加された状態で、開発サーバーを起動し、Next.jsがアプリケーションのページを生成すると、APIから要求されたデータがフェッチされるのを待ちます。データが返されると、作成されるページに渡されます。

すぐにページをレイアウトしますが、最初に、上記のコードで何が起こっているかを説明しましょう。

まず、APIから返したいフィールドを含むクエリを定義します。この後、clientインポートしたデータを使用してこのデータをクエリします。APIからデータが返されると、データオブジェクトを分解します。

APIから要求されたフィールドのどこにも表示されませんがdata、GraphQLは返されたデータをオブジェクトに自動的にラップしdataます。したがって、ここでそれを破壊することにより、.data後で行う必要がなくなります。

最後に、ページ生成を機能させるためにNext.jsで必要とされる関数propsからオブジェクトを返します。getStaticProps()このオブジェクトの内部でprops、ページで使用するデータを渡します。

次に、ホームページをレイアウトして、取得したデータをページに表示します。Homeファイル内の関数をindex.js次のコードに置き換えます。

export default function Home({nextLaunch}) {

  const {mission_name, launch_date_local, launch_site} = nextLaunch;
  const nextLaunchDate = fetchDate(launch_date_local).join('/');

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1 className={styles.title}>
          Next SpaceX Launch
        </h1>
        <p className={styles.description}>
          <span>🚀 Mission name: <strong>{mission_name}</strong></span>
          <span>📅 Date: <strong>{nextLaunchDate}</strong></span>
          <span>🏠 Launched from: <strong>{launch_site.site_name_long}</strong></span>
        </p>
      </main>
    </div>
  )
}

次に、日付を正しく表示するには、Home置き換えたばかりの関数の上に次の関数を追加します。

function fetchDate(date) {
  const newDate = new Date(date);

  const day = newDate.getDate();
  const month = newDate.getMonth();
  const year = newDate.getFullYear();

  return [day, month, year];
};

最後に、Home.module.cssファイルの内容を以下のCSSコードに置き換えます。

.container {
  padding: 0 2rem;
}
.main {
  min-height: 100vh;
  padding: 4rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.footer {
  display: flex;
  flex: 1;
  padding: 2rem 0;
  border-top: 1px solid #eaeaea;
  justify-content: center;
  align-items: center;
}
.footer a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.title a {
  color: #0070f3;
  text-decoration: none;
}
.title a:hover,
.title a:focus,
.title a:active {
  text-decoration: underline;
}
.title {
  margin: 0;
  line-height: 1.15;
  font-size: 4rem;
}
.title,
.description {
  text-align: center;
}
.description {
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;
}
.code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.75rem;
  font-size: 1.1rem;
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Courier New, monospace;
}
.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 800px;
}
.card {
  margin: 1rem;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
  max-width: 300px;
}
.card:hover,
.card:focus,
.card:active {
  color: #0070f3;
  border-color: #0070f3;
}
.card h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}
.card p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}
.logo {
  height: 1em;
  margin-left: 0.5rem;
}
.missionContainer {
  margin: 5rem;
}
@media (max-width: 600px) {
  .grid {
    width: 100%;
    flex-direction: column;
  }
}

これで、ターミナルで開発サーバーを起動npm run devし、ホームページに移動できます。デフォルトでは、になっているはずですhttp://localhost:3000/。このページにアクセスすると、次のようなメッセージが表示されます。

Apolloクライアントを介して取得されたデータを表示するSSG生成ページ

SSRページ用のApolloクライアントを使用したデータの取得

SSGページを設定したので、Apolloクライアントを使用してデータを使用してSSRページを生成するのは簡単です。

index.jsまず、ファイルを複製して、名前をに変更しましょうssr.jsgetStaticProps()次に、 SSGページに使用しgetServerSideProps()た関数をに置き換えるだけです。

関数をに変更することgetServerSideProps()で、ビルド時にページを静的にレンダリングするのではなく、サーバーへのリクエストごとにページをレンダリングするようにNext.jsに指示します。

これで、アプリケーションのページに移動すると、ssrSSGを使用しているホームページと同じように見えますが、リクエストごとにサーバーによってレンダリングされるページが表示されます。

Apolloクライアントを介して取得されたデータを表示するSSR生成ページ

CSRページ用のApolloClientを使用したデータの取得

CSR rendering is a bit more involved than what we had to do for our SSG and SSR pages. Since we must now fetch data inside React, we want to use the useQuery Hook provided by the Apollo Client. To allow us to use this, let’s first wrap our application in the ApolloProvider.

To wrap our application in the ApolloProvider, open up the _app.js file, found inside the pages directory alongside the other two files index.js and ssg.js. Once, inside the _app.js file, let’s import the ApolloProvider and the client we created at the start of this tutorial:

import { ApolloProvider } from "@apollo/client";
import client from "../apollo-client";

Then, let’s replace the existing MyApp component with the one below:

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

With the ApolloProvider now wrapping our application, we can use the useQuery Hook from the Apollo Client anywhere in our application. But, before we can start using this Hook and fetching data for our CSR page, we must address one more thing.

If we implement the useQuery Hook to fetch data on our CSR pages, then we can make requests to our API while the page renders. We want to avoid doing this though because it means the page will generate before the API requests can return and Next.js passes the data to the page.

To resolve this, we must implement a custom component called ClientOnly. This component ensures that we only request data from the browser and not while the page renders on the server before the user’s request.

To create this new component, create a new directory at the root level called components, create a new file within that directory called ClientOnly.js, then paste in the below code:

import { useEffect, useState } from "react";

export default function ClientOnly({ children, ...delegated }) {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) {
    return null;
  }

  return <div {...delegated}>{children}</div>;
}

With this component sorted, we can go on and implement data fetching for our CSR page. To do this, create another new component called PastLaunches.js; this component fetches the last 10 launches and displays them to the user.

Inside the pastLaunches.js file, paste in the following code:

import { useQuery, gql } from "@apollo/client";
import styles from "../styles/Home.module.css";

const QUERY = gql`
  query PastLaunches {
    launchesPast(limit: 10) {
        mission_name
        launch_date_local
        launch_site {
        site_name_long
        }
    }
}
`;

export default function PastLaunches() {
    const {data, loading, error} = useQuery(QUERY);

    if (loading) {
        return (
            <h2>Loading Data...</h2>
        );
    };

    if (error) {
        console.error(error);
        return (
            <h2>Sorry, there&apos;s been an error...</h2>
        );
    };

    const {launchesPast} = data;

    return (
        <>
            {launchesPast.map((launch) => (
                <div key={launch.mission_name} className={styles.missionContainer}>
                    <p className={styles.description}>
                        <span>🚀 Mission name: <strong>{launch.mission_name}</strong></span>
                        <span>📅 Date: <strong>{launch.nextLaunchDate}</strong></span>
                        <span>🏠 Launched from: <strong>{launch.launch_site.site_name_long}</strong></span>
                    </p>
                </div>
            ))}
        </>
    )
}

At the top of the PastLaunches() function, you can see the useQuery() Hook from the Apollo Client I mentioned earlier. To use this Hook, we define a GraphQL query and then pass it to the Hook, which then returns three values we can use in our application:

  1. data, which is the data returned from the query
  2. loading, a boolean value that controls rendering while data is fetched
  3. error a boolean value that controls rendering if there is an error fetching the data

With this component created, all we need to do is add in the new page file for our CSR page and consume these two components. For this, create a new file in our pages directory called csr.js, and paste in the following code:

import Head from "next/head";
import styles from "../styles/Home.module.css";
import ClientOnly from "../components/ClientOnly";
import PastLaunches from "../components/PastLaunches";

export default function ClientSide() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Past SpaceX Launches</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <h1>Past SpaceX Launches</h1>
        <ClientOnly>
          <PastLaunches />
        </ClientOnly>
      </main>
    </div>
  );
}

This code is a lot smaller than the code used for the SSG and SSR pages, and that’s because we moved all of the displaying and data fetching code into the PastLaunches component.

But, most importantly, you can see that we wrap the PastLaunches component in our ClientOnly component from earlier to prevent the data fetching from anywhere but the browser.

ここに移動するhttp://localhost:3000/csrと、クライアントでフェッチされたデータを確認できます。最初は、データのフェッチ中にロード状態を表示し、データが取得されると、切り替えてユーザーに表示します。

状態の読み込みと取得したデータの表示

これでアプリケーションが完成し、Next.jsで利用可能な3つの異なるレンダリングテクノロジーすべてを使用してApolloクライアントを実装しました。

結論

この投稿全体を通して、Apolloクライアントとは何か、なぜそれを使用する必要があるのか​​、SSG、SSR、CSRを介してNext.jsで3つの異なる方法で実装する方法について説明しました。 

リンク:https ://blog.logrocket.com/why-use-next-js-apollo/

#nextjs  #apollo 

What is GEEK

Buddha Community

Next.jsをApolloで使用する理由
木村  直子

木村 直子

1678557120

如何在 Html、CSS 和 Javascript 中使用自动图像滑块

在本文中,您将学习如何使用 HTML CSS 和 JavaScript 代码创建自动图像滑块。早些时候,我与您分享了更多类型的手动和自动图像滑块。和其他设计一样,我希望你喜欢这个设计。

图像滑块是一种常见的网络元素,目前在许多网站中使用。主要用于网站首页的幻灯片放映。这种类型的自动图像幻灯片还用于组织图库中的许多图像。如果您想了解有关 javascript 的更多信息,请查看我最好的HTML、CSS 和 javascript 项目

有两种类型的图像滑块,一种是自动的,另一种是手动的。在自动图像滑块的情况下,图像将定期自动更改。对于手册,您需要使用“下一个”和“上一个”按钮更改图像。

自动图像滑块

在这种情况下,可以自动和手动更改图像。这意味着它会自动更改图像,您也可以 分别使用 Next 和 Previs 按钮更改图像 。

 该设计只能在 HTML 和 CSS 的帮助下创建,但在这种情况下,我使用了 JavaScript 编程代码。

如果你想知道这些自动图像幻灯片是如何工作的,那么你可以观看下面的现场演示。下面我给出了源代码,所以你可以根据需要复制它们。您还可以使用文章底部的下载按钮下载代码。

正如您在上面的演示中看到的,这是一个非常简单的图像滑块,具有自动和手动图像更改功能。

在本例中,我总共使用了五张图片,但如果你愿意,你可以使用更多图片。图像将每 5 秒自动更改一次。还有两个按钮可以更改图像。

Html、CSS 和 Javascript 中的自动图像滑块

如果您了解基本的 HTML CSS 和 JavaScript,那么您可以轻松理解此设计。要创建这个自动图像滑块,首先,您需要创建一个 HTML 和 CSS 文件。

在本例中,我没有创建单独的 JavaScript 文件,但如果需要,您可以创建一个单独的文件。

第 1 步:创建滑块的基本结构

我在下面使用了一些 HTML 和 CSS 代码来创建这个滑块的背景。在本例中,我使用的滑块高度为 256 像素,宽度为 500 像素。

我没有在背景中使用任何不同的颜色。如果你看过演示,你就会明白这张幻灯片周围使用了阴影,我在这里使用了 box-shadow: 0 0 30px rgba(0, 0, 0, 0.3)。

<div id=”slider”>
</div>
 body {
  margin: 10%;
}
#slider {
  position: relative;
  width: 500px;
  height: 265px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}
创建滑块的基本结构

第 2 步:添加所需的图像

我使用下面的代码向这个自动图像滑块添加了图像并设计了这些图像。我一共使用了五张图片,你可以随意增减。

如果你仔细看看下面的 CSS 代码,你就会明白我使用了 Slider Ul Width 10000%。

你可能想知道为什么我在这里使用 10,000%。仔细查看下图,了解此滑块工作的原因和方式。

添加所需的图像

<ul id=”slideWrap”>
      <li><img src=”img1.jpg” alt=””></li>
      <li><img src=”img2.jpg” alt=””></li>
      <li><img src=”img3.jpg” alt=””></li>
      <li><img src=”img4.jpg” alt=””></li>
      <li><img src=”img5.jpg” alt=””></li>
</ul>

 在本例中,图像的高度为 256 像素,宽度为 500 像素。当然,在这种情况下,您将使用相同大小的每个图像。

#slider ul {
  position: relative;
  list-style: none;
  height: 100%;
  width: 10000%;
  padding: 0;
  margin: 0;
  transition: all 750ms ease;
  left: 0;
}
#slider ul li {
  position: relative;
  height: 100%;
  float: left;
}
#slider ul li img{
  width: 500px;
  height: 265px;
}

第三步:添加上一个和下一个按钮

现在我们将 Previs 和 Next 按钮添加到此滑块。下面的 HTML 和 CSS 代码有助于添加和设计这两个按钮。

<a id=”prev” href=”#”>&#8810;</a>
<a id=”next” href=”#”>&#8811;</a>
#slider #prev, #slider #next {
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 150ms ease;
}

第四步:确定两个按钮的准确位置

 我在下面使用了一些 CSS 将这两个按钮放在适当的位置。我将 Previs 按钮保持在距左侧 10 像素的位置。

我将下一个按钮保持在距离右侧 10 px 的位置。因此,这两个按钮位于滑块的两侧。

#slider #prev {
  left: 10px;
}
#slider #next {
  right: 10px;
}

我使用下面的 CSS 代码在这两个按钮的背景中使用了少量悬停效果。

#slider #prev:hover, #slider #next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0;
}
添加上一个和下一个按钮

第 5 步:通过添加 JavaScript 代码激活图像滑块

到目前为止我们只是设计了它,现在我们来实现这个滑块的图像变化。

var responsiveSlider = function() {
var slider = document.getElementById(“slider”);
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById(“slideWrap”);
var count = 1;
var items = slideList.querySelectorAll(“li”).length;
var prev = document.getElementById(“prev”);
var next = document.getElementById(“next”);
window.addEventListener(‘resize’, function() {
  sliderWidth = slider.offsetWidth;
});

首先,我们将通过单击“下一步”按钮来提前决定要完成什么样的工作。如果您是初学者,那么首先请看下面的代码结构。然后按照下面的说明进行操作,这将帮助您更好地理解。

var nextSlide = function() {
  if(count < items) {
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = items) {
    slideList.style.left = “0px”;
    count = 1;
  }
};
如果您单击上一个按钮,确定会产生什么样的效果。

正如我们所见,在 nextSlide 变量中,我们存储了 Next 按钮的工作方式。
首先,我们添加了 value if (count <items) 此代码将在图像数量超过 count 时起作用。

使用 else if (count = items) 我们已经确定了如果前面的函数不起作用会发生什么。如果图像和计数都相等,则滑块不会发生变化。

 'count' 是您点击按钮的次数。如果您单击该按钮一次,则计数值为一。如果一次单击三次,则该帐户的值为 3。

我们已经决定了如果我们点击 Next 按钮将会发生什么样的变化。现在我们将实现上一个按钮。

类似地,我们已经确定了如果您单击上一个按钮会产生什么样的效果。

var prevSlide = function() {
  if(count > 1) {
    count = count – 2;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = 1) {
    count = items – 1;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
};
如果您单击上一个按钮,确定会产生什么样的效果。

确定单击此自动图像滑块中的上一个和下一个按钮时将产生何种效果。现在我们将这些效果与两个按钮相关联。

正如我之前所说,我们已经将 Next 按钮的工作方式存储在名为“next Slider”的常量中。下面我们已经指示如果您单击“下一步”按钮,该常量将起作用。

next.addEventListener(“click”, function() {
  nextSlide();
});

我们已经在“prevSlide”中保存了对上一个按钮起作用的内容。下面我们已经说明,如果您单击上一个按钮,该常量将起作用。

prev.addEventListener(“click”, function() {
  prevSlide();
});

由于这是一个自动图像滑块,在这种情况下,我已安排图像自动更改。这里我使用了 5000 即 5 秒。这意味着图像将每 5 秒更改一次。如果您希望图像每 2 秒更改一次,请在此处使用 2000 而不是 5000。

setInterval(function() {
  nextSlide()
}, 8000);
};
window.onload = function() {
responsiveSlider();
}
通过添加 JavaScript 代码激活图像滑块

希望您从本教程中了解到我是如何使用 HTML CSS 和 JavaScript 代码创建这个漂亮的自动图像滑块的。如果您想下载所需的源代码,可以使用下面的下载按钮。

如果您对如何制作此自动图像滑块有任何疑问,那么您绝对可以通过评论让我知道。

文章原文出处:https: //foolishdeveloper.com/

#javascript #image #slider #html #css 

How to Automatic Image Slider in Html, CSS and Javascript

In this article, you will learn how to create an automatic image slider using HTML CSS, and JavaScript code. Earlier I shared with you many more types of manual and automatic image sliders. Like other designs, I hope you like this design.

Image slider is a common web element that is currently used in many websites. It is mainly used for the slideshow on the website’s homepage. This type of Auto Image Slideshow is also used to organize many images in a gallery. If you want to learn more about javascript, check out my best HTML, CSS, and javascript projects.

There are two types of image sliders, one automatic and the other manual. In the case of the automatic image slider, the image will change automatically at regular intervals. In the case of the manual, you need to change the image using the Next and Previous buttons.

Automatic Image Slider

In this case, the image can be changed automatically and manually. This means that it will automatically change the image and you can also change the image using the Next and Previs buttons separately.

 The design can only be created with the help of HTML and CSS but in this case, I have used JavaScript programming code.

If you want to know how these automatic image slideshows work then you can watch the live demo below. Below I have given the source code so you can copy them if you want. You can also download the code using the download button at the bottom of the article.

As you can see in the demo above, this is a very simple image slider with automatic and manual image changes.

In this case, I have used a total of five images but you can use many more if you want. The image will change automatically every 5 seconds. There are also two buttons to change the image.

Automatic Image Slider in Html, CSS, and Javascript

If you know basic HTML CSS and JavaScript then you can easily understand this design. To create this automatic image slider, first, you need to create an HTML and CSS file.

In this case, I did not create a separate JavaScript file, but you can create a separate file if you want.

Step 1: Create the basic structure of the slider

I have used a little HTML and CSS code below to create the background of this slider. In this case, I have used the slider height 256 px and width 500 px.

I didn’t use any different colors in the background. If you have seen the demo, you will understand that a shadow has been used around this slide for which I have used box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) here.

<div id=”slider”>
</div>
 body {
  margin: 10%;
}
#slider {
  position: relative;
  width: 500px;
  height: 265px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}
Create the basic structure of the slider

Step 2: Add the required images

I have added images to this Automatic Image Slider using the code below and designed those images. I have used a total of five images you can increase or decrease as you wish.

If you take a closer look at the CSS code below, you will understand that I have used Slider Ul Width 10000%.

You may wonder why I used 10,000% here. Take a good look at the image below to understand why and how this slider works.

Add the required images

<ul id=”slideWrap”>
      <li><img src=”img1.jpg” alt=””></li>
      <li><img src=”img2.jpg” alt=””></li>
      <li><img src=”img3.jpg” alt=””></li>
      <li><img src=”img4.jpg” alt=””></li>
      <li><img src=”img5.jpg” alt=””></li>
</ul>

 In this case, the height of the image is 256 px and the width is 500 px. Of course in this case you will use the same size of each image.

#slider ul {
  position: relative;
  list-style: none;
  height: 100%;
  width: 10000%;
  padding: 0;
  margin: 0;
  transition: all 750ms ease;
  left: 0;
}
#slider ul li {
  position: relative;
  height: 100%;
  float: left;
}
#slider ul li img{
  width: 500px;
  height: 265px;
}

Step 3: Add prev and next button

Now we will add the Previs and Next buttons to this slider. The HTML and CSS code below helped to add and design these two buttons.

<a id=”prev” href=”#”>&#8810;</a>
<a id=”next” href=”#”>&#8811;</a>
#slider #prev, #slider #next {
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 150ms ease;
}

Step 4: Determine the exact location of the two buttons

 I have used a little CSS below to place these two buttons in their proper place. I kept the Previs button 10 pixels away from the left.

I kept the next button 10 px away from the right. As a result, these two buttons are located on either side of the slider.

#slider #prev {
  left: 10px;
}
#slider #next {
  right: 10px;
}

I have used the following CSS code to use a small amount of hover effect in the background of these two buttons.

#slider #prev:hover, #slider #next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0;
}
Add prev and next button

Step 5: Activate the image slider by adding JavaScript code

So far we have only designed it, now we will implement the image change of this slider.

var responsiveSlider = function() {
var slider = document.getElementById(“slider”);
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById(“slideWrap”);
var count = 1;
var items = slideList.querySelectorAll(“li”).length;
var prev = document.getElementById(“prev”);
var next = document.getElementById(“next”);
window.addEventListener(‘resize’, function() {
  sliderWidth = slider.offsetWidth;
});

First of all, we will decide in advance what kind of work will be done by clicking on the Next button. If you are a beginner then first of all look at the code structure below. Then follow the explanation below which will help you understand better.

var nextSlide = function() {
  if(count < items) {
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = items) {
    slideList.style.left = “0px”;
    count = 1;
  }
};
determined what kind of effect will work if you click on the previous button.

As we have seen, in the nextSlide variable, we have stored how the Next button will work.
First, we added value if (count <items) this code will work when the amount of image is more than count.

Using else if (count = items) we have determined what will happen if the previous function does not work. If both the image and the count are equal then there will be no change in the slider.

 ‘count’ is the number of times you clicked on the button. If you click on that button once, the value of the count is one. If you click three times at once, the value of the account is 3.

We have decided what kind of change will happen if we click on the Next button. Now we will implement the previous button.

Similarly here we have determined what kind of effect will work if you click on the previous button.

var prevSlide = function() {
  if(count > 1) {
    count = count – 2;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = 1) {
    count = items – 1;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
};
determined what kind of effect will work if you click on the previous button.

Determining what kind of effect will work when clicking the previous and Next buttons in this Automatic Image Slider. Now we will associate those effects with two buttons.

As I said earlier, we have stored how the Next button will work in a constant called ‘next Slider’. Now below we have instructed that if you click on the Next button, that constant will work.

next.addEventListener(“click”, function() {
  nextSlide();
});

We’ve saved what works on the previous button in the ‘prevSlide’. Now below we have instructed that if you click on the previous button, that constant will work.

prev.addEventListener(“click”, function() {
  prevSlide();
});

Since this is an automatic image slider, in this case, I have arranged for the image to change automatically. Here I have used 5000 i.e. 5 seconds. This means the image will change every 5 seconds. If you want the images to change every 2 seconds, use 2000 instead of 5000 here.

setInterval(function() {
  nextSlide()
}, 8000);
};
window.onload = function() {
responsiveSlider();
}
Activate the image slider by adding JavaScript code

Hope you learned from this tutorial how I created this beautiful automatic image slider using HTML CSS and JavaScript code. If you want to download the required source code, you can use the download button below.

If you have any problem understanding how to make this auto image slider then you can definitely let me know by commenting.

Original article source at: https://foolishdeveloper.com/

#javascript #image #slider #html #css 

Как сделать автоматический слайдер изображений в Html, CSS, Javascript

В этой статье вы узнаете, как создать автоматический слайдер изображений с помощью HTML CSS и кода JavaScript. Ранее я поделился с вами еще многими типами ручных и автоматических слайдеров изображений . Как и другие проекты, я надеюсь, вам понравится этот дизайн.

Слайдер изображений — это распространенный веб-элемент, который в настоящее время используется на многих веб-сайтах. Он в основном используется для слайд-шоу на главной странице сайта. Этот тип автоматического слайд-шоу изображений также используется для организации большого количества изображений в галерее. Если вы хотите узнать больше о javascript, ознакомьтесь с моими лучшими проектами HTML, CSS и javascript .

Существует два типа ползунков изображений: автоматический и ручной. В случае автоматического ползунка изображения изображение будет автоматически меняться через равные промежутки времени. В случае с мануалом менять изображение нужно с помощью кнопок Next и Previous.

Автоматический слайдер изображений

При этом изображение можно менять автоматически и вручную. Это означает, что он автоматически изменит изображение, и вы также можете  изменить изображение, используя кнопки «Далее» и «Предварительный просмотр»  по отдельности.

 Дизайн можно создать только с помощью HTML и CSS, но в данном случае я использовал программный код JavaScript.

Если вы хотите узнать, как работают эти автоматические слайд-шоу изображений , вы можете посмотреть живую демонстрацию ниже. Ниже я дал исходный код, так что вы можете скопировать их, если хотите. Вы также можете скачать код с помощью кнопки загрузки внизу статьи.

Как вы можете видеть в демо выше, это очень простой слайдер изображений с автоматической и ручной сменой изображений.

В этом случае я использовал в общей сложности пять изображений, но вы можете использовать гораздо больше, если хотите. Изображение будет меняться автоматически каждые 5 секунд. Также есть две кнопки для смены изображения.

Автоматический слайдер изображений в HTML, CSS и Javascript

Если вы знаете основы HTML, CSS и JavaScript, вы легко разберетесь в этом дизайне. Чтобы создать этот автоматический слайдер изображений, сначала вам нужно создать файл HTML и CSS.

В данном случае я не создавал отдельный файл JavaScript, но вы можете создать отдельный файл, если хотите.

Шаг 1: Создайте базовую структуру слайдера

Я использовал небольшой код HTML и CSS ниже, чтобы создать фон для этого слайдера. В этом случае я использовал ползунок высотой 256 пикселей и шириной 500 пикселей.

Я не использовал разные цвета фона. Если вы видели демонстрацию, вы поймете, что вокруг этого слайда была использована тень, для которой я использовал box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) здесь.

<div id=”slider”>
</div>
 body {
  margin: 10%;
}
#slider {
  position: relative;
  width: 500px;
  height: 265px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}
Создайте базовую структуру слайдера

Шаг 2: Добавьте необходимые изображения

Я добавил изображения в этот автоматический слайдер изображений, используя приведенный ниже код, и разработал эти изображения. Я использовал в общей сложности пять изображений, которые вы можете увеличивать или уменьшать по своему усмотрению.

Если вы внимательно посмотрите на приведенный ниже код CSS, вы поймете, что я использовал Slider Ul Width 10000%.

Вы можете задаться вопросом, почему я использовал здесь 10 000%. Внимательно посмотрите на изображение ниже, чтобы понять, почему и как работает этот ползунок.

Добавьте необходимые изображения

<ul id=”slideWrap”>
      <li><img src=”img1.jpg” alt=””></li>
      <li><img src=”img2.jpg” alt=””></li>
      <li><img src=”img3.jpg” alt=””></li>
      <li><img src=”img4.jpg” alt=””></li>
      <li><img src=”img5.jpg” alt=””></li>
</ul>

 В этом случае высота изображения составляет 256 пикселей, а ширина — 500 пикселей. Конечно, в этом случае вы будете использовать одинаковый размер каждого изображения.

#slider ul {
  position: relative;
  list-style: none;
  height: 100%;
  width: 10000%;
  padding: 0;
  margin: 0;
  transition: all 750ms ease;
  left: 0;
}
#slider ul li {
  position: relative;
  height: 100%;
  float: left;
}
#slider ul li img{
  width: 500px;
  height: 265px;
}

Шаг 3. Добавьте кнопки «Предыдущая» и «Далее»

Теперь мы добавим к этому слайдеру кнопки Previs и Next. Приведенный ниже код HTML и CSS помог добавить и спроектировать эти две кнопки.

<a id=”prev” href=”#”>&#8810;</a>
<a id=”next” href=”#”>&#8811;</a>
#slider #prev, #slider #next {
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 150ms ease;
}

Шаг 4: Определите точное расположение двух кнопок

 Я использовал небольшой CSS ниже, чтобы разместить эти две кнопки на своих местах. Я оставил кнопку «Предварительный просмотр» на расстоянии 10 пикселей от левого края.

Я оставил следующую кнопку на расстоянии 10 пикселей от правого края. В результате эти две кнопки расположены по обе стороны от ползунка.

#slider #prev {
  left: 10px;
}
#slider #next {
  right: 10px;
}

Я использовал следующий код CSS, чтобы использовать небольшой эффект наведения на фоне этих двух кнопок.

#slider #prev:hover, #slider #next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0;
}
Добавить предыдущую и следующую кнопку

Шаг 5. Активируйте ползунок изображения, добавив код JavaScript.

Пока мы его только оформили, теперь реализуем смену изображения этого слайдера.

var responsiveSlider = function() {
var slider = document.getElementById(“slider”);
var sliderWidth = slider.offsetWidth;
var slideList = document.getElementById(“slideWrap”);
var count = 1;
var items = slideList.querySelectorAll(“li”).length;
var prev = document.getElementById(“prev”);
var next = document.getElementById(“next”);
window.addEventListener(‘resize’, function() {
  sliderWidth = slider.offsetWidth;
});

Прежде всего, мы заранее определимся, какая работа будет выполнена, нажав на кнопку «Далее». Если вы новичок, то прежде всего посмотрите на структуру кода ниже. Затем следуйте приведенным ниже объяснениям, которые помогут вам лучше понять.

var nextSlide = function() {
  if(count < items) {
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = items) {
    slideList.style.left = “0px”;
    count = 1;
  }
};
определил, какой эффект будет работать, если вы нажмете на предыдущую кнопку.

Как мы видели, в переменной nextSlide мы сохранили, как будет работать кнопка «Далее».
Во-первых, мы добавили значение if (count <items), этот код будет работать, когда количество изображений больше, чем count.

С помощью else if (count = items) мы определили, что произойдет, если предыдущая функция не сработает. Если и изображение, и количество одинаковы, то слайдер не изменится.

 'count' - это количество раз, когда вы нажали на кнопку. Если вы нажмете на эту кнопку один раз, значение счетчика будет равно единице. Если вы нажмете три раза одновременно, значение учетной записи равно 3.

Мы решили, какие изменения произойдут, если мы нажмем кнопку «Далее». Теперь мы реализуем предыдущую кнопку.

Точно так же здесь мы определили, какой эффект будет работать, если вы нажмете на предыдущую кнопку.

var prevSlide = function() {
  if(count > 1) {
    count = count – 2;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
  else if(count = 1) {
    count = items – 1;
    slideList.style.left = “-” + count * sliderWidth + “px”;
    count++;
  }
};
определил, какой эффект будет работать, если вы нажмете на предыдущую кнопку.

Определение того, какой эффект будет работать при нажатии кнопок «Назад» и «Далее» в этом автоматическом слайдере изображений. Теперь мы свяжем эти эффекты с двумя кнопками.

Как я уже говорил ранее, мы сохранили то, как кнопка «Далее» будет работать, в константе под названием «следующий слайдер». Теперь ниже мы указали, что если вы нажмете кнопку «Далее», эта константа будет работать.

next.addEventListener(“click”, function() {
  nextSlide();
});

Мы сохранили то, что работает на предыдущей кнопке, в «prevSlide». Теперь ниже мы указали, что если вы нажмете на предыдущую кнопку, эта константа будет работать.

prev.addEventListener(“click”, function() {
  prevSlide();
});

Поскольку это автоматический слайдер изображений , в данном случае я устроил автоматическое изменение изображения. Здесь я использовал 5000 т.е. 5 секунд. Это означает, что изображение будет меняться каждые 5 секунд. Если вы хотите, чтобы изображения менялись каждые 2 секунды, используйте здесь 2000 вместо 5000.

setInterval(function() {
  nextSlide()
}, 8000);
};
window.onload = function() {
responsiveSlider();
}
Активируйте ползунок изображения, добавив код JavaScript

Надеюсь, вы узнали из этого урока, как я создал этот красивый автоматический слайдер изображений , используя код HTML CSS и JavaScript. Если вы хотите загрузить необходимый исходный код, вы можете использовать кнопку загрузки ниже.

Если у вас есть какие-либо проблемы с пониманием того, как сделать этот автоматический слайдер изображений, вы обязательно можете сообщить мне об этом в комментариях.

Original article source at:  https://foolishdeveloper.com/

#javascript #image #slider #html #css 

Eva  Murphy

Eva Murphy

1625751960

Laravel API and React Next JS frontend development - 28

In this video, I wanted to touch upon the functionality of adding Chapters inside a Course. The idea was to not think much and start the development and pick up things as they come.

There are places where I get stuck and trying to find answers to it up doing what every developer does - Google and get help. I hope this will help you understand the flow and also how developers debug while doing development.

App url: https://video-reviews.vercel.app
Github code links below:
Next JS App: https://github.com/amitavroy/video-reviews
Laravel API: https://github.com/amitavdevzone/video-review-api

You can find me on:
Twitter: https://twitter.com/amitavroy7​
Discord: https://discord.gg/Em4nuvQk

#next js #api #react next js #next #frontend #development

Jackson  Watson

Jackson Watson

1636473360

What Are The Prerequisite to Learn Next JS in Hindi In 2021

Welcome,  to Next.JS Tutorial For Beginners In Hindi. We will see what are the Prerequisite to Learn Next JS In Hindi in 2021

#next #next