Creating a slider with Jquery

Asked

Viewed 48 times

-2

Talk community, all right?!

I’m creating a slider using Jquery and I’m not getting any further. In the example I created I can’t change the images by clicking on the bottom right menu. Which code instructions are incorrect?

In addition to the click event, I would also like the images to automatically change preserving the click order.

Feel free to make suggestions and criticisms of the code both as semantics and good practice.

$(function() {

  /* Main Slider */
  const $slider = $('.main-slider');
  const $images = $slider.find('.slider-images img');
  const $dots = $slider.find('.slider-dot-navigation .dot');

  $dots.click(function() {
    const $dot = $(this);
    const dotIndex = $dot.index();
    const $image = $($images.get(dotIndex));

    $images.not($image).fadeOut(700);
    $image.fadeIn(700);

    $dots.removeClass('selected');
    $dot.addClass('selected');
  });

});
/* Main Slider */

.main-slider {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  position: relative;
}

.main-slider>.slider-images {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.main-slider>.slider-images>figure>img {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  height: 100%;
}

.main-slider>.slider-images>.slider-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main-slider>.slider-dot-navigation {
  position: absolute;
  bottom: 20px;
  right: 80px;
}

.main-slider>.slider-dot-navigation>.dot {
  list-style-type: none;
  width: 15px;
  height: 15px;
  border: 2px solid #c1c1c1;
  border-radius: 100%;
}

.main-slider>.slider-dot-navigation>.dot.selected {
  background-color: #c1c1c1;
}

.main-slider>.slider-dot-navigation>li:hover {
  background-color: #fff;
  transition-duration: 0.2s;
  cursor: pointer;
}

.main-slider>.slider-dot-navigation>li:not(:last-child) {
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="slider" class="main-slider">
  <div class="slider-images">
    <figure>
      <img alt="" src="https://picsum.photos/id/1001/800/600">
    </figure>
    <figure>
      <img alt="" src="https://picsum.photos/id/1002/800/600">
    </figure>
    <figure>
      <img alt="" src="https://picsum.photos/id/1004/800/600">
    </figure>
    <div class="slider-content">
      <h1>SLIDER</h1>
    </div>
  </div>
  <ol class="slider-dot-navigation">
    <li class="dot selected"></li>
    <li class="dot"></li>
    <li class="dot"></li>
  </ol>
</section>

javascript html jquery css

  • No menu is appearing.

  • The menu does not appear because the css is not well encoded, the ideal would be to use the property background instead of using elements img for a slider?

  • I think that img would be better because you can upload the image only when it appears. In case the background would not give or if gives would be more complicated.

  • Your code is working, you are changing the images in the right click (you think you are not because the images are all the same) you just need to remove the class selected of the first li.dot and at last to stay consistent. With regards to spending alone you can do something with setInterval or setTimeOut to and give a .click() at the time dot and if it is the last give .click() in the first.

1 answer

1


In addition to the click event, I would also like the images to automatically change preserving the click order.

This example can help you. I made the comments in the code itself.

$(function() {

  /* Main Slider */
  const $slider = $('.main-slider');
  const $images = $slider.find('.slider-images img');
  const $dots = $slider.find('.slider-dot-navigation .dot');

  $dots.click(function() {
  
    //interrompe o timeout em andamento
    Auto.stop();
  
    const $dot = $(this);
    const dotIndex = $dot.index();
    const $image = $($images.get(dotIndex));

    $images.not($image).fadeOut(700);
    
    //após o fadeIn reinicia o timeout
    $image.fadeIn(700, Auto.start());

    $dots.removeClass('selected');
    $dot.addClass('selected');          
    
  });
  
  //objeto para automatizar o clique
  const Auto = {
  
    interval: null,

    f: _ => {

        let next = $dots.filter('.selected').next('li');

        if (next.length === 0) { next = $dots.filter(':first'); }
       
        next.click();  
        
      },
  
    start: _ => {  
      
      Auto.interval = setTimeout(_ => {Auto.f()}, 1500);    
            
      },
      
    stop: _ => clearTimeout(Auto.interval)     
  
  };
  
  //Iniciar
  Auto.start();
  
});
/* Main Slider */

.main-slider {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  position: relative;
}

.main-slider>.slider-images {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.main-slider>.slider-images>figure>img {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  height: 100%;
}

.main-slider>.slider-images>.slider-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.main-slider>.slider-dot-navigation {
  position: absolute;
  bottom: 20px;
  right: 80px;
}

.main-slider>.slider-dot-navigation>.dot {
  list-style-type: none;
  width: 15px;
  height: 15px;
  border: 2px solid #c1c1c1;
  border-radius: 100%;
}

.main-slider>.slider-dot-navigation>.dot.selected {
  background-color: #c1c1c1;
}

.main-slider>.slider-dot-navigation>li:hover {
  background-color: #fff;
  transition-duration: 0.2s;
  cursor: pointer;
}

.main-slider>.slider-dot-navigation>li:not(:last-child) {
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section id="slider" class="main-slider">
  <div class="slider-images">
    <figure>
      <img alt="" src="https://picsum.photos/id/1001/800/600">
    </figure>
    <figure>
      <img alt="" src="https://picsum.photos/id/1002/800/600">
    </figure>
    <figure>
      <img alt="" src="https://picsum.photos/id/1004/800/600">
    </figure>
    <div class="slider-content">
      <h1>SLIDER</h1>
    </div>
  </div>
  <ol class="slider-dot-navigation">
    <li class="dot selected"></li>
    <li class="dot"></li>
    <li class="dot"></li>
  </ol>
</section>

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.