We Keep Coding

Multiple line image slider with buttons

I am working on a website that should have image sliders with clickable buttons that flip to the next image.
I was able to make a single slider / page, but as I have no experience in coding yet, I ran into difficulties when I was trying make multiple sliders following each other directly. The buttons of a certain slider started to mix up, and target other sliders too, or only the first one, but not the way I wanted..
So I started copying and repeating the same lines of code and applying them to groups of images separately.
I also want some text to flip together with the images, so I grouped the text and images together with the buttons, and finally I ended up having a lot of repetition, and way too long codes. :-)
Right now it works, but I assume that there is a much easier, solution, that would make my code a lot shorter.
Can someone help me with:
Having one good java script, that doesn't mix up the targets, when having multiple sliders?
Having only one "buttons"/slider instead of copying them to all the "containergrid"s groups, but still flipping the text together with the image?
Thanks, and sorry for the long code. :)
<div class="content">
<!---THE FIRST SLIDER--->
<div class="slider_1">
<div class="slides_1">
<div class="containergrid">
<div class="description">
<p class="maindescription">Description</p>
<p class="year">2017</p>
</div>
<div class="imgbutton">
<img class="img_1_1">
<div class="button">
<button class="prev"
onclick="plusDivs1(-1)"></button>
<button class="next"
onclick="plusDivs1(1)"></button>
</div>
</div>
</div>
</div>
<div class="slides_1">
<div class="containergrid">
<div class="description">
<p class="maindescription">Description</p>
<p class="year">2017</p>
</div>
<div class="imgbutton">
<img class="img_1_2">
<div class="button">
<button class="prev"
onclick="plusDivs1(-1)"></button>
<button class="next"
onclick="plusDivs1(1)"></button>
</div>
</div>
</div>
</div>
</div>
<!---THE SECOND SLIDER--->
<div class="slider_2">
<div class="slides_2">
<div class="containergrid">
<div class="description">
<p class="maindescription">Description</p>
<p class="year">2017</p>
</div>
<div class="imgbutton">
<img class="img_2_1">
<div class="button">
<button class="prev"
onclick="plusDivs1(-1)"></button>
<button class="next"
onclick="plusDivs1(1)"></button>
</div>
</div>
</div>
</div>
<div class="slides_2">
<div class="containergrid">
<div class="description">
<p class="maindescription">Description</p>
<p class="year">2017</p>
</div>
<div class="imgbutton">
<img class="img_2_2">
<div class="button">
<button class="prev"
onclick="plusDivs1(-1)"></button>
<button class="next"
onclick="plusDivs1(1)"></button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var slideIndex = 1;
showDivs1(slideIndex);
function plusDivs1(n) {
showDivs1(slideIndex += n);
}
function showDivs1(n) {
var i;
var x = document.getElementsByClassName("slides_1");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "flex";
}
</script>
<script>
var slideIndex = 1;
showDivs2(slideIndex);
function plusDivs2(n) {
showDivs2(slideIndex += n);
}
function showDivs2(n) {
var i;
var x = document.getElementsByClassName("slides_2");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "flex";
}
</script>

