辅导Coding Lab 9

日期：2023-12-03 08:00

Coding Lab 9
Objective:
In this assignment, we will be implementing the image carousel feature. The purpose of the image
carousel is to present images in a rotating or sliding fashion, providing a visually appealing method to
showcase multiple images. Image carousels are commonly used in various platforms such as
ecommerce websites and social media platforms like Instagram. For example:
In this assignment, we will implement the image carousel feature in a mock Instagram webpage.
The starter code includes: one image and two buttons. When clicked, the two buttons should update
the image to the next or previous image for the carousel. We provide URLs for example images in an
array, but you will need to write all the Javascript (and some HTML) to make these buttons functional.
Instructions:
Task HTML Task Javascript Task
STARTER CODE The starter code includes one image
and two buttons
The starter code includes
URLs for example images
in an array.
1. Connect HTML and
Javascript
● Make sure when the buttons
are clicked that a function is
called.
● Create the function with
the same name as the
HTML button uses.
Bonus Question:
Task HTML Task Javascript Task
2. Replace the existing image
with a new image element
● Create a new image
element and use it to
replace the existing
image. You must select
the image by class.
3. Use the ID attribute to track
index values, while making the
new image display the next
image in the carousel.
● Use the image’s ID to track
the current index for the
image array
● Access the image’s
current ID.
● Increase the value by
one.
● Use that to set the URL
for the new image
element you created
● Set the class and id for
the new image element
you created.
4. Ensure the carousel loops
back to the first image
● Use an if statement to
check whether the
current index is greater
than the length of the
array. If so, start back at
the first image in the
array.
5. Make the next and previous
buttons operate differently
(next should count up,
showing the next image,
previous should count down,
showing the previous image)
● Using the same function,
provide a different input for
the next and previous buttons
● Take the input from the
button
● Use the input to either
decrease or increase the
index depending whether
the next or previous
button was clicked.
● Make sure that you loop
back to the first/last
image when the last/first
image is reached (for the
next/previous buttons,
respectively)
Resources:
1. Starter code: HTML and CSS template code for the Instagram feed webpage, that you can opt
to use as a starting point for developing your assignment:
https://drive.google.com/drive/folders/1NsEp5ZzLe6LJd2xww1d3XtHMkzysuXej?usp=drive_link
or https://codepen.io/Kristen-Vaccaro/pen/poGxrzJ
Notes:
1) The section of the HTML that requires modification is indicated by comments starting
with

and

. It is sufficient to modify only those
specific portions of the code (bonus questions may require edits outside of the area).
2) No modifications are required for any of the CSS code provided in this assignment.
An example is shown below:
Task HTML Task Javascript Task
1. Like button functionality ● The starter code contains the
like icon(empty heart). When it
is clicked, invoke the javascript
function which replaces it with a
filled(red) heart.
● Implement a JavaScript
function that, upon
invocation, replaces the
like icon image (initially
unfilled empty heart) with
an image of a filled red
heart icon for the like
functionality.
2. Image Carousel/Image slider
functionality
● When the images are swiped
left or right, the JavaScript
function which implements the
image slider should be
invoked.
● Implement a JavaScript
function that displays the
next/previous image in a
series of images when
the image is swiped left
and right accordingly
(Note: No clicking on
previous/next icons is
involved here). Hint: You
can utilize the swipeleft
and swiperight events.
Before an action is performed*:
After performing action:
1. Clicking on the next icon
* Template for this screen available in the Starter Code