-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>
No menu is appearing.
– Sam
The menu does not appear because the css is not well encoded, the ideal would be to use the property
background
instead of using elementsimg
for a slider?– Victor Carnaval
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.
– Sam
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 firstli.dot
and at last to stay consistent. With regards to spending alone you can do something withsetInterval
orsetTimeOut
to and give a.click()
at the time dot and if it is the last give.click()
in the first.– Vinicius.Silva