slider jquery css html code example

Example 1: html auto slideshow

<html>
  <head>
    <style>
      #slider {
        width: 100%;
        height: 100%;

        margin: 0 auto;
        border: 10px solid transparent;
        padding: 0px;

        z-index: 100;
        overflow: hidden;
        white-space: nowrap;
        box-sizing: border-box;
      }
      #slider > li {
        width: 100%;
        height: 100%;

        position: relative;
        display: inline-block;
        overflow: hidden;
        font-size: 15px;
        font-size: initial;
        line-height: normal;
        transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1); /* Slide css animation */
        background-size: cover;
        vertical-align: top;
        box-sizing: border-box;
        white-space: normal;
      }
    </style>
  </head>
  <body>
    <ul id="slider">
      <li>
          <p>Some content.</p>
      </li>
      <li>
          <p>Some more content.</p>
      </li>
      <li>
        <p>And here's space for more.</p>
      </li>
    </ul>
    <script>
      // Slide every slideDelay seconds
      const slideDelay = 3000;

      const dynamicSlider = document.getElementById("slider");

      var curSlide = 0;
      window.setInterval(()=>{
        curSlide++;
        if (curSlide === dynamicSlider.childElementCount) {
          curSlide = 0;
        }

        // Actual slide
        dynamicSlider.firstElementChild.style.setProperty("margin-left", "-" + curSlide + "00%");
      }, slideDelay);

    </script>
  </body>
</html>

Example 2: image slideshow in jquery

<script src="jquery-3.2.1.min.js"></script>
<script src="ResponsiveSlides/responsiveslides.min.js"></script>
<script>
	$(function() {
		$("#slider").responsiveSlides({
			auto : false,
			pager : false,
			nav : true,
			speed : 500,
			namespace : "slider-callback",
			maxwidth : "550px"
		});

	});
</script>

Tags:

Javascript Example

Recent Posts