Establishing limits for manipulation through .animate in Jquery

Question

Establishing limits for manipulation through .animate in Jquery

I've created a basic slider using Jquery that includes left_arrow and right_arrow div elements. These divs control the 'left' value of my #screens div, which contains a long .png image. Each screen within the slider is 543px in width.

$pr('#arrow_left').click(function () {
    $pr('#screens').animate ({"left": "+=543px"}, "fast"); 
});
$pr('#arrow_right').click(function () {
    $pr('#screens').animate ({"left": "-=543px"}, "fast");
});

Although the sliding action works smoothly, I now want to establish minimum and maximum values for the 'left' property of #screens so that users cannot navigate beyond the boundaries of the image in either direction.

jquery css jquery-animate parameters

Answer 1

Answer №1

let maximum = 543 * 10; //10 slides in total
let currentSlide = 0;
$pr('#arrow_left').click(function () {
    if(currentSlide < 0)
    {
        currentSlide += 543;
        $pr('#screens').animate ({"left": currentSlide + "px"}, "fast"); });

    }
});

$pr('#arrow_right').click(function () {
    if(currentSlide > maximum)
    {
        currentSlide -= 543;
        $pr('#screens').animate ({"left": currentSlide + "px"}, "fast");

    }
});

Answer 2

let maximum = 543 * 10; //10 slides in total
let currentSlide = 0;
$pr('#arrow_left').click(function () {
    if(currentSlide < 0)
    {
        currentSlide += 543;
        $pr('#screens').animate ({"left": currentSlide + "px"}, "fast"); });

    }
});

$pr('#arrow_right').click(function () {
    if(currentSlide > maximum)
    {
        currentSlide -= 543;
        $pr('#screens').animate ({"left": currentSlide + "px"}, "fast");

    }
});

Answer 3

Answer №2

I found Kai Qing's solution to be really useful :) I tweaked it a bit to fit my own requirements and included jQuery to dynamically adjust the max variable based on the number of direct child <div> elements in the slider. This way, there's no need to constantly modify the code once it's been configured :)

Just sharing the code snippet here in case anyone else finds it helpful :p

$(document).ready(function(){
var max = 275 * $('.slider-wrap > div').length; //replace div with the element that contains each content piece you're sliding.
var current = 0;
$('.left').click(function () {
if(current < max){
    alert(current);
    current += 275;
    $(".slider-wrap").animate({marginLeft:current + 'px'},'slow'); 
    }
});
$('.right').click(function () {
if(current > 0){
    alert(current);
    current -= 275;
    $(".slider-wrap").animate({marginLeft:current + 'px'},'slow'); 
    }
});

});

Answer 4

I found Kai Qing's solution to be really useful :) I tweaked it a bit to fit my own requirements and included jQuery to dynamically adjust the max variable based on the number of direct child <div> elements in the slider. This way, there's no need to constantly modify the code once it's been configured :)

Just sharing the code snippet here in case anyone else finds it helpful :p

$(document).ready(function(){
var max = 275 * $('.slider-wrap > div').length; //replace div with the element that contains each content piece you're sliding.
var current = 0;
$('.left').click(function () {
if(current < max){
    alert(current);
    current += 275;
    $(".slider-wrap").animate({marginLeft:current + 'px'},'slow'); 
    }
});
$('.right').click(function () {
if(current > 0){
    alert(current);
    current -= 275;
    $(".slider-wrap").animate({marginLeft:current + 'px'},'slow'); 
    }
});

});

Establishing limits for manipulation through .animate in Jquery

Answer №1

Answer №2

Similar questions

"Receiving incorrect results when trying to identify the class of the clicked image

Using a jQuery AJAX request to update the quantity of available items based on user input

Can you explain the distinction between $(this) and $("#id") for me?

The ID parameter is not being included in the AJAX request URL

Resizing Checkboxes in Internet Explorer 9

When the browser width is reduced, the text appears outside of the image

Enhancing the layout of an ASP.NET master page with an HTML table that extends beyond the

Utilizing jQuery and CSS for positioning in my debut project: an Etch A Sketch

Exploring the functionality of jQuery by incorporating a variable into the selector

Guide to displaying options in the Vue material select box even when the default value is blank

Sending a post request with Ajax in an ASP.NET Webforms application

Having trouble removing or adding a class to an HTML element?

How to prevent the scroll bar from affecting a fixed div located at the top of the page

Struggling to align form inputs next to each other

A guide to troubleshoot and resolve the 500 (Internal Server Error) encountered during an Ajax post request in Laravel

Trying to prevent AJAX from running on the undo link

Troubleshooting problems with background-image in CSS using Javascript

Unable to apply 3rd condition with ngClass into effect

Prevent jQuery mouseover from hiding an element when the mouse is hovering over a popup window

When the content in one box exceeds the content in the other, one box is considered to be overfilled