DEV Community

Cover image for React Website with Image Slideshow
an-object-is-a
an-object-is-a

Posted on

React Website with Image Slideshow

React Website With Image Slideshow


Browse our Teachable courses.


React Website with Image Slideshow

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.

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

This is our result:

top


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.

<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>
Enter fullscreen mode Exit fullscreen mode

This is our result:

middle


The Bottom.

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

<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>
Enter fullscreen mode Exit fullscreen mode

This is our result:

bottom


Let's get our image gallery up and running.

We created this component in a separate tutorial.

You can find it 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>
Enter fullscreen mode Exit fullscreen mode

gallery placeholder

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

image gallery working


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:

nav bar desktop


There is much more nuance to this project.

You can view our video tutorial down below.

You can get the source files here.

All images we're gathered from Pexels.

All contact image icons we're gathered from Font Awesome.


If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

React Website with Image Slideshow

Discussion (0)