slider custom

by oktaviardi pratama

HTML

<div class="slider-container">
  <div class="slider">
    <!-- Left side slider for selected article -->
    <div class="selected-article">
      <!-- Place the content of the selected article here -->
      <h2>Selected Article Title</h2>
      <p>Selected article content goes here.</p>
    </div>
  </div>
  <div class="thumbnails">
    <!-- Thumbnails for other articles -->
    <div class="thumbnail" onclick="setActiveArticle(0)">Thumbnail 1</div>
    <div class="thumbnail" onclick="setActiveArticle(1)">Thumbnail 2</div>
    <div class="thumbnail" onclick="setActiveArticle(2)">Thumbnail 3</div>
    <!-- Add more thumbnails here -->
  </div>
</div>

CSS

.slider-container .thumbnails{
  background-color: #ccc;
  width:50%;
}

JavaScript

// JavaScript code to handle the interval and slider functionality

const articles = [
  { title: "Article 1", content: "Content for Article 1" },
  { title: "Article 2", content: "Content for Article 2" },
  { title: "Article 3", content: "Content for Article 3" },
  // Add more articles here
];

let currentIndex = 0;
const selectedArticle = document.querySelector('.selected-article');

function showSelectedArticle() {
  selectedArticle.innerHTML = `
    <h2>${articles[currentIndex].title}</h2>
    <p>${articles[currentIndex].content}</p>
  `;
}

function setActiveArticle(index) {
  currentIndex = index;
  showSelectedArticle();
}

function showNextArticle() {
  currentIndex = (currentIndex + 1) % articles.length;
  showSelectedArticle();
}

// Set the interval to show the next article every 5 seconds (adjust as needed)
const interval = setInterval(showNextArticle, 5000);

// Stop the interval when the user clicks on a thumbnail
function stopInterval() {
  clearInterval(interval);
}

// Show the initial selected article
showSelectedArticle();