SUBSCRIBE NOW

SUBSCRIBE NOW

CODE PROVIDER HERE

MODIFY ANSH September 19, 2024

HTML CODE

 
 
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Slider</title>
      <link rel="stylesheet" href="style.css">
    </head>
   <body>
   
<nav  class="navbar" style="background-color: blue;">
    <div class=" div1">
       <h1 style="color: rgb(235, 255, 235);"><b>TECH </b><span style=" font-family: 'Brush Script MT', cursive; color: rgb(40, 255, 7);">WORLD</span></h3>
     </div>
     <div class="div-2">    
        <ul class=" ul-1"><li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About </a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link" href="#">  Courses

         
            <select style="color: black; " class="aq">
                <option value="">Select course</option>
                <option value="Programming Courses">Programming Courses</option>
                <option value="Programming Courses"> Web Development Courses</option>
                <option value="Programming Courses">Digital Marketing Courses</option>
                <option value="Programming Courses">Programming Courses</option>
             </select></a>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact us </a>
              </li>
    </div>

  </nav>
  <div class="slider">
    <div class="slider-inner">
      <img src="tk.jpg" alt="Image 1" class="active">
      <img src="pexels-veeterzy-39811.jpg" alt="Image 2">
      <img src="hacker.jpg" alt="Image 3">
    </div>
    <button class="prev">Previous</button>
    <button class="next">Next</button>
  </div>
  <script src="(link unavailable)"></script>


  <script src="javascript.js"></script>
</body>
</html>


 


<!-- Courses Section -->
 
   
</body>
</html>

<!-- Footer Section -->
<footer>
  <p>&copy; 2024 Course Website</p>
</footer>



 



          CSS DODE


 

 

 


header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  color: #fff;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  margin-right: -10px;
}

nav ul {
  list-style: none;
  margin-left: 10px;
  padding: 0;
  display: flex;
  left: 10px;
  flex-direction: row;
  align-items: center;
   
}

nav li {
  margin-left:10px;
}

nav a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}

nav a:hover {
  color: #ccc;
}

.more-options {
  font-size: 24px;
  cursor: pointer;
}

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }
  nav li {
    margin-bottom: 10px;
    margin-left: 10px;
  }
}


 span {
    font-family: 'Brush Script MT', cursive;
 }

 .slider {
    position: relative;
    width: 80%;
    margin: 40px auto;
  }
 
  .slider-inner {
    position: relative;
    width: 100%;
    height: 500px;
  }
 
  .slider-inner img {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: none;
  }
 
  .slider-inner img.active {
    display: block;
  }
 
  .prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
 
  .prev {
    left: 0;
  }
 
  .next {
    right: 0;
  }
 
  .slider {
     width: 100%;
  }

  .ul-1 {
     margin-left: 20px;
  }
  ul.li{
     margin-left: 300px;
  }
 
  h1 {
     color: white;
  }

  .div1{
    display: inline-block;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 200px;
    font-size: 1,8rem;
    position: relative;
    left: -997px;


 }

 .navbar {
     display: flex;
     align-items: center;
     flex-direction: row;
     justify-content: space-evenly;
     margin: 0%;
     
 }

 .div-2{
     margin-left: -2045px;
     font-size: 1.6rem;
     width: 600px;
 }

 .div-2.li{
     margin: 280px;
     margin-left: 100px;
 }













JavaScript Code


 
const slider = document.createElement('div');
slider.className = 'slider';
document.body.appendChild(slider);

const sliderInner = document.createElement('div');
sliderInner.className = 'slider-inner';
slider.appendChild(sliderInner);

const images = [
  'pexels-veeterzy-39811.jpg',
  ' hacker.jpg',
  ' tk.jpg'
];

images.forEach((image, index) => {
  const img = document.createElement('img');
  img.src = image;
  img.alt = `Image ${index + 1}`;
  if (index === 0) img.className = 'active';
  sliderInner.appendChild(img);
});

const prevButton = document.createElement('button');
prevButton.className = 'prev';
prevButton.textContent = ' <';
slider.appendChild(prevButton);

const nextButton = document.createElement('button');
nextButton.className = 'next';
nextButton.textContent = '>';
slider.appendChild(nextButton);

const imagesArray = document.querySelectorAll('.slider-inner img');
let currentIndex = 0;

function autoSlide() {
  imagesArray[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % imagesArray.length;
  imagesArray[currentIndex].classList.add('active');
}

setInterval(autoSlide, 3000);

prevButton.addEventListener('click', () => {
  imagesArray[currentIndex].classList.remove('active');
  currentIndex = (currentIndex - 1 + imagesArray.length) % imagesArray.length;
  imagesArray[currentIndex].classList.add('active');
});

nextButton.addEventListener('click', () => {
  imagesArray[currentIndex].classList.remove('active');
  currentIndex = (currentIndex + 1) % imagesArray.length;
  imagesArray[currentIndex].classList.add('active');
});





MODIFY ANSH

Posted by: MODIFY ANSH

I AM YOUTUBER Modify ansh please subscribe this channel

Post a Comment

0 Comments