I have left/right arrows that when clicked uses jQuery to move an element to the left/right, and the arrow-left element is revealed when the position of .sliding-element has moved past 0.
I am using this code to hide and show the arrow-left element in the runnable snippet below.
$carouselList.animate({
left: moveto
}, 400, function() {
if (moveto == 0) {
$('.arrow-left').hide();
} else {
$('.arrow-left').show();
}
});
The problem is that this hides all the .arrow-left elements, not just the children of this .js-carousel slider element. How can I get it to just hide this single arrow-left, and not all of them on the page?
Thank you
jQuery(document).ready(function( $ ){
$(".js-carousel").each(function(){
$('.arrow-left').hide();
var $carousel = $(this),
$carouselContainer = $carousel.find(".books-container"),
$carouselList = $carousel.find(".sliding-element"),
$carouselItem = $carousel.find(".book"),
$carouselButton = $carousel.find(".js-carousel-button"),
setItemWidth = function(){
$carouselList.removeAttr("style");
var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
$carouselList.css("width", curWidth);
},
slide = function(){
var $button = $(this),
dir = $button.data("dir"),
curPos = parseInt($carouselList.css("left")) || 0,
moveto = 0,
containerWidth = $carouselContainer.outerWidth(),
listWidth = $carouselList.outerWidth(),
before = (curPos containerWidth),
after = listWidth (curPos - containerWidth);
if(dir=="next"){
moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
} else {
moveto = (before >= 0) ? 0 : curPos containerWidth;
}
/*THIS BIT HERE IS WHAT NEEDS FIXING*/
$carouselList.animate({
left: moveto
}, 400, function() {
if (moveto == 0) {
$('.arrow-left').hide();
} else {
$('.arrow-left').show();
}
});
/*END OF BIT THAT NEEDS FIXING*/
};
$(window).resize(function(){
setItemWidth();
});
setItemWidth();
$carouselButton.on("click", slide);
});
});
.books-container {
overflow: hidden;
}
.sliding-element {
position: relative;
display: flex;
}
.book {
padding: 1em;
}
.arrows {
position:relative;
width: 100%;
}
.arrow-right {
right: -5px;
}
.arrow-left {
left: -5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider1" >
<div >
<div >
<div >
<a href="#apage">
<p>Element 1</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 2</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 3</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 4</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 5</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 6</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 7</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 8</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 9</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 10</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 11</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 12</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 13</p>
</a>
</div>
</div>
<div >
<div data-dir="prev">Left</div>
<div data-dir="next">Right</div>
</div>
</div>
</div>
<div id="slider2" >
<div >
<div >
<div >
<a href="#apage">
<p>Element 1</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 2</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 3</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 4</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 5</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 6</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 7</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 8</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 9</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 10</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 11</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 12</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 13</p>
</a>
</div>
</div>
<div >
<div data-dir="prev">Left</div>
<div data-dir="next">Right</div>
</div>
</div>
</div>
CodePudding user response:
To target the .arrow-left
element within the current .js-carousel
in the loop, use the find()
method from the jQuery object which holds a reference to the carousel.
Here's an example of how to do that, along with some minor code improvements:
jQuery($ => {
$(".js-carousel").each((i, carousel) => {
let $carousel = $(carousel);
let $arrowLeft = $carousel.find('.arrow-left').hide();
let $carouselContainer = $carousel.find(".books-container");
let $carouselList = $carousel.find(".sliding-element");
let $carouselItem = $carousel.find(".book");
let $carouselButton = $carousel.find(".js-carousel-button");
let setItemWidth = function() {
$carouselList.removeAttr("style");
var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
$carouselList.width(curWidth);
};
let slide = function() {
let $button = $(this);
let dir = $button.data("dir");
let curPos = parseInt($carouselList.css("left"), 10) || 0;
let moveto = 0;
let containerWidth = $carouselContainer.outerWidth();
let listWidth = $carouselList.outerWidth();
let before = (curPos containerWidth);
let after = listWidth (curPos - containerWidth);
if (dir == "next") {
moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
} else {
moveto = (before >= 0) ? 0 : curPos containerWidth;
}
$carouselList.animate({
left: moveto
}, 400, function() {
$arrowLeft.toggle(moveto !== 0);
});
};
$(window).on('resize', setItemWidth);
setItemWidth();
$carouselButton.on("click", slide);
});
});
.books-container {
overflow: hidden;
}
.sliding-element {
position: relative;
display: flex;
}
.book {
padding: 1em;
}
.arrows {
position: relative;
width: 100%;
}
.arrow-right {
right: -5px;
}
.arrow-left {
left: -5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider1" >
<div >
<div >
<div >
<a href="#apage">
<p>Element 1</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 2</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 3</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 4</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 5</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 6</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 7</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 8</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 9</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 10</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 11</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 12</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 13</p>
</a>
</div>
</div>
<div >
<div data-dir="prev">Left</div>
<div data-dir="next">Right</div>
</div>
</div>
</div>
<div id="slider2" >
<div >
<div >
<div >
<a href="#apage">
<p>Element 1</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 2</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 3</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 4</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 5</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 6</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 7</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 8</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 9</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 10</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 11</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 12</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 13</p>
</a>
</div>
</div>
<div >
<div data-dir="prev">Left</div>
<div data-dir="next">Right</div>
</div>
</div>
</div>
CodePudding user response:
You can add this var $this = $(this)
right after your .each
function.
Then use $('.arrow-left', $this).show();
to find the element relevant to your carousel.
Demo
jQuery(document).ready(function($) {
$(".js-carousel").each(function() {
var $this = $(this)
$('.arrow-left').hide();
var $carousel = $(this),
$carouselContainer = $carousel.find(".books-container"),
$carouselList = $carousel.find(".sliding-element"),
$carouselItem = $carousel.find(".book"),
$carouselButton = $carousel.find(".js-carousel-button"),
setItemWidth = function() {
$carouselList.removeAttr("style");
var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
$carouselList.css("width", curWidth);
},
slide = function() {
var $button = $(this),
dir = $button.data("dir"),
curPos = parseInt($carouselList.css("left")) || 0,
moveto = 0,
containerWidth = $carouselContainer.outerWidth(),
listWidth = $carouselList.outerWidth(),
before = (curPos containerWidth),
after = listWidth (curPos - containerWidth);
if (dir == "next") {
moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
} else {
moveto = (before >= 0) ? 0 : curPos containerWidth;
}
/*THIS BIT HERE IS WHAT NEEDS FIXING*/
$carouselList.animate({
left: moveto
}, 400, function() {
if (moveto == 0) {
$('.arrow-left', $this).hide();
} else {
$('.arrow-left', $this).show();
}
});
/*END OF BIT THAT NEEDS FIXING*/
};
$(window).resize(function() {
setItemWidth();
});
setItemWidth();
$carouselButton.on("click", slide);
});
});
.books-container {
overflow: hidden;
}
.sliding-element {
position: relative;
display: flex;
}
.book {
padding: 1em;
}
.arrows {
position: relative;
width: 100%;
}
.arrow-right {
right: -5px;
}
.arrow-left {
left: -5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider1" >
<div >
<div >
<div >
<a href="#apage">
<p>Element 1</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 2</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 3</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 4</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 5</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 6</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 7</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 8</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 9</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 10</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 11</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 12</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 13</p>
</a>
</div>
</div>
<div >
<div data-dir="prev">Left</div>
<div data-dir="next">Right</div>
</div>
</div>
</div>
<div id="slider2" >
<div >
<div >
<div >
<a href="#apage">
<p>Element 1</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 2</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 3</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 4</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 5</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 6</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 7</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 8</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 9</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 10</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 11</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 12</p>
</a>
</div>
<div >
<a href="#apage">
<p>Element 13</p>
</a>
</div>
</div>
<div >
<div data-dir="prev">Left</div>
<div data-dir="next">Right</div>
</div>
</div>
</div>