Horizontal Auto slider and popup message source code

horizontal auto-slider card that redirects to a website when a thumbnail is clicked. This example uses HTML, CSS, and JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>Horizontal Auto Slider Card</title>
  <style>
    .slider-container {
      width: 400px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }

    .slider {
      width: 2000px;
      height: 100%;
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .slide {
      flex: 0 0 400px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .slide img {
      max-width: 100%;
      max-height: 100%;
    }
  </style>
</head>
<body>
  <div class="slider-container">
    <div class="slider">
      <div class="slide">
        <a href="https://www.example1.com" target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPz96Sz11bPKMlQds_CPm2nmaJUUmCu0hMiqkfTHnYOOw_ZUsG_tMrvsgcCe1anM4mf_FZYrKjpTojI8dRo3RiyUAxdVQzlYgR2ubSEmPedZPBbTS-CLXz1UixweYBHRDEMnR22CyInF_kAzEPDKdmRauYSPx6MYCxFYT3R8jDC-SoOFagqE3pt_wn/s3264/20230428_090720.jpg" alt="Thumbnail 1">
        </a>
      </div>
      <div class="slide">
        <a href="https://www.example2.com" target="_blank">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPz96Sz11bPKMlQds_CPm2nmaJUUmCu0hMiqkfTHnYOOw_ZUsG_tMrvsgcCe1anM4mf_FZYrKjpTojI8dRo3RiyUAxdVQzlYgR2ubSEmPedZPBbTS-CLXz1UixweYBHRDEMnR22CyInF_kAzEPDKdmRauYSPx6MYCxFYT3R8jDC-SoOFagqE3pt_wn/s3264/20230428_090720.jpg" alt="Thumbnail 2">
        </a>
      </div>
      <div class="slide">
        <a href="https://www.example3.com" target="_blank">
          <img src="thumbnail3.jpg" alt="Thumbnail 3">
        </a>
      </div>
      <div class="slide">
        <a href="https://www.example4.com" target="_blank">
          <img src="thumbnail4.jpg" alt="Thumbnail 4">
        </a>
      </div>
      <div class="slide">
        <a href="https://www.example5.com" target="_blank">
          <img src="thumbnail5.jpg" alt="Thumbnail 5">
        </a>
      </div>
      <div class="slide">
        <a href="https://www.example6.com" target="_blank">
          <img src="thumbnail6.jpg" alt="Thumbnail 6">
        </a>
      </div>
      <div class="slide">
        <a href="https://www.example7.com" target="_blank">
          <img src="thumbnail7.jpg" alt="Thumbnail 7">
        </a>
      </div>
      <div class="slide">
        <a href="https://www.example8.com" target="_blank">
          <img src="thumbnail8.jpg" alt="Thumbnail 8">
        </a>
      </div>
      <!-- Add more slides here as needed -->
    </div>
  </div>

  <script>
    const sliders = document.querySelectorAll('.slider');

    sliders.forEach((slider) => {
      const slides = slider.querySelectorAll('.slide');
      const totalSlides = slides.length;
      let slidePosition = 0;

      slider.addEventListener('click', function(event) {
        const target = event.target;
        if (target.tagName === 'IMG') {
          const slideIndex = Array.from(slides).indexOf(target.parentElement);
          slidePosition = -slideIndex * 400;
          slider.style.transform = `translateX(${slidePosition}px)`;
        }
      });

      setInterval(() => {
        slidePosition -= 400;
        if (slidePosition <= -((totalSlides - 1) * 400)) {
          slidePosition = 0;
        }
        slider.style.transform = `translateX(${slidePosition}px)`;
      }, 3000);
    });
  </script>
</body>
.

7627FD45 b...ref

In this example, we create a container with a fixed width and height to hold the slider. The slider itself is a flex container with each slide having a width of 400 pixels. The slides are positioned horizontally using the translateX property.

When a thumbnail image is clicked, the JavaScript code calculates the index of the clicked slide and adjusts the slidePosition accordingly to slide to the desired position. The setInterval function is used to automatically slide the cards every 3 seconds.

You can add more slides by duplicating the slide div and modifying the image URL and link in the anchor (a) tags.

Please make sure to replace the placeholder image URLs (thumbnail1.jpg, thumbnail2.jpg, thumbnail3.jpg) with the actual URLs of your thumbnail images, and replace the website URLs (https://www.example1.com, https://www.example2.com, https://www.example3.com) with the desired target websites.

Feel free to customize the styling and modify the code according to your specific needs.

Here's an example of the HTML code for a popup message with a thumbnail and a "Learn More" button:

<!DOCTYPE html>
<html>
<head>
  <title>Popup Message</title>
  <style>
    /* CSS for the popup */
    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #f9f9f9;
      padding: 20px;
      border: 1px solid #ccc;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
      z-index: 9999;
    }

    .thumbnail {
      max-width: 200px;
      height: auto;
    }

    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #ff7f50;
      color: #fff;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <!-- Popup content -->
  <div class="popup">
    <img src="thumbnail.jpg" alt="Colorful Thumbnail" class="thumbnail">
    <h1>Attention! Important Announcement!</h1>
    <p>Discover exciting news, updates, and amazing offers! Click the button below to dive deeper into the details.</p>
    <a href="learn-more.html" class="button">Learn More</a>
  </div>

  <!-- Your website content -->
  <h1>Welcome to My Website</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <!-- Add your remaining HTML content here -->

</body>
    </html>
    .

Make sure to replace "thumbnail.jpg" with the actual file path or URL of your colorful thumbnail image. You can also customize the CSS styles within the <style> tags to suit your preferences.

#Horizontal Auto slider and popup message source code Html JavaScript Python Auto slider

Terlaris Minggu Ini

Pencarian Populer

Website Update Announcement ×

Contract us

Horizontal Auto slider and popup message source code

Send Message