Work two sliders separately from each other

Question

On the page there are two sliders and one code for both sweets.
How to "make" them work separately from each other using the same code?

ps No change html

 $('.slider .slider-button').on('click', function() { var buttonPrev = $(this).hasClass('prev'), buttonNext = $(this).hasClass('next'), slideBlock = $('.slider-content .slider-slide'), slideActive = $('.slider-content .slider-slide.active'), slideLen = slideBlock.length, slideActiveIndex = slideActive.index(), slidePrev = (slideActiveIndex - 1), slideNext = (slideActiveIndex + 1), isEvents = $(this).hasClass('-events'); slideBlock.removeClass('active'); if (isEvents) { var catBlock = $('.slide-title.plus-cat .category .cat-item'), catActive = $('.slide-title.plus-cat .category .cat-item.active'), catLen = slideBlock.length, catActiveIndex = slideActive.index(), catPrev = (slideActiveIndex - 1), catNext = (slideActiveIndex + 1); catBlock.removeClass('active'); } if (buttonPrev) { slideBlock.eq(slidePrev).addClass('active'); if (isEvents) catBlock.eq(catPrev).addClass('active'); } if (buttonNext) { if (slideNext == slideLen) var slideNext = 0; slideBlock.eq(slideNext).addClass('active'); if (isEvents) { if (catNext == catLen) var catNext = 0; catBlock.eq(catNext).addClass('active'); } } } );

 .slider {display: grid; grid-template-columns: 50px 1fr 50px; grid-gap: 10px; height: 200px; margin-bottom: 20px;} .slider .slider-button, .slider .slider-content {display: block; width: 100%;} .slider .slider-button {position: relative; cursor: pointer;} .slider .slider-button div {width: 50px; height: 50px; background-repeat: no-repeat; background-size: auto 100%; background-position: center center; position: absolute; top: calc(50% - 25px);} .slider .slider-button.prev div {background-image: url('https://via.placeholder.com/50x50');} .slider .slider-button.next div {background-image: url('https://via.placeholder.com/50x50');} .slider .slider-content {overflow: hidden;} .slider .slider-content .slider-slide {display: none; width: 100%; height: 100%;} .slider .slider-content .slider-slide img {display: block; width: 100%; height: 100%; object-fit: contain;} .slider .slider-content .slider-slide.active {display: block;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Первый слайдер --> <div class="slider about"> <div class="slider-button prev"> <div></div> </div> <div class="slider-content"> <div class="slider-slide active" style="background: red;"></div> <div class="slider-slide" style="background: blue;"></div> <div class="slider-slide" style="background: green;"></div> <div class="slider-slide" style="background: yellow;"></div> </div> <div class="slider-button next"> <div></div> </div> </div> <!-- Второй слайдер --> <div class="slider events"> <div class="slider-button prev -events"> <div></div> </div> <div class="slider-content"> <div class="slider-slide active" style="background: black;"></div> <div class="slider-slide" style="background: aqua;"></div> <div class="slider-slide" style="background: brown;"></div> </div> <div class="slider-button next -events"> <div></div> </div> </div>

In $('.slider .slider-button').on('click' ... you must first find the .slider element and then have the child find the .slider-content element. And for the latter, switch the elements. Better things to put in a separate component. It should be something like $(selector).slide({})
I need to add some identifier for .slider-content , understand correctly?
Here will help you parent and children (just in case here find )

ya.ymer ya.ymer 1,530 5 silver marks 13 bronze marks · Accepted Answer · 2018-08-19T07:01:18

Something like this?

 $('.slider .slider-button').on('click', function(e) { var slides = e.target.parentNode.parentNode.childNodes[3]; var buttonPrev = $(this).hasClass('prev'), buttonNext = $(this).hasClass('next'), slideBlock = jQuery(slides.getElementsByClassName('slider-slide')), slideActive = jQuery(slides.querySelector('.active')), slideLen = slideBlock.length, slideActiveIndex = slideActive.index(), slidePrev = (slideActiveIndex - 1), slideNext = (slideActiveIndex + 1), isEvents = $(this).hasClass('-events'); slideBlock.removeClass('active'); if (isEvents) { var catBlock = $('.slide-title.plus-cat .category .cat-item'), catActive = $('.slide-title.plus-cat .category .cat-item.active'), catLen = slideBlock.length, catActiveIndex = slideActive.index(), catPrev = (slideActiveIndex - 1), catNext = (slideActiveIndex + 1); catBlock.removeClass('active'); } if (buttonPrev) { slideBlock.eq(slidePrev).addClass('active'); if (isEvents) catBlock.eq(catPrev).addClass('active'); } if (buttonNext) { if (slideNext == slideLen) var slideNext = 0; slideBlock.eq(slideNext).addClass('active'); if (isEvents) { if (catNext == catLen) var catNext = 0; catBlock.eq(catNext).addClass('active'); } } } );

 .slider { display: grid; grid-template-columns: 50px 1fr 50px; grid-gap: 10px; height: 200px; margin-bottom: 20px; } .slider .slider-button, .slider .slider-content { display: block; width: 100%; } .slider .slider-button { position: relative; cursor: pointer; } .slider .slider-button div { width: 50px; height: 50px; background-repeat: no-repeat; background-size: auto 100%; background-position: center center; position: absolute; top: calc(50% - 25px); } .slider .slider-button.prev div { background-image: url('https://via.placeholder.com/50x50'); } .slider .slider-button.next div { background-image: url('https://via.placeholder.com/50x50'); } .slider .slider-content { overflow: hidden; } .slider .slider-content .slider-slide { display: none; width: 100%; height: 100%; } .slider .slider-content .slider-slide img { display: block; width: 100%; height: 100%; object-fit: contain; } .slider .slider-content .slider-slide.active { display: block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Первый слайдер --> <div class="slider about"> <div class="slider-button prev"> <div></div> </div> <div class="slider-content"> <div class="slider-slide active" style="background: red;"></div> <div class="slider-slide" style="background: blue;"></div> <div class="slider-slide" style="background: green;"></div> <div class="slider-slide" style="background: yellow;"></div> </div> <div class="slider-button next"> <div></div> </div> </div> <!-- Второй слайдер --> <div class="slider events"> <div class="slider-button prev -events"> <div></div> </div> <div class="slider-content"> <div class="slider-slide active" style="background: black;"></div> <div class="slider-slide" style="background: aqua;"></div> <div class="slider-slide" style="background: brown;"></div> </div> <div class="slider-button next -events"> <div></div> </div> </div>

Still, I recommended using the functions jquery parent(selector) and find(selector) .
In case of changing the internal structure of the slider, the code will not break.
@ ya.ymer, yes, thanks) But I just solved the problem myself, replacing slideBlock = $('.slider-content .slider-slide'), slideActive = $('.slider-content .slider-slide.active') on slideBlock = $(this).closest('.slider').find('.slider-slide'), slideActive = $(this).closest('.slider').find('.slider-slide.active') .

Work two sliders separately from each other

1 answer 1

More articles: