Navigate through the Jquery slider by continuously scrolling to the right or simply clicking

Is there a way to prevent my slider from continuously scrolling? I think it has something to do with the offset parameter but I'm having trouble figuring it out. Any assistance would be greatly appreciated.

var $container = $(container);

var resizeFn = function () {
    var small = $(window).width() < 800;
    $container.toggleClass('four', small).toggleClass('six', !small);
}

var toggleButtons = function () {

}

var nextPane = function (e) {
    e && e.preventDefault();
    var $container = $(this).closest('.grid-container');
    var $items = $('.items', $container);
    var offset = $items.css('marginLeft').replace('px', '');
    var width = $container.width() + parseInt($('.item', $container).css('marginRight').replace('px', ''));
    $items.css('marginLeft', offset - width);
}

var prevPane = function (e) {
    e && e.preventDefault();
    var $container = $(this).closest('.grid-container');
    var $items = $('.items', $container);
    var offset = $items.css('marginLeft').replace('px', '');
    var width = $container.width() + parseInt($('.item', $container).css('marginRight').replace('px', '')); 
    $items.css('marginLeft', offset + width);
}

resizeFn();
$(window).resize(resizeFn);

$('.next', $container).click(nextPane);
$('.prev', $container).click(prevPane);

Check out this jsFiddle for more help.

Answer №1

utilize

let size = $('.element').width() + parseInt($('.element', $box).css('marginRight').replace('px', ''));

instead of $box.width() in both

let forwardSlide = function (e) {
and
let backwardSlide = function (e) {
and it functions properly

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I tried utilizing the useState hook to store the value, but surprisingly, it failed to update

I am brand new to Reactjs and currently working on creating an address form that includes 3 select options for country, state, and city. I have implemented React hooks in my project, where the page fetches a list of countries upon initial load. Subsequentl ...

Unable to drag multiple elements when using addClass

I'm currently exploring the use of the multidraggable plug-in for jQuery, found at this GitHub repository. I am attempting to include another element to drag using addClass, however, it does not seem to be working. I've made adjustments to the ex ...

Chrome's CSS columns cannot contain iframes without causing them to escape their

I'm currently attempting to incorporate Iframes within a 3-column grid. HTML <div id="blogPosts"> <div class="blogPost"> <iframe width="100%" src="https://www.youtube.com/embed/YqeW9_5kURI" frameborder="0" allowfullscre ...

What's the best way to use the like query in Mongoose?

Struggling with applying a Like query using Mongoose in the MEAN stack. Despite trying various solutions found online, nothing seems to work for me. Here is the model schema: const mongoose = require('mongoose'); const ItemTransactionSchema = ...

Capture the Select2 Multiple Selection not being saved in Serverside within the MVC framework

When I use a Select2 multi-select box and select multiple items, the selections are not being captured on the server side. View File (cshtml) <select class="form-control" name="subject[]" id="idsubject" multiple></select> JavaScript (JS) ...

Leveraging the node CLI tool as a library for trimming MP3 files (trimp3

I recently came across a fantastic library that I am interested in using for my nodejs project: https://github.com/kyr0/trimp3 The only issue is that it functions as a cli tool, and I would like to integrate it seamlessly into my codebase as a library. D ...

Tips for transferring a variable from a hyperlink to a Flask application

Here is a snippet of my Python Flask code: @app.route('/ques/<string:idd>',methods=['GET', 'POST']) def ques(idd): print(id) And here is the accompanying Javascript code: var counts = {{ test|tojson }}; var text = ...

"Preload the search query from the table, link it, and then send it to Ajax for

Currently, I have a dynamically generated table using ajax and a json file. The table consists of three segments: name, ID, and a link for more detailed information on each result. Here is an example of how the table looks: PATO:0001243 light blue ...

Storing ng-change event for a checkbox in AngularJS in a valid manner

I have a requirement where I need to handle multiple input checkboxes. The goal is to store the changed checkbox events in an array and then save them when the user submits the changes. <td><input type="checkbox" class="switch" ng-model="each_val ...

Create a form button that triggers the execution of a Python function

Need help with calling a Python function with a form button Greetings, everyone! I am encountering an issue and would greatly appreciate any assistance. I have a webpage that contains a single button within a Python structure: <form action = "http://l ...

After refreshing the page, the jQuery AJAX item becomes unclickable

Currently utilizing Django Within the body block <div id="tag_like"> {% if liked %} <img id="unlike" title="unlike" src="{{ STATIC_URL }}pic/bad.png" /> {% else %} <img id="like" title="like" src="{{ STATIC_URL }}pic/go ...

Steps for updating a specific item within an object in an array of MongoDB document

Consider the following data collection, for which I have some questions: { "_id" : ObjectId("4faaba123412d654fe83hg876"), "user_id" : 123456, "total" : 100, "items" : [ { ...

How can I adjust the indentation in Angular Prime-ng's p-tree component?

In my project, I am utilizing the primg-ng tree component for the sidebar. Currently, the output is displayed as shown here: https://i.stack.imgur.com/kcSQt.png However, I am looking to maintain consistent indentation levels without any adaptive changes ...

Sending JSON data stored in a JavaScript variable through a jQuery POST request

I am currently attempting to retrieve data from a remote location using a JQuery post method. It works perfectly fine when I directly input the data to be posted, but for some reason, it fails when I store the JSON in a JavaScript variable and pass it in. ...

Trouble with AJAX POST request functionality outside of POSTMAN's scope

Attempting to send data via an AJAX request. Check out the code below: console.log(quote) $.ajax({ url: '{{ path('set_products_in_db') }}', type: 'POST', contentType: "application/json", ...

The CSS transition fails to function correctly once a specific function is executed

When I hover over a div, the background color changes due to a transition effect. However, if I click on a button that triggers myFunction2 to change the background color of the div before hovering over it, the transition effect no longer works. functi ...

What is the most efficient method for linking the hostname of my website to the file path within my Express.js static file server?

When using vanilla JavaScript in the browser, we can retrieve the hostname using: window.location.hostname However, if we are working with Node.js/Express.js on the server side, how can we achieve the same result? Furthermore, I am looking for a way to ...

I encountered an issue trying to animate an OBJ file in Three.JS, even after successfully loading it into the browser

I have encountered a challenge with scaling and animating an object loaded into my web browser using WebGL. The issue arises when attempting to include animation code within the render( ) loop function, specifically with the 'object' variable whi ...

Can you explain the meaning of assigning `function() {}` to a variable?

I understand that functions are considered objects in javascript and can be assigned to variables. I've come across this question as well: How does the (function() {})() construct work and why do people use it?. However, I'm curious about what e ...

Unknown CSS element discovered: bootstrap, gradient, carousel

I recently created a random quote app using javascript, jQuery, and bootstrap on Codepen. Everything worked perfectly there. However, when I organized the files, pushed them to git, and tried to view the app from Safari, I encountered some warnings and t ...