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.
303 lines
8.8 KiB
Plaintext
303 lines
8.8 KiB
Plaintext
------------------------------> 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> |