So you would just have to pass a reference to your slides into the showDivs function, so you can keep the clicks independent of one another. You'd still have to initialize each slider separately.
function plusDivs(slider, n) {
showDivs(slider, slideIndex += n);
}
function showDivs(slider, index) {
var i;
var x = document.getElementsByClassName(slider);
if (index > x.length) {
slideIndex = 1
}
if (index < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "flex";
}
// Initialize the sliders
var slideIndex = 1;
showDivs('slides_1', slideIndex);
showDivs('slides_2', slideIndex);
In your HTML you just need to pass the reference to the plusDivs function:
onclick="plusDivs('slides_1', 1)"
Here is a fiddle showing a working example

Javascript function to rotate some div elements on page

I have some javascript function - shows me a popup with some texts. I try to rotate two "section" elements, but if I add to HTML one more section with class custom, the page shows only first element. Please, help me to add 1-2 more elements and to rotate it. The idea is to have 2 or more elements with class custom and to show it in random order, after last to stop. Thanks.
setInterval(function () {
$(".custom").stop().slideToggle('slow');
}, 2000);
$(".custom-close").click(function () {
$(".custom-social-proof").stop().slideToggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Some Text
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>

Set section display none of page load instead of first section. Check below code of second section:
<section class="custom" style=" display:none">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Mario<br>si kupi <b>2</b> matraka
<small>predi 1 chas</small>
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
And you need to make modification in your jQuery code as below:
setInterval(function () {
var sectionShown = 0;
var sectionNotShown = 0;
$(".custom").each(function(i){
if ($(this).css("display") == "block") {
sectionShown = 1;
$(this).slideToggle('slow');
} else {
if (sectionShown == 1) {
$(this).slideToggle('slow');
sectionShown = 0;
sectionNotShown = 1;
}
}
});
if (sectionNotShown == 0) {
$(".custom:first").slideToggle('slow');
}
}, 2000);
Hope it helps you.

How to target a specific slider using javascript when there is more than one

I have 3 sliders on my page I'm a building but i am just curious to know the best way to go about targeting only the active one so the javascript below would work for all of them. Everything seems to work fine if i disable the other 2 sliders. First time I have done something like this.
I'm guessing my javascript selectors may need to change some what to get it to work.
Appreciate any advice on the best way forward.
var sliderSlide = document.querySelectorAll('.slider__slide');
var nextSlide = document.querySelector('.slider__button--next');
var previousSlide = document.querySelector('.slider__button--previous');
var currentSlide = 0;
var currentSlideImg = 0;
//Reset slides
function resetSlides() {
for (var s = 0; s < sliderSlide.length; s++) {
sliderSlide[s].classList.remove('active');
}
for (var i = 0; i < sliderSlideImg.length; i++) {
sliderSlideImg[i].classList.remove('active');
}
}
//Start slides
function startSlide() {
resetSlides();
sliderSlide[0].classList.add('active');
sliderSlideImg[0].classList.add('active');
}
//Previous slide
function slidePrevious() {
resetSlides();
sliderSlide[currentSlide - 1].classList.add('active');
currentSlide--;
sliderSlideImg[currentSlideImg - 1].classList.add('active');
currentSlideImg--;
}
previousSlide.addEventListener('click', function() {
if (currentSlide === 0 && currentSlideImg === 0) {
currentSlide = sliderSlide.length;
currentSlideImg = sliderSlideImg.length;
}
slidePrevious();
});
//Next slide
function slideNext() {
resetSlides();
sliderSlide[currentSlide + 1].classList.add('active');
currentSlide++;
sliderSlideImg[currentSlideImg + 1].classList.add('active');
currentSlideImg++;
}
nextSlide.addEventListener('click', function() {
if (currentSlide === sliderSlide.length - 1 && currentSlideImg === sliderSlideImg.length - 1) {
currentSlide = -1;
currentSlideImg = -1;
}
slideNext();
});
<div class="slider slider--1 active">
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__buttons">
<span class="slider__button--previous">Previous</span>
<span class="slider__button--next">Next</span>
</div>
</div>
<div class="slider slider--2">
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__buttons">
<span class="slider__button--previous">Previous</span>
<span class="slider__button--next">Next</span>
</div>
</div>
<div class="slider slider--3">
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__slide">
<p class="slider__text">some text</p>
</div>
<div class="slider__buttons">
<span class="slider__button--previous">Previous</span>
<span class="slider__button--next">Next</span>
</div>
</div>

You can create loop over .slider and then use querySelector on each item, that way you will have variables for each slider
Array.from(document.querySelectorAll('.slider')).forEach(function(slider) {
var sliderSlide = slider.querySelectorAll('.slider__slide');
var nextSlide = slider.querySelector('.slider__buttons--next');
var previousSlide = slider.querySelector('.slider__buttons--previous');
...
});
or if you prefer for loop:
var sliders = document.querySelectorAll('.slider');
for (var i = 0; i < sliders.length; ++i) {
var slider = sliders[i];
...
}

document.querySelector('.slider--3 .slider__slide')
but I would recommend to put id's on your sliders and then select
document.querySelector('#slider--3')

jQuery change each element with class when it comes into view

I have a series of blocks that repeat like this:
<div class="producto_banner">
<div class="positioner">
<div class="left">
<div class="titulo">Title</div>
<div class="subtitulo">Subtitle</div>
<div class="introduccion">Intro</div>
<a class="boton" href="#">anchor</a>
</div>
<div class="right">
<img src="image source">
</div>
</div>
</div>
<div class="producto_banner">
<div class="positioner">
<div class="left">
<div class="titulo">Title</div>
<div class="subtitulo">Subtitle</div>
<div class="introduccion">Intro</div>
<a class="boton" href="#">anchor</a>
</div>
<div class="right">
<img src="image source">
</div>
</div>
</div>
...
And I would like to animate the .right div inside each of them when they come into view.
So far I have this:
function isScrolledIntoView(elem) {
var centerY = Math.max(0,((jQuery(window).height()-
jQuery(elem).outerHeight()) / 2)
+ jQuery(window).scrollTop());
var elementTop = jQuery(elem).offset().top;
var elementBottom = elementTop + jQuery(elem).height();
return elementTop <= centerY && elementBottom >= centerY;
}
$(window).on("scroll resize", function() {
console.log('scrolling');
$(".producto_banner").each(function(index, element) {
if (isScrolledIntoView(element)) {
$(this).find('.right').animate({'right':'50px'},1000);
}
});
});
But for some reason it’s only animating the last 2 blocks (out of 5)

Make slider counter, count just the amount of slides in the slider

I made a jQuery slider for a website, it has 9 slides, and I want the counter to count JUST until 9. What happens is that as soon as I get to the last slide (09 of 09) and CLICK on the NEXT bnt, it goes to the first slide (01 of 09) and when I click to go to the second slide I get this: 11 of 09. Please help!
It's an infinite slider, and would like the counter to work "UP" and "DOWN", meaning to have the counter add if the user goes NEXT and subtract if the user goes previous.
The slider is in this site http://madebymorro.com/web_dev_vavilco/
at the very bottom.
Thanks!
the code I have is HTML:
<section id="construction">
<div class="wrapper">
<div id="home-slider">
<div id="slider-data">
<div class="count">
<span class="current">1</span>/09
</div>
<div class="slider-nav">
<div class="prev"><img src="images/home-prev.svg" alt=""></div>
<div class="next"><img src="images/home-next.svg" alt=""></div>
</div>
</div>
<div id="home-slider-c">
<section class="slider-project">
<img src="images/home-slider001.jpg" alt="">
<div class="img-data">
<p>zaragoza</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider002.jpg" alt="">
<div class="img-data">
<p>bravtevilla</p>
<p>casas</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider003.jpg" alt="">
<div class="img-data">
<p>business Center Dorado</p>
<p>oficinas</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider004.jpg" alt="">
<div class="img-data">
<p>balcones de la trinidad</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider005.jpg" alt="">
<div class="img-data">
<p>gratamira 131</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider006.jpg" alt="">
<div class="img-data">
<p>torre olaya plaza</p>
<p>apartamentos y plaza comercial</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider007.jpg" alt="">
<div class="img-data">
<p>torre olaya plaza</p>
<p>locales comerciales</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider008.jpg" alt="">
<div class="img-data">
<p>plaza castilla</p>
<p>apartamentos</p>
</div>
</section>
<section class="slider-project">
<img src="images/home-slider009.jpg" alt="">
<div class="img-data">
<p>sauses del country</p>
<p>apartamentos</p>
</div>
</section>
</div>
</div>
</div>
the code I have is jQuery:
var slider = $('#home-slider-c'),
next = $('.slider-nav .next'),
prev = $('.slider-nav .prev');
$('#home-slider-c section:last-child').insertBefore('#home-slider-c section:first-child');
slider.css('margin-left', '-100%');
var n = 0;
function getNext() {
var e = n === $('.slider-project').length - 1 ? 0 : n + 1;
$(".current").html(e + 1);
n++;
console.log(e);
slider.animate({
marginLeft: '-200%'
}, 700, function() {
$('#home-slider-c section:first-child').insertAfter('#home-slider-c section:last-child');
slider.css('margin-left', '-100%');
});
// $(".current").html(e++);
}
var n = 0;
function getPrev() {
var e = n <= 0 ? $('.slider-project').length - 1 : n - 1;
$(".current").html(e + 1);
n--;
console.log(e);
slider.animate({
marginLeft: 0
}, 700, function() {
$('#home-slider-c section:last-child').insertBefore('#home-slider-c section:first-child');
slider.css('margin-left', '-100%');
});
}
next.on('click', getNext);
prev.on('click', getPrev);

Try using this single counter e initialized to 1
....
var e= 1;
function getNext() {
e= e<$('.slider-project').length?e:0;
e++;
$(".current").html(e);
// n++;
console.log(e);
....
}
function getPrev() {
e= e<=1?$('.slider-project').length+1:e;
e--;
$(".current").html(e);
// n--;
console.log(e);
....
}

Use the Reminder Operator % Here you go:
var tot = 6, // Let's say we have 6 slides.
c = 0; // Dummy counter
$("#prev, #next").on("click", function(){
// Increment or decrement counter depending on button ID
c = this.id==="next" ? ++c : --c;
// OK almost there, now let's loop our counter to prevent exceeding <0 or >5
// >5 since index 5 is the 6th slide (tot-1).
// If counter went less than 0 (prev button) than set it to tot-1
// For all other cases use modulo % which will reset it to 0 automagically.
c = c<0 ? tot-1 : c%tot;
$("#test").text(c);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id=prev>«</button>
<span id=test>0</span>
<button id=next>»</button>
The above can be written using a bigger if else logic, but if it's all clear than you can simply use this snippet and drop it into any current or future gallery you build:
// Logic to loop counter on prev / next click:
c = (this.id==="next" ? ++c : --c) < 0 ? tot-1 : c%tot;