Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kristian Woods
23,414 PointsHow can I stop an jquery animation after a certain point?
I have an image carousel, and I have a navigation at either side of the carousel that allows the user to slide back and forth between images. However, if the user continues to press the navigation button, the images go straight off the screen. I'm trying to make it so that when the user reaches the last or the first image, for that matter, in the carousel, the navigation will stop.
How do I achieve that?
Thank you
<section class="active_section">
<div class="img_container active_image_container">
<div class="carousel_image">
<div class="mobile_overlay">
<h3>Glasgow Cathedral</h3>
<a href="#" class="more_info_link">More info</a>
</div>
<img class="1" src="img/ggow_cath.jpg" alt="Glasgow Cathedral" title="Glasgow Cathedral">
</div>
<div class="carousel_image">
<div class="mobile_overlay">
<h3>Tea Room</h3>
<a href="#" class="more_info_link">More info</a>
</div>
<img class="2" src="img/tea_room.jpg" alt=" cup of tea" title="Tea room" class="tea_room_img">
</div>
<div class="carousel_image">
<div class="mobile_overlay">
<h3>Kelvin Museum</h3>
<a href="#" class="more_info_link">More info</a>
</div>
<img src="img/kelvin.jpg" alt="Kelvin_museum" title="Kelvin_museum" class="kelvin_img 3">
</div>
</div>
<button class="showHideBtn" type="button">Show More</button>
<!--activities hidden images-->
<div class="hiddenImages">
<div class="carousel_image">
<div class="mobile_overlay">
<h3>Glasgow Cathedral</h3>
<a href="#" class="more_info_link">More info</a>
</div>
<img class="4" src="img/ggow_cath.jpg" alt="Glasgow Cathedral" title="Glasgow Cathedral">
</div>
<div class="carousel_image">
<div class="mobile_overlay">
<h3>Tea Room</h3>
<a href="#" class="more_info_link">More info</a>
</div>
<img src="img/tea_room.jpg" alt=" cup of tea" title="Tea room" class="tea_room_img 5">
</div>
<div class="carousel_image">
<div class="mobile_overlay">
<h3>Kelvin Museum</h3>
<a href="#" class="more_info_link">More info</a>
</div>
<img src="img/kelvin.jpg" alt="Kelvin_museum" title="Kelvin_museum" class="kelvin_img 6">
</div>
</div>
</section>
active_section {
display: flex;
overflow: hidden;
height: 250px;
white-space: nowrap;
position: relative;
.img_container,
.hiddenImages {
display: inherit;
position: relative;
}
.carousel_image {
width: 427.5px;
margin-right: 10px;
}
}
$(".arrow_right").on('click', function(){
$(".img_container, .hiddenImages").animate({left: "-=800px"}, 600);
});
$(".arrow_left").on('click', function(){
$(".img_container, .hiddenImages").animate({left: "+=800px"}, 600);
});
Kristian Woods
23,414 PointsHey Steven,
Here is the HTML for the arrow navigation
<!--Arrow right-->
<div class="arrow_container arrow_active_container_right">
<img src="img/arrow_right.svg" alt="arrow_right" class="arrow arrow_right arrow_right_active">
</div>
<div class="arrow_container arrow_food_container_right">
<img src="img/arrow_right.svg" alt="arrow_right" class="arrow arrow_right arrow_right_foodDrink">
</div>
<div class="arrow_container arrow_hotel_container_right">
<img src="img/arrow_right.svg" alt="arrow_right" class="arrow arrow_right arrow_right_hotel">
</div>
<!--Arrow left-->
<div class="arrow_container arrow_active_container_left">
<img src="img/arrow_left.svg" alt="arrow_right" class="arrow arrow_left arrow_left_active">
</div>
<div class="arrow_container arrow_food_container_left">
<img src="img/arrow_left.svg" alt="arrow_right" class="arrow arrow_left arrow_left_foodDrink">
</div>
<div class="arrow_container arrow_hotel_container_left">
<img src="img/arrow_left.svg" alt="arrow_right" class="arrow arrow_left arrow_left_hotel">
</div>
Steven Parker
231,269 PointsThere's still no images. Can you post the snapshot?
Kristian Woods
23,414 PointsHey! I just uploaded it to workspaces. Thanks
Kristian Woods
23,414 PointsFor the carousel, I have taken away the javascript, and used the overflow property to be able to scroll through the images. However, I'd prefer to create the slider with JQuery. All I can find is how to create a slider that shows ONE image at a time. Whereas, I'm trying to create a slider that shows THREE images at a time. I have a total of six images per slider
Steven Parker
231,269 PointsSteven Parker
231,269 PointsSome of the code necessary to replicate the issue is missing. In particular, the click handlers are attached to elements with classes ".arrow_left" and ".arrow_right", but neither is present in the HTML provided.
If you implement this using workspaces, you can make a snapshot of your workspace and post the link to it here to share the complete environment at once.