React Website with Image Slideshow
Tags: react, javascript, webdev, webdesign
Published: 2021-03-19 13:51:23

### <center>React Website With Image Slideshow</center>

------------

#### <center>Browse our [Teachable](http://anobject.teachable.com "Teachable") courses.</center>

------------

![React Website with Image Slideshow](https://user-images.githubusercontent.com/58220766/111089213-3bd1d180-8501-11eb-84d4-a105d66b144c.png)

### We'll build this webpage in 3 main parts.

1. **Top** - the greeting for our customer
2. **Middle** - a place for information about our business' mission
3. **Bottom** - a footer for information about our business

#### We'll create a Home.js component for our main page.

------------

### The Top.

#### All we're going to do here is set an image for our background and title for our company.

The image gallery comes later; it's a separate element that we float around our page depending on the dimensions.

<br />

```
<div className="section1">
    <img src="./images/background-section1.jpg" alt="" className="background_image_section1" />
    <div className="title">Sinclaire<br />Market</div>
</div>
```

This is our result:

<br />

![top](https://user-images.githubusercontent.com/58220766/108138005-103b0300-708b-11eb-82ae-14bd4192343b.png)

<br />

------------

### The Middle.

#### For this section we'll have an image for our background; a message to our user; an image; and a call to action.

<br />

```
<div className="section2" style={{ backgroundImage: "url('images/marble.jpg')" }}>
    <img src="./images/background-section2.png" alt="" className="background_image_section2" />
    <div className="left_side">
        Organic.<br/>Ethical.<br/>Fresh.
    </div>

    <div className="right_side">
        <img src="./images/spice-bowl.png" alt=""/>
    </div>

    <div className="call_to_action">
        Browse our selection.
    </div>
</div>
```

This is our result:

<br />

![middle](https://user-images.githubusercontent.com/58220766/108137658-5479d380-708a-11eb-8502-41605e61b733.png)

<br />

------------

### The Bottom.

#### A simple unordered list of items that can act as links.

<br />

```
<div className="section3">
    <div className="contacts" >
        <section className="contact_section" >
            <ul>
                <li>Affiliates</li>
                <li>Careers</li>
                <li>Privacy</li>
            </ul>
        </section>
        <section className="contact_section" >
            <ul>
                <li>Telephone <i className="fas fa-phone-square-alt"></i> </li>
                <li>Email <i className="fas fa-envelope-square"></i> </li>
            </ul>
        </section>
        <section className="contact_section" >
            <ul>
                <li>Instagram <i className="fab fa-instagram-square"></i> </li>
                <li>Twitter <i className="fab fa-twitter-square"></i> </li>
                <li>Facebook <i className="fab fa-facebook-square"></i> </li>
            </ul>
        </section>
    </div>
</div>
```

This is our result:

<br />

![bottom](https://user-images.githubusercontent.com/58220766/108137671-5c397800-708a-11eb-984e-edbbcf9db970.png)

<br />

------------

### Let's get our image gallery up and running.

#### We created this component in a separate tutorial.

You can find it [here](https://dev.to/anobjectisa/react-js-slideshow-responsive-autoplay-with-manual-navigation-buttons-2a49 "here").

We're simply going to import and modify it to fit our project.

All we really need to do is create a parent element for it in our project, we'll call it the gallery, and position it on our page.

```
<div className="gallery">
    <Deck gallery={gallery} /> 
</div>
```

<br />

![gallery placeholder](https://user-images.githubusercontent.com/58220766/108137582-23010800-708a-11eb-8b16-ab3e72b192ef.png)

<br />

We'll change some code in our 'Deck.js' component (the image gallery) and fit it into our parent element.

<br />

![image gallery working](https://user-images.githubusercontent.com/58220766/108137737-7d9a6400-708a-11eb-884a-8063472ffa2d.png)

<br />

------------

### Let's finish by implementing a navigation bar.

#### We created this component in a separate tutorial.


We're simply going to import and modify it to fit our project.

All we really need to do is change the color scheme and icon being used.

This is our result:

<br />

![nav bar desktop](https://user-images.githubusercontent.com/58220766/108138302-b424ae80-708b-11eb-86a2-4b120023c567.png)

<br />

------------

### There is much more nuance to this project.

You can view our video tutorial down below.

You can get the source files [here](https://github.com/an-object-is-a/react-webpage-02 "here").

All images we're gathered from [Pexels](https://www.pexels.com/ "Pexels").

All contact image icons we're gathered from [Font Awesome](https://fontawesome.com/ "Font Awesome").

------------

#### <center>If you want a more in-depth guide, check out my full video tutorial on YouTube, **[An Object Is A](https://www.youtube.com/c/anobjectisa "An Object Is A")**.</center>

### <center>React Website with Image Slideshow</center>

{% youtube ltk0aNYB_mM %}