JAVASCRIPT & JQUERY: Minimal Carousel With Continuous Slide by jqueryscript.net

fuente: https://www.jqueryscript.net/slider/carousel-continuous-slide.html

How to use it:

1. Add your contents to the slides as follows:

<pre><div class="content-carousel" id="carousel">
  <div class="content first">
    <h2>Content 1</h2>
  </div>
  <div class="content second">
    <h2>Content 2</h2>
  </div>
  <div class="content third">
    <h2>Content 3</h2>
  </div>
</div></pre>

2. Create pagination bullets that indicate the current slide, and allow the user to manually switch between slides by click. Note that for each slide must have a .button:

<pre><div id="carouselController">
  <span class="button"></span>
  <span class="button"></span>
  <span class="button"></span>
</div></pre>

3. The necessary CSS styles for the carousel &amp; controls. The responsive layout is based on CSS3 flexbox.

<pre>.content-carousel {
  display: flex;
}

.content-carousel .content{
  width: 100%;
  padding-left: 0;
  transition-duration: .5s;
  position: relative;
  left: 0%;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem 0;
  border-radius: 1rem;
}

#carouselController {
  display: flex;
  justify-content: center;
  width: 100%;
}

#carouselController .button {
  width: 1rem;
  height: 1rem;
  margin: .5rem;
  border-radius: 50%;
  border: solid 2px #fff;
  cursor: pointer;
}

#carouselController .active {
  background-color: #666;
}</pre>

4. Load the latest jQuery JavaScript library at the end of the document.

<pre><script src="/path/to/cdn/jquery.min.js"></script></pre>

5. The main JavaScript (jQuery script) to enable the carousel.

<pre>$(document).ready(function(){

  var actualSlide = 0;
  var totalSlides = $("#carousel .content").length;
  var gap = 100 / totalSlides;
  var lastSlide = $("#carousel .content").length - 1;

  $("#carousel").css("width", (100 * totalSlides) + "%");
  $("#carouselController .button:eq(" + actualSlide + ")").addClass("active");

  var slide = function(){

    if(actualSlide >= totalSlides)
      actualSlide = 0;

    $("#carouselController .button").removeClass("active");
    $("#carouselController .button:eq(" + actualSlide + ")").addClass("active");

    for (var i = 0; i < totalSlides; i++){

      if(actualSlide != totalSlides)
        $("#carousel .content:eq(" + i + ")").css(
          "left", ((gap * actualSlide) * -1) + "%"
        );
      else
      $("#carousel .content:eq(" + i + ")").css(
        "left", "0%"
      );
    }
  }

  $("#carouselController .button").on("click", function(){
    actualSlide = $(this).index();
    slide();
  });

  window.setInterval(function(){
    if(!$("#carouselContainer").is(':hover')){
      actualSlide += 1;
      slide();
    }
  }, 5000); // override the default duration here

});</pre>

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s