Skip to main content
adicionou 474 caracteres ao conteúdo
Fonte Link
Icaro Martins
  • 4,3mil
  • 14
  • 24
  • 35

HTML:

<html lang="en">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<link rel="stylesheet" href="css/css_home.css">



<title>Official 7R</title>
  
  <ul class="navbar-nav ml-auto">
      

    <li class="nav-item active">
      <a class="nav-link" href="#">HOME
            <span class="sr-only">(current)</span>
          </a>
    </li>
      
    <li class="nav-item">
      <a class="nav-link" href="#">A STORY</a>
    </li>
      
    <li class="nav-item">
      <a class="nav-link" href="#">WHO MADE YOUR CLOTHES</a>
    </li>
     
    <li class="nav-item">
      <a class="nav-link" href="#">ARTICLES</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-link" href="#">SUPPORT US</a>
    </li>
      
    <li class="nav-item">
      <a class="nav-link" href="#">OUR TEAM</a>
    </li>
      
  </ul>
</div>
  <div class="slider">
  <div class="slide current">
    <div class="content">
      <h1>Slide One</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Two</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Three</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Four</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Five</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Six</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
</div>
<div class="buttons">
  <button id="prev"><i class="fas fa-arrow-left" onclick=""></i></button>
  <button id="next"><i class="fas fa-arrow-right"></i></button>
</div>

JS:

const slides = document.querySelectorAll(".slide");

const next = document.querySelector("#next"); const prev = document.querySelector("#prev"); const auto = false; // Auto scroll const intervalTime = 5000; let slideInterval;

const nextSlide = () => { // Get current class const current = document.querySelector(".current"); // Remove current class current.classList.remove("current"); // Check for next slide if (current.nextElementSibling) { // Add current to next sibling current.nextElementSibling.classList.add("current"); } else { // Add current to start slides[0].classList.add("current"); } setTimeout(() => current.classList.remove("current")); };

const prevSlide = () => { // Get current class const current = document.querySelector(".current"); // Remove current class current.classList.remove("current"); // Check for prev slide if (current.previousElementSibling) { // Add current to prev sibling current.previousElementSibling.classList.add("current"); } else { // Add current to last slides[slides.length - 1].classList.add("current"); } setTimeout(() => current.classList.remove("current")); };

// Button events next.addEventListener("click", (e) => { nextSlide(); if (auto) { clearInterval(slideInterval); slideInterval = setInterval(nextSlide, intervalTime); } });

prev.addEventListener("click", (e) => { prevSlide(); if (auto) { clearInterval(slideInterval); slideInterval = setInterval(nextSlide, intervalTime); } });

const slides = document.querySelectorAll(".slide");
const next = document.querySelector("#next");
const prev = document.querySelector("#prev");
const auto = false; // Auto scroll
const intervalTime = 5000;
let slideInterval;

const nextSlide = () => {
  // Get current class
  const current = document.querySelector(".current");
  // Remove current class
  current.classList.remove("current");
  // Check for next slide
  if (current.nextElementSibling) {
    // Add current to next sibling
    current.nextElementSibling.classList.add("current");
  } else {
    // Add current to start
    slides[0].classList.add("current");
  }
  setTimeout(() => current.classList.remove("current"));
};

const prevSlide = () => {
  // Get current class
  const current = document.querySelector(".current");
  // Remove current class
  current.classList.remove("current");
  // Check for prev slide
  if (current.previousElementSibling) {
    // Add current to prev sibling
    current.previousElementSibling.classList.add("current");
  } else {
    // Add current to last
    slides[slides.length - 1].classList.add("current");
  }
  setTimeout(() => current.classList.remove("current"));
};

// Button events
next.addEventListener("click", (e) => {
  nextSlide();
  if (auto) {
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, intervalTime);
  }
});

prev.addEventListener("click", (e) => {
  prevSlide();
  if (auto) {
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, intervalTime);
  }
});

// Auto slide
if (auto) {
  // Run next slide at interval time
  slideInterval = setInterval(nextSlide, intervalTime);
}
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <link rel="stylesheet" href="css/css_home.css">



  <title>Official 7R</title>

</head>





