How to create image slider for blogger HTML, CSS, Javascript

Learn How to create a movable image slider for Blogger with HTML Javascript CSS code Ar3school

To create a slider photo using Java, HTML, to Blogger, you'll need to utilize code HTML, CSS, and potentially JavaScript. However, Java is not typically used directly in the front end for web development; JavaScript is the language commonly used. Here's a basic example of how you might create slider images using HTML, CSS, and JavaScript in a Blogger post:


Image 1 Image 2 Image 3


HTML Code: 


<div class="slider">
    <img alt="Image 1" id="img-1" src="https://images.bannerbear.com/direct/EjJywNMlJm5zmerB8a/requests/000/033/000/213/0Mn5r3E1XY0gmWDZQWPoD9kg7/9e42168a169264bb575a5ec10acd1c8942967845.jpg" />
    <img alt="Image 2" id="img-2" src="https://images.bannerbear.com/direct/EjJywNMlJm5zmerB8a/requests/000/033/000/213/0Mn5r3E1XY0gmWDZQWPoD9kg7/9e42168a169264bb575a5ec10acd1c8942967845.jpg" />
    <img alt="Image 3" id="img-3" src="https://images.bannerbear.com/direct/EjJywNMlJm5zmerB8a/requests/000/033/000/213/0Mn5r3E1XY0gmWDZQWPoD9kg7/9e42168a169264bb575a5ec10acd1c8942967845.jpg" />
  </div>
  <div class="navigation-button">
    <span class="dot active" onclick="changeSlide(0)"></span>
    <span class="dot" onclick="changeSlide(1)"></span>
    <span class="dot" onclick="changeSlide(2)"></span>
  </div>





 CSS Code: 


<style> 
 .slider {
    width: 100%;
    height: 510px;
    position: relative;
  }

  .slider img {
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0;
    left: 0;
    /* transition: all 0.5s ease-in-out; */
  }

  .slider img:first-child {
    z-index: 1;
  }

  .slider img:nth-child(2) {
    z-index: 0;
  }

  .navigation-button {
    text-align: center;
    position: relative;
  }

  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
  }

  .active,
  .dot:hover {
    background-color: #717171;
  }

</style> 



 JAVASCRIPT Code: 


<script> 
  var currentImg = 0;
  var imgs = document.querySelectorAll('.slider img');
  let dots = document.querySelectorAll('.dot');
  var interval = 3000;

  // Second banner
  var secondEventTitle = 'Hi! *Freshmen* Orientation Day';

  // Third banner
  var thirdEventDate = new Date('2023-02-01'); // pull this from database
  var thirdEventDateString = thirdEventDate.toLocaleDateString('en-us', { year: 'numeric', month: 'short', day: 'numeric' });
  var days = calculateDays(new Date(), thirdEventDate) || 0;
  const countdownText = days > 0 ? `${days} days left` : 'Live Now!';

  var secondImageUrl = `https://ondemand.bannerbear.com/simpleurl/01YWAxB7nGYdJrKoXM/title/text/${encodeURIComponent(secondEventTitle)}`;
  var thirdImageUrl = `https://ondemand.bannerbear.com/simpleurl/ley9O0B2ZGbB4GjRDY/date/text/${encodeURIComponent(
    thirdEventDateString
  )}/countdown/text/${encodeURIComponent(countdownText)}`;

  document.getElementById('img-2').src = secondImageUrl;
  document.getElementById('img-3').src = thirdImageUrl;

  var timer = setInterval(changeSlide, interval);

  function changeSlide(n) {
    for (var i = 0; i < imgs.length; i++) {
      imgs[i].style.opacity = 0;
      dots[i].className = dots[i].className.replace(' active', '');
    }

    currentImg = (currentImg + 1) % imgs.length;

    if (n != undefined) {
      clearInterval(timer);
      timer = setInterval(changeSlide, interval);
      currentImg = n;
    }

    imgs[currentImg].style.opacity = 1;
    dots[currentImg].className += ' active';
  }

  function calculateDays(today, eventDate) {
    const difference = eventDate.getTime() - today.getTime();

    return Math.ceil(difference / (1000 * 3600 * 24)); // convert to days
  }
</script> 




 Note: 

Now you can how to create a simple image slider Ensure to replace "image1.jpg", "image2.jpg", etc., with the actual image URLs you want to use in your slider. 

To embed these total pics slider codes in your Blogger post: 


Go to your Blogger dashboard and create a new post or edit an existing one. Switch to the HTML editing mode for the post. Paste the HTML, CSS, and JavaScript code into the HTML editing mode of your post. Adjust the image URLs and styles as needed. Preview or publish your post to see the slider image in action. Remember to test this setup in your Blogger post and adjust it according to your design and functionality needs. Also, consider whether your Blogger template might conflict with the custom styles or scripts.

Comments :

Post a Comment