ronreciproco123
/
B322
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '657604445e'
${ noResults }
B322/groupwork/frontend/s06/activity/mini-activity.txt

303 lines
8.8 KiB
Plaintext
Raw Normal View History Unescape Escape

s08 discussion
1 year ago
------------------------------> 1. Use effective search terms: <---------------------------------------------------
1. How to create a self auto-scrolling image in applications that displays multiple pictures in website?
- How to do scrollable Image Gallery in HTML AND CSS?
- How to create slideshow using HTML & CSS?
- Automatic image slider in html and css
- HTML AND CSS Image Carousel Scripts
2. How to create of self auto-scrolling in HTML Structure?
3. How to create of self auto-scrolling in CSS Styles?
4. How to create of self auto-scrolling in JavaScript?
5.
------------------------------> 2. Read official documentation or look for reliable sources of information <---------------------------------------------------
for reference - https://www.geeksforgeeks.org/programming-a-slideshow-with-html-and-css/
- https://www.w3schools.com/howto/howto_css_image_gallery_scroll.asp
- https://stackoverflow.com/questions/15485694/auto-scrolling-with-css
- https://www.youtube.com/watch?v=MaRmAmFI3Sc&ab_channel=WinterwindInc.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML and CSS Slideshow</title>
<style>
body {
font-family: Helvetica, sans-serif;
padding: 5%;
text-align: center;
font-size: 50;
}
/* Styling the area of the slides */
#slideshow {
overflow: hidden;
height: 510px;
width: 728px;
margin: 0 auto;
}
/* Style each of the sides
with a fixed width and height */
.slide {
float: left;
height: 510px;
width: 728px;
}
/* Add animation to the slides */
.slide-wrapper {
/* Calculate the total width on the
basis of number of slides */
width: calc(728px * 4);
/* Specify the animation with the
duration and speed */
animation: slide 10s ease infinite;
}
/* Set the background color
of each of the slides */
.slide:nth-child(1) {
background: green;
}
.slide:nth-child(2) {
background: pink;
}
.slide:nth-child(3) {
background: red;
}
.slide:nth-child(4) {
background: yellow;
}
/* Define the animation
for the slideshow */
@keyframes slide {
/* Calculate the margin-left for
each of the slides */
20% {
margin-left: 0px;
}
40% {
margin-left: calc(-728px * 1);
}
60% {
margin-left: calc(-728px * 2);
}
80% {
margin-left: calc(-728px * 3);
}
}
</style>
</head>
<body>
<!-- Define the slideshow container -->
<div id="slideshow">
<div class="slide-wrapper">
<!-- Define each of the slides
and write the content -->
<div class="slide">
<h1 class="slide-number">
GeeksforGeeks
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
A computer science portal
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
This is an example of
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
Slideshow with HTML and CSS only
</h1>
</div>
</div>
</div>
</body>
</html>
------------------------------> 3. Scanning and Reading <---------------------------------------------------
Building a Bootstrap carousel is a great way to display a rotating set of images or content on your website.
Bootstrap provides a simple and flexible framework for building carousels.
Here's a step-by-step approach to building a Bootstrap carousel:
1. Include Bootstrap:
First, make sure you include Bootstrap in your HTML document. You can either download Bootstrap and include it locally or use a content delivery network (CDN).
Here's an example using the CDN:
<!-- Add these links in the <head> of your HTML file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
2. Structure your HTML:
Create the basic HTML structure for your carousel. You'll need an outer container and a set of slide elements.
Here's an example:
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>
<!-- Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" alt="Image 1">
<div class="carousel-caption">
<h3>Slide 1</h3>
<p>Description for Slide 1</p>
</div>
</div>
<div class="carousel-item">
<img src="image2.jpg" alt="Image 2">
<div class="carousel-caption">
<h3>Slide 2</h3>
<p>Description for Slide 2</p>
</div>
</div>
<!-- Add more slides as needed -->
</div>
<!-- Controls -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
3. Customize as needed:
- Replace the src attributes in the <img> tags with the paths to your images.
- Modify the content and styles inside the <div class="carousel-caption"> to match your design.
4. Add CSS and Js (Optional)
- If you want to apply custom styles to your carousel, you can add your own CSS rules to override Bootstrap's default styles.
- Bootstrap's carousel should work without any additional JavaScript. However, if you want to add custom functionality, such as controlling the carousel programmatically, you can write JavaScript code accordingly.
5. Test and Preview:
Save your HTML file and open it in a web browser to preview your Bootstrap carousel. Make sure it's functioning as expected and looks good.
That's it! You've created a Bootstrap carousel. You can further customize it by exploring Bootstrap's documentation and adding additional features like autoplay, interval timing, and more.
------------------------------> 4. Test your understanding <---------------------------------------------------
<!-- HTML code -->
<div class="image-gallery">
<ul>
<li><img src="image1.jpg" alt="Image 1"></li>
<li><img src="image2.jpg" alt="Image 2"></li>
<li><img src="image3.jpg" alt="Image 3"></li>
<!-- Add more images as needed -->
</ul>
</div>
<!-- CSS code -->
.image-gallery {
width: 300px; /* Adjust the width as needed */
height: 200px; /* Adjust the height as needed */
overflow: hidden;
}
.image-gallery ul {
list-style: none;
padding: 0;
margin: 0;
display: flex; /* Display images in a horizontal row */
animation: scrollImages 10s linear infinite; /* Adjust the animation duration */
}
.image-gallery li {
margin-right: 10px; /* Adjust spacing between images */
}
.image-gallery img {
max-width: 100%;
height: auto;
}
@keyframes scrollImages {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%); /* Move the images to the left */
}
}
<!-- Another HTML Code -->
<html>
<head>
<title>HTML and CSS Slideshow</title>
</head>
<body>
<!-- Define the slideshow container -->
<div id="slideshow">
<div class="slide-wrapper">
<!-- Define each of the slides
and write the content -->
<div class="slide">
<h1 class="slide-number">
GeeksforGeeks
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
A computer science portal
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
This is an example of
</h1>
</div>
<div class="slide">
<h1 class="slide-number">
Slideshow with HTML and CSS only
</h1>
</div>
</div>
</div>
</body>
</html>