<body>

  <!-- NAVBAR -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white shadow fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#"><img src="img/7R.png" width="80px" height="80px"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">


        <ul class="navbar-nav ml-auto">


          <li class="nav-item active">
            <a class="nav-link" href="#">HOME
                <span class="sr-only">(current)</span>
              </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">A STORY</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">WHO MADE YOUR CLOTHES</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">ARTICLES</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">SUPPORT US</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">OUR TEAM</a>
          </li>

        </ul>
      </div>
    </div>
  </nav>

  <!-- Slider -->

  <div class="slider">
    <div class="slide current">
      <div class="content">
        <h1>Slide One</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Two</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Three</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Four</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Five</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Six</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
  </div>
  <div class="buttons">
    <button id="prev"><i class="fas fa-arrow-left" onclick=""></i></button>
    <button id="next"><i class="fas fa-arrow-right"></i></button>
  </div>
  <script src="Java%2520Script/main.js"></script>

</body>

</html>

// Auto slide if (auto) { // Run next slide at interval time slideInterval = setInterval(nextSlide, intervalTime); }

 

HTML:

<html lang="en">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<link rel="stylesheet" href="css/css_home.css">



<title>Official 7R</title>
  
  <ul class="navbar-nav ml-auto">
      

    <li class="nav-item active">
      <a class="nav-link" href="#">HOME
            <span class="sr-only">(current)</span>
          </a>
    </li>
      
    <li class="nav-item">
      <a class="nav-link" href="#">A STORY</a>
    </li>
      
    <li class="nav-item">
      <a class="nav-link" href="#">WHO MADE YOUR CLOTHES</a>
    </li>
     
    <li class="nav-item">
      <a class="nav-link" href="#">ARTICLES</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-link" href="#">SUPPORT US</a>
    </li>
      
    <li class="nav-item">
      <a class="nav-link" href="#">OUR TEAM</a>
    </li>
      
  </ul>
</div>
  <div class="slider">
  <div class="slide current">
    <div class="content">
      <h1>Slide One</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Two</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Three</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Four</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Five</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Six</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
</div>
<div class="buttons">
  <button id="prev"><i class="fas fa-arrow-left" onclick=""></i></button>
  <button id="next"><i class="fas fa-arrow-right"></i></button>
</div>

JS:

const slides = document.querySelectorAll(".slide");

const next = document.querySelector("#next"); const prev = document.querySelector("#prev"); const auto = false; // Auto scroll const intervalTime = 5000; let slideInterval;

const nextSlide = () => { // Get current class const current = document.querySelector(".current"); // Remove current class current.classList.remove("current"); // Check for next slide if (current.nextElementSibling) { // Add current to next sibling current.nextElementSibling.classList.add("current"); } else { // Add current to start slides[0].classList.add("current"); } setTimeout(() => current.classList.remove("current")); };

const prevSlide = () => { // Get current class const current = document.querySelector(".current"); // Remove current class current.classList.remove("current"); // Check for prev slide if (current.previousElementSibling) { // Add current to prev sibling current.previousElementSibling.classList.add("current"); } else { // Add current to last slides[slides.length - 1].classList.add("current"); } setTimeout(() => current.classList.remove("current")); };

// Button events next.addEventListener("click", (e) => { nextSlide(); if (auto) { clearInterval(slideInterval); slideInterval = setInterval(nextSlide, intervalTime); } });

prev.addEventListener("click", (e) => { prevSlide(); if (auto) { clearInterval(slideInterval); slideInterval = setInterval(nextSlide, intervalTime); } });

// Auto slide if (auto) { // Run next slide at interval time slideInterval = setInterval(nextSlide, intervalTime); }

const slides = document.querySelectorAll(".slide");
const next = document.querySelector("#next");
const prev = document.querySelector("#prev");
const auto = false; // Auto scroll
const intervalTime = 5000;
let slideInterval;

const nextSlide = () => {
  // Get current class
  const current = document.querySelector(".current");
  // Remove current class
  current.classList.remove("current");
  // Check for next slide
  if (current.nextElementSibling) {
    // Add current to next sibling
    current.nextElementSibling.classList.add("current");
  } else {
    // Add current to start
    slides[0].classList.add("current");
  }
  setTimeout(() => current.classList.remove("current"));
};

const prevSlide = () => {
  // Get current class
  const current = document.querySelector(".current");
  // Remove current class
  current.classList.remove("current");
  // Check for prev slide
  if (current.previousElementSibling) {
    // Add current to prev sibling
    current.previousElementSibling.classList.add("current");
  } else {
    // Add current to last
    slides[slides.length - 1].classList.add("current");
  }
  setTimeout(() => current.classList.remove("current"));
};

// Button events
next.addEventListener("click", (e) => {
  nextSlide();
  if (auto) {
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, intervalTime);
  }
});

prev.addEventListener("click", (e) => {
  prevSlide();
  if (auto) {
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, intervalTime);
  }
});

// Auto slide
if (auto) {
  // Run next slide at interval time
  slideInterval = setInterval(nextSlide, intervalTime);
}
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <link rel="stylesheet" href="css/css_home.css">



  <title>Official 7R</title>

