Loop event click jquery synchronize current status

Loop event click jquery synchronize current status

Content Index :

Loop event click jquery synchronize current status
Tag : javascript , By : Nic Doye
Date : November 28 2020, 11:01 PM

will help you I think you should better use currentItem instead another counter, see following:
<!DOCTYPE html>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
      margin: 0px;
      padding: 0px;
    .conta{margin: 0 auto;
    width: 300px; position:relative;}
    .contasli #next, .contasli #prev{
    background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0;
    border-radius: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
    top: 50%;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    min-height: 70px;
    min-width: 70px;
    overflow: hidden;
    .contasli #prev{background:#ccc;}
    .contasli #next{background:#ccc;}
    .contasli .npconta.left{left:0;}
    .contasli .npconta.right{right:0;}
    #slider img{left: 0;
        position: absolute;
        transition: opacity 1s ease-in-out 0s;
        max-width: 100%;

      .setimage, .setimageleft{background-position: center center;
    background-size: cover;
    border-radius: 50%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.3s ease 0s;
    width: 100%;
<div class="conta">
<div id="slider">
    <img src="http://dummyimage.com/600x400/000/fff&text=1.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=2.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=3.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=4.jpg" alt="" />
    <img src="http://dummyimage.com/600x400/000/fff&text=5.jpg" alt="" />


<div class="contasli">
<div class="npconta left">
<div id="prev"><div class="setimageleft"></div></div>

<div class="npconta right">
<div id="next"><div class="setimage"></div></div>

    var images = [];
    $('#slider img').each(function () {

    var imgcount = images.length;
    var currentItem = 0;

    var imagesrc = $('#slider').children('img').map(function(){
        return $(this).attr('src')

    pcounter = imgcount-1;
    $('.setimageleft').css({'background-image': 'url(' + imagesrc[pcounter] + ')',});

    ncounter = 1;
    $('.setimage').css({'background-image': 'url(' + imagesrc[ncounter] + ')',});

    $('#next').click(function () {
        currentItem = (currentItem + 1) % imgcount;

    $('#prev').click(function () {
        if (currentItem > 0) currentItem--;
        else currentItem = imgcount - 1;
    function calcButtons(){
          $('.setimageleft').css({'background-image':'url(' + imagesrc[currentItem - 1] + ')',});
          $('.setimageleft').css({'background-image':'url(' + imagesrc[imgcount-1] + ')',});
          $('.setimage').css({'background-image':'url(' + imagesrc[currentItem + 1] + ')',});
          $('.setimage').css({'background-image':'url(' + imagesrc[0] + ')',});

No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

jQuery get current click event for element and append to it

Tag : jquery , By : user158193
Date : March 29 2020, 07:55 AM
To fix this issue The jQuery event binding mechanism isn't one that overwrites. In other words:
 $("#button").click(function() { alert("hello"); });
 $("#button").click(function() { alert("goodbye"); });

jQuery click handler passing event object, getting checkbox status

Tag : jquery , By : user87752
Date : March 29 2020, 07:55 AM
it should still fix some issue (Sort of a newbie question from someone that is more accustomed to how Flash/ActionScript works.) , .attr() needs to be called on a jQuery object:
checkboxState = $(event.target).is(':checked');
checkboxState = $(this).is(':checked');

Get the current word in paragraph on click event in jquery

Tag : jquery , By : user135518
Date : March 29 2020, 07:55 AM
I wish did fix the issue. Well, for your solution you will need to work with selections and doubleclick event as a tricky thing and get the selected word in the generated range by the doubleclick event.
There is no other way if you don't want to introduce new tags.
$(document).ready(function() {

    /* set hand cursor to let know the user that this area is clickable */
    var p = $('p');
    p.css({ cursor: 'pointer' });

    /* doubleclick event working with ranges */
    p.dblclick(function(e) {
        var selection = window.getSelection() || document.getSelection() || document.selection.createRange();
        var word = $.trim(selection.toString());
        if(word != '') {
        /* use this if firefox: selection.collapse(selection.anchorNode, selection.anchorOffset); */


jQuery defining click events in for loop (taking click event info from array of objects)

Tag : javascript , By : Cosmin
Date : March 29 2020, 07:55 AM
I hope this helps you . This problem can be fixed in a number of ways. You can use closures, or make the Popups variable an object(with key-value pairs, like var Popups = {'Payment-Selection':'Cards-Popup',...), but the solution that would require the least modification to your code would be to use a custom attribute, like so:
$(Popups[i]['c']).attr('Wt', Popups[i]['w']).click(function () {
        var Wt = this.getAttribute('Wt');

Working click event in current index with jquery

Tag : jquery , By : foxthrot
Date : March 29 2020, 07:55 AM
I hope this helps you . If you want when click one li, then change its color(or other style), try css:
$("li").click(function () {
    "width": 50px,
    "background-color": "red"
    // maybe other attribute pairs
$("li").click(function () {
Related Posts Related QUESTIONS :
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • Binding data in two respective $scope in AngularJS, how?
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • Node.js xml2js http.request tag matching
  • applying texture to custom plane geometry in Threejs
  • How do I pass an Event as a function parameter in HTML written inside JavaScript variable?
  • Interface of object parameter with default value and default property
  • Does using try / catch rather than `.catch` observable operator with XHR requests reduce performance?
  • In IE11 background colors not working on printing
  • TypeScript interface signature "(): string"
  • Is synchronous XMLHttpRequest supported in Internet Explorer 10 and 11?
  • Axios function not returning any values with js
  • How to use firestore TIMESTAMP to create time-stamp in JavaScript
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • Why Named Function Expression itself cannot assign Name to another Value?
  • How to reset scroll position on single page pagination
  • How to scroll to bottom of page, when a new message is sent - Socket.io
  • How to reconstruct audio blob from a base64 encoded String?
  • How to calculate numbers within an array of objects
  • Using JavaScript to change CSS properties of SVG circles for all circles that was not clicked
  • Is there value in propTypeing repeat required properties at every level of nested components?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com