Question 384895 in Html Question posted in
Some basic documentation can be found here.

how to display images kept in a folder one by one using index.html

html file like this:

<html>
<head>
<meta name="description" content="Department Events">
</head>
<title> Recent and Ongoing Events in the Department of Physics </title>
<body style="background-color:powderblue;">
<center>
<img style="width: 985px; height: 408px;" src="physics-1.jpg">
<h1 style="color:blue;">Department of Physics - Events and Activities</h1>
<hr>
</body>
</html>

Here I display image physics-1.jpg. But I want to display all images one by one from a folder photo so that each image is shown for 10 seconds and then changes to next images and ultimately back to first image and so on…

Could you please guide me what changes are needed in index.html page?

Thanks

a simple working example html code would be very helpful.

Tags:

3

Answers


  1. 0

    What you are trying to achieve is a typical slider, where images changes after some amount of time passed. You cannot create a slider just with HTML, you need to know about CSS or JavaScript to change the images dynamically.

    Login or Signup to reply.
  2. 0

    This is slider just created with HTML and CSS, Check this out bro.

    Link: https://codepen.io/saran_3012/pen/PogrQZZ

    HTML

    <div id="slider-container">
  <div id="slider">
    <div class="card">
      <img class="card-img" src="https://e0.pxfuel.com/wallpapers/316/193/desktop-wallpaper-javascript.jpg" alt="image"/>
    </div>
    <div class="card">
      <img class="card-img" src="https://i.pinimg.com/originals/b0/73/e9/b073e9150cc603e3a5b757be38fc771b.jpg" alt="image"/>
    </div>
    <div class="card">
      <img class="card-img" src="https://blog.appsignal.com/_next/image?url=%2Fimages%2Fblog%2F2022-12%2Ftop-5-nodejs-posts-in-2022.png&w=1920&q=50" alt="image"/>
    </div>
    <div class="card">
      <img class="card-img" src="https://miro.medium.com/v2/resize:fit:805/1*7fe7SkSNP6Y8PvTRm4Jl6Q.png" alt="image"/>
    </div>
    <div class="card">
      <img class="card-img" src="https://webimages.mongodb.com/_com_assets/cms/kuzt9r42or1fxvlq2-Meta_Generic.png" alt="image"/>
    </div>
  </div>
</div>

    CSS

    *{
  box-sizing: border-box;
}
#slider-container{
  margin: auto;
  height: 380px;
  width: 800px;
  overflow: hidden;
}

#slider{
  height: 100%;
  width: 100%;
  display: flex;
  animation: slider 10s infinite;
}

.card{
  border: 2px solid white;
  flex-shrink: 0;
  height: 100%;
  width: 100%;
}

.card-img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@keyframes slider{
  0%, 100%{
    transform: translateX(0%);
  }
  20%{
    transform: translateX(-100%);
  }
  40%{
    transform: translateX(-200%);
  }
  60%{
    transform: translateX(-300%);
  }
  80%{
    transform: translateX(-400%);
  }
}

    If you are a beginner, you can try learning CSS and JavaScript.
    It can enhance your web.

    And try to avoid inline styles (Do not embed the styles in HTML). It makes the debugging harder.

    Login or Signup to reply.
  3. 0

    Plain HTML does not support such dynamic abilities. For that you need to use other mechanisms such as Javascript client-side code, something like :

    <html>
    <head>
        <meta name="description" content="Department Events">
        <script>
            var folder = 'https://i.imgur.com/' // set where your images are stored in server
            var images = ['MrqyDDY.jpeg', 'YnSn3Fj.jpeg', 's3xpPGP.png'] // list of image files
            var loopPeriod = 1 // pause in seconds
            var ix = -1
            function loopImg() {
                ix = ++ix%images.length
                let img = document.querySelector("#imgPlaceholder")
                img.src = folder + images[ix]
                setTimeout(() => { loopImg() }, 1000 * loopPeriod);
            }
            document.addEventListener("DOMContentLoaded", (event) => {
                loopImg();
            });
        </script>
    </head>
    <title> Recent and Ongoing Events in the Department of Physics </title>
    <body style="background-color:powderblue;">
        <div style="text-align: center;">
            <img id="imgPlaceholder" style="height: 300px;">
        </div>
        <h1 style="color:blue;">Department of Physics - Events and Activities</h1>
        <hr>
    </body>
</html>

    And btw, <center> tag is outdated, unsupported in modern browsers, so you should use text-align: center CSS attribute of parent html node instead.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search