</head>





<body>

  <!-- NAVBAR -->
  <nav class="navbar navbar-expand-lg navbar-light bg-white shadow fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#"><img src="img/7R.png" width="80px" height="80px"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">


        <ul class="navbar-nav ml-auto">


          <li class="nav-item active">
            <a class="nav-link" href="#">HOME
                <span class="sr-only">(current)</span>
              </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">A STORY</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">WHO MADE YOUR CLOTHES</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">ARTICLES</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">SUPPORT US</a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="#">OUR TEAM</a>
          </li>

        </ul>
      </div>
    </div>
  </nav>

  <!-- Slider -->

  <div class="slider">
    <div class="slide current">
      <div class="content">
        <h1>Slide One</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Two</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Three</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Four</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Five</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
    <div class="slide">
      <div class="content">
        <h1>Slide Six</h1>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic maxime, voluptatibus labore doloremque vero!
        </p>
      </div>
    </div>
  </div>
  <div class="buttons">
    <button id="prev"><i class="fas fa-arrow-left" onclick=""></i></button>
    <button id="next"><i class="fas fa-arrow-right"></i></button>
  </div>
  <script src="Java%2520Script/main.js"></script>

</body>

</html>
 

Fonte Link

Slider- Não consigo aplicar o JavaScript num slider

Boa tarde. Estou a desenvolver um website para um projeto de universidade. Ainda sou novo no que se trata de desenvolvimento web, mas tenho muito interesse no tema. Estou a usar templates para me poder guiar no desenvolvimento do projeto em si. No entanto, não compreendo porque é que as funções em java não se estão a aplicar nos botões do slider nem nas transições do mesmo.

Agradeço por todo o tipo de ajuda e espero que estejam todos com boa saúde :)

HTML:

<html lang="en">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<link rel="stylesheet" href="css/css_home.css">



<title>Official 7R</title>
  
  <ul class="navbar-nav ml-auto">
      

    <li class="nav-item active">
      <a class="nav-link" href="#">HOME
            <span class="sr-only">(current)</span>
          </a>
    </li>
      
    <li class="nav-item">
      <a class="nav-link" href="#">A STORY</a>
    </li>
      
    <li class="nav-item">
      <a class="nav-link" href="#">WHO MADE YOUR CLOTHES</a>
    </li>
     
    <li class="nav-item">
      <a class="nav-link" href="#">ARTICLES</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-link" href="#">SUPPORT US</a>
    </li>
      
    <li class="nav-item">
      <a class="nav-link" href="#">OUR TEAM</a>
    </li>
      
  </ul>
</div>
  <div class="slider">
  <div class="slide current">
    <div class="content">
      <h1>Slide One</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Two</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Three</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Four</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Five</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
  <div class="slide">
    <div class="content">
      <h1>Slide Six</h1>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit hic
        maxime, voluptatibus labore doloremque vero!
      </p>
    </div>
  </div>
</div>
<div class="buttons">
  <button id="prev"><i class="fas fa-arrow-left" onclick=""></i></button>
  <button id="next"><i class="fas fa-arrow-right"></i></button>
</div>

JS:

const slides = document.querySelectorAll(".slide");

const next = document.querySelector("#next"); const prev = document.querySelector("#prev"); const auto = false; // Auto scroll const intervalTime = 5000; let slideInterval;

const nextSlide = () => { // Get current class const current = document.querySelector(".current"); // Remove current class current.classList.remove("current"); // Check for next slide if (current.nextElementSibling) { // Add current to next sibling current.nextElementSibling.classList.add("current"); } else { // Add current to start slides[0].classList.add("current"); } setTimeout(() => current.classList.remove("current")); };

const prevSlide = () => { // Get current class const current = document.querySelector(".current"); // Remove current class current.classList.remove("current"); // Check for prev slide if (current.previousElementSibling) { // Add current to prev sibling current.previousElementSibling.classList.add("current"); } else { // Add current to last slides[slides.length - 1].classList.add("current"); } setTimeout(() => current.classList.remove("current")); };

// Button events next.addEventListener("click", (e) => { nextSlide(); if (auto) { clearInterval(slideInterval); slideInterval = setInterval(nextSlide, intervalTime); } });

prev.addEventListener("click", (e) => { prevSlide(); if (auto) { clearInterval(slideInterval); slideInterval = setInterval(nextSlide, intervalTime); } });

// Auto slide if (auto) { // Run next slide at interval time slideInterval = setInterval(nextSlide, intervalTime); }