How to implement a content slider with jQuery



Image not found!!

Creating a content slider with jQuery involves manipulating the DOM (Document Object Model) to display different content in a sliding manner. Here's a basic example of how you can implement a simple content slider using jQuery:

HTML structure:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Content Slider</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="slider-container">
  <div class="slider">
    <div class="slide">Slide 1 Content</div>
    <div class="slide">Slide 2 Content</div>
    <div class="slide">Slide 3 Content</div>
  </div>
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
</body>
</html>

CSS (styles.css):

css
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.slider-container {
  position: relative;
  width: 80%;
  margin: auto;
  overflow: hidden;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 20px;
  text-align: center;
  border: 1px solid #ddd;
}

button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  padding: 10px;
  cursor: pointer;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

jQuery (script.js):

javascript
$(document).ready(function () {
  var slideIndex = 0;

  $(".next").on("click", function () {
    showSlide(slideIndex + 1);
  });

  $(".prev").on("click", function () {
    showSlide(slideIndex - 1);
  });

  function showSlide(index) {
    var slides = $(".slide");
    var totalSlides = slides.length;

    if (index >= totalSlides) {
      index = 0;
    } else if (index < 0) {
      index = totalSlides - 1;
    }

    slideIndex = index;

    var translateValue = index * -100 + "%";
    $(".slider").css("transform", "translateX(" + translateValue + ")");
  }
});

This example uses a container with three slides, and the buttons "Previous" and "Next" to navigate through the slides. Adjust the content, styles, and number of slides according to your requirements.

Category List