Over-spinning Flickity JS slider The 2019 Stack Overflow Developer Survey Results Are InBasic jQuery sliderVideo/article slider.Interactive sliderImage/content sliderThumbnails for bootstrap carousel jQuery pluginSuper simple jQuery sliderSlider control constructorJavaScript sliderGrid image banner sliderJquery Testimonial Slider Controls

Are there any other methods to apply to solving simultaneous equations?

Did the UK government pay "millions and millions of dollars" to try to snag Julian Assange?

Slides for 30 min~1 hr Skype tenure track application interview

Button changing its text & action. Good or terrible?

How to display lines in a file like ls displays files in a directory?

Output the Arecibo Message

How do you keep chess fun when your opponent constantly beats you?

Relationship between Gromov-Witten and Taubes' Gromov invariant

How did passengers keep warm on sail ships?

What do I do when my TA workload is more than expected?

Mathematics of imaging the black hole

Why didn't the Event Horizon Telescope team mention Sagittarius A*?

What is the meaning of Triage in Cybersec world?

"as much details as you can remember"

What do hard-Brexiteers want with respect to the Irish border?

What do these terms in Caesar's Gallic wars mean?

How much of the clove should I use when using big garlic heads?

Inverse Relationship Between Precision and Recall

If I can cast sorceries at instant speed, can I use sorcery-speed activated abilities at instant speed?

How can I define good in a religion that claims no moral authority?

Why are there uneven bright areas in this photo of black hole?

What is this sharp, curved notch on my knife for?

What is the motivation for a law requiring 2 parties to consent for recording a conversation

How can I add encounters in the Lost Mine of Phandelver campaign without giving PCs too much XP?



Over-spinning Flickity JS slider



The 2019 Stack Overflow Developer Survey Results Are InBasic jQuery sliderVideo/article slider.Interactive sliderImage/content sliderThumbnails for bootstrap carousel jQuery pluginSuper simple jQuery sliderSlider control constructorJavaScript sliderGrid image banner sliderJquery Testimonial Slider Controls



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








0












$begingroup$


I got a bit of a strange JS issue that I could use help on if anyone has time…



Basically if you flick the slider just the wrong way then it'll spin infinitely rather than just settle on a slide and stop. It's a bit hard to get it to do that. I think it has something to do with spinning past the gap between the first/last slide, but I can't quite tell where the problem is.



Do you see anything wrong with the code that might be the cause of that behaviour?



Here’s a reduced case:
https://codepen.io/Julix/pen/xexawP
and proof that it still works:
https://www.youtube.com/watch?v=RQQwsAq5BQU



Here's the JS code from that reduced case:



// Flickity slider from external js: flickity.pkgd.js
// Prev- and next classes from external js: https://codepen.io/desandro/pen/wWQQwN.js
"use strict";

var $carousel = $('.carousel-main').flickity(
"wrapAround": true,
"draggable": true,
"prevNextButtons": false,
"pageDots": false
);
var $nav = $('.carousel-nav').flickity(
"on":
ready: choseCenterSlide,
scroll: choseCenterSlide
,
"asNavFor": ".carousel-main",
"wrapAround": true,
"percentPosition": false,
"draggable": true,
"pageDots": false,
"prevNextButtons": false
);
;
var navDragging = false;
$nav.on('dragStart.flickity', function ()
return navDragging = true;
);
$nav.on('settle.flickity', function ()
return navDragging = false;
);
$nav.data('flickity').resize();

function choseCenterSlide()
// check if this.x is within slideableWidth
var currentX = this.x > 0 ? -this.slideableWidth + this.x : this.x < -this.slideableWidth ? this.slideableWidth + this.x : this.x; // calculate closest slide

var distances = this.slides.map(function (slide)
return -slide.target;
);
var closestDistance = distances.reduce(function (prev, curr)
return Math.abs(curr - currentX) < Math.abs(prev - currentX) ? curr : prev;
);
var closestSlideIndex = distances.indexOf(closestDistance); // early return

if (closestSlideIndex == this.scrollSlideIndex) return; // register

if (this.scrollSlideIndex == null) this.scrollSlideIndex = this.selectedIndex; // change scrollSlide

this.slides[this.scrollSlideIndex].cells.forEach(function (cell)
cell.element.classList.remove('is-closest');
);
this.slides[closestSlideIndex].cells.forEach(function (cell)
cell.element.classList.add('is-closest');
); // update state variable

this.scrollSlideIndex = closestSlideIndex; // update selectedSlide

if (navDragging)
this.select(this.scrollSlideIndex);

if (this.navCompanion)
this.navCompanion.select(this.scrollSlideIndex);












share|improve this question







New contributor




Julix is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.







$endgroup$


















    0












    $begingroup$


    I got a bit of a strange JS issue that I could use help on if anyone has time…



    Basically if you flick the slider just the wrong way then it'll spin infinitely rather than just settle on a slide and stop. It's a bit hard to get it to do that. I think it has something to do with spinning past the gap between the first/last slide, but I can't quite tell where the problem is.



    Do you see anything wrong with the code that might be the cause of that behaviour?



    Here’s a reduced case:
    https://codepen.io/Julix/pen/xexawP
    and proof that it still works:
    https://www.youtube.com/watch?v=RQQwsAq5BQU



    Here's the JS code from that reduced case:



    // Flickity slider from external js: flickity.pkgd.js
    // Prev- and next classes from external js: https://codepen.io/desandro/pen/wWQQwN.js
    "use strict";

    var $carousel = $('.carousel-main').flickity(
    "wrapAround": true,
    "draggable": true,
    "prevNextButtons": false,
    "pageDots": false
    );
    var $nav = $('.carousel-nav').flickity(
    "on":
    ready: choseCenterSlide,
    scroll: choseCenterSlide
    ,
    "asNavFor": ".carousel-main",
    "wrapAround": true,
    "percentPosition": false,
    "draggable": true,
    "pageDots": false,
    "prevNextButtons": false
    );
    ;
    var navDragging = false;
    $nav.on('dragStart.flickity', function ()
    return navDragging = true;
    );
    $nav.on('settle.flickity', function ()
    return navDragging = false;
    );
    $nav.data('flickity').resize();

    function choseCenterSlide()
    // check if this.x is within slideableWidth
    var currentX = this.x > 0 ? -this.slideableWidth + this.x : this.x < -this.slideableWidth ? this.slideableWidth + this.x : this.x; // calculate closest slide

    var distances = this.slides.map(function (slide)
    return -slide.target;
    );
    var closestDistance = distances.reduce(function (prev, curr)
    return Math.abs(curr - currentX) < Math.abs(prev - currentX) ? curr : prev;
    );
    var closestSlideIndex = distances.indexOf(closestDistance); // early return

    if (closestSlideIndex == this.scrollSlideIndex) return; // register

    if (this.scrollSlideIndex == null) this.scrollSlideIndex = this.selectedIndex; // change scrollSlide

    this.slides[this.scrollSlideIndex].cells.forEach(function (cell)
    cell.element.classList.remove('is-closest');
    );
    this.slides[closestSlideIndex].cells.forEach(function (cell)
    cell.element.classList.add('is-closest');
    ); // update state variable

    this.scrollSlideIndex = closestSlideIndex; // update selectedSlide

    if (navDragging)
    this.select(this.scrollSlideIndex);

    if (this.navCompanion)
    this.navCompanion.select(this.scrollSlideIndex);












    share|improve this question







    New contributor




    Julix is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.







    $endgroup$














      0












      0








      0





      $begingroup$


      I got a bit of a strange JS issue that I could use help on if anyone has time…



      Basically if you flick the slider just the wrong way then it'll spin infinitely rather than just settle on a slide and stop. It's a bit hard to get it to do that. I think it has something to do with spinning past the gap between the first/last slide, but I can't quite tell where the problem is.



      Do you see anything wrong with the code that might be the cause of that behaviour?



      Here’s a reduced case:
      https://codepen.io/Julix/pen/xexawP
      and proof that it still works:
      https://www.youtube.com/watch?v=RQQwsAq5BQU



      Here's the JS code from that reduced case:



      // Flickity slider from external js: flickity.pkgd.js
      // Prev- and next classes from external js: https://codepen.io/desandro/pen/wWQQwN.js
      "use strict";

      var $carousel = $('.carousel-main').flickity(
      "wrapAround": true,
      "draggable": true,
      "prevNextButtons": false,
      "pageDots": false
      );
      var $nav = $('.carousel-nav').flickity(
      "on":
      ready: choseCenterSlide,
      scroll: choseCenterSlide
      ,
      "asNavFor": ".carousel-main",
      "wrapAround": true,
      "percentPosition": false,
      "draggable": true,
      "pageDots": false,
      "prevNextButtons": false
      );
      ;
      var navDragging = false;
      $nav.on('dragStart.flickity', function ()
      return navDragging = true;
      );
      $nav.on('settle.flickity', function ()
      return navDragging = false;
      );
      $nav.data('flickity').resize();

      function choseCenterSlide()
      // check if this.x is within slideableWidth
      var currentX = this.x > 0 ? -this.slideableWidth + this.x : this.x < -this.slideableWidth ? this.slideableWidth + this.x : this.x; // calculate closest slide

      var distances = this.slides.map(function (slide)
      return -slide.target;
      );
      var closestDistance = distances.reduce(function (prev, curr)
      return Math.abs(curr - currentX) < Math.abs(prev - currentX) ? curr : prev;
      );
      var closestSlideIndex = distances.indexOf(closestDistance); // early return

      if (closestSlideIndex == this.scrollSlideIndex) return; // register

      if (this.scrollSlideIndex == null) this.scrollSlideIndex = this.selectedIndex; // change scrollSlide

      this.slides[this.scrollSlideIndex].cells.forEach(function (cell)
      cell.element.classList.remove('is-closest');
      );
      this.slides[closestSlideIndex].cells.forEach(function (cell)
      cell.element.classList.add('is-closest');
      ); // update state variable

      this.scrollSlideIndex = closestSlideIndex; // update selectedSlide

      if (navDragging)
      this.select(this.scrollSlideIndex);

      if (this.navCompanion)
      this.navCompanion.select(this.scrollSlideIndex);












      share|improve this question







      New contributor




      Julix is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.







      $endgroup$




      I got a bit of a strange JS issue that I could use help on if anyone has time…



      Basically if you flick the slider just the wrong way then it'll spin infinitely rather than just settle on a slide and stop. It's a bit hard to get it to do that. I think it has something to do with spinning past the gap between the first/last slide, but I can't quite tell where the problem is.



      Do you see anything wrong with the code that might be the cause of that behaviour?



      Here’s a reduced case:
      https://codepen.io/Julix/pen/xexawP
      and proof that it still works:
      https://www.youtube.com/watch?v=RQQwsAq5BQU



      Here's the JS code from that reduced case:



      // Flickity slider from external js: flickity.pkgd.js
      // Prev- and next classes from external js: https://codepen.io/desandro/pen/wWQQwN.js
      "use strict";

      var $carousel = $('.carousel-main').flickity(
      "wrapAround": true,
      "draggable": true,
      "prevNextButtons": false,
      "pageDots": false
      );
      var $nav = $('.carousel-nav').flickity(
      "on":
      ready: choseCenterSlide,
      scroll: choseCenterSlide
      ,
      "asNavFor": ".carousel-main",
      "wrapAround": true,
      "percentPosition": false,
      "draggable": true,
      "pageDots": false,
      "prevNextButtons": false
      );
      ;
      var navDragging = false;
      $nav.on('dragStart.flickity', function ()
      return navDragging = true;
      );
      $nav.on('settle.flickity', function ()
      return navDragging = false;
      );
      $nav.data('flickity').resize();

      function choseCenterSlide()
      // check if this.x is within slideableWidth
      var currentX = this.x > 0 ? -this.slideableWidth + this.x : this.x < -this.slideableWidth ? this.slideableWidth + this.x : this.x; // calculate closest slide

      var distances = this.slides.map(function (slide)
      return -slide.target;
      );
      var closestDistance = distances.reduce(function (prev, curr)
      return Math.abs(curr - currentX) < Math.abs(prev - currentX) ? curr : prev;
      );
      var closestSlideIndex = distances.indexOf(closestDistance); // early return

      if (closestSlideIndex == this.scrollSlideIndex) return; // register

      if (this.scrollSlideIndex == null) this.scrollSlideIndex = this.selectedIndex; // change scrollSlide

      this.slides[this.scrollSlideIndex].cells.forEach(function (cell)
      cell.element.classList.remove('is-closest');
      );
      this.slides[closestSlideIndex].cells.forEach(function (cell)
      cell.element.classList.add('is-closest');
      ); // update state variable

      this.scrollSlideIndex = closestSlideIndex; // update selectedSlide

      if (navDragging)
      this.select(this.scrollSlideIndex);

      if (this.navCompanion)
      this.navCompanion.select(this.scrollSlideIndex);









      javascript






      share|improve this question







      New contributor




      Julix is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question







      New contributor




      Julix is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question






      New contributor




      Julix is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 20 mins ago









      JulixJulix

      1013




      1013




      New contributor




      Julix is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      Julix is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      Julix is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.




















          0






          active

          oldest

          votes












          Your Answer





          StackExchange.ifUsing("editor", function ()
          return StackExchange.using("mathjaxEditing", function ()
          StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
          StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
          );
          );
          , "mathjax-editing");

          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "196"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );






          Julix is a new contributor. Be nice, and check out our Code of Conduct.









          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f217298%2fover-spinning-flickity-js-slider%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          0






          active

          oldest

          votes








          0






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          Julix is a new contributor. Be nice, and check out our Code of Conduct.









          draft saved

          draft discarded


















          Julix is a new contributor. Be nice, and check out our Code of Conduct.












          Julix is a new contributor. Be nice, and check out our Code of Conduct.











          Julix is a new contributor. Be nice, and check out our Code of Conduct.














          Thanks for contributing an answer to Code Review Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          Use MathJax to format equations. MathJax reference.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f217298%2fover-spinning-flickity-js-slider%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          名間水力發電廠 目录 沿革 設施 鄰近設施 註釋 外部連結 导航菜单23°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.7113923°50′10″N 120°42′41″E / 23.83611°N 120.71139°E / 23.83611; 120.71139計畫概要原始内容臺灣第一座BOT 模式開發的水力發電廠-名間水力電廠名間水力發電廠 水利署首件BOT案原始内容《小檔案》名間電廠 首座BOT水力發電廠原始内容名間電廠BOT - 經濟部水利署中區水資源局

          Is my guitar’s action too high? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 23, 2019 at 23:30 UTC (7:30pm US/Eastern)Strings too stiff on a recently purchased acoustic guitar | Cort AD880CEIs the action of my guitar really high?Μy little finger is too weak to play guitarWith guitar, how long should I give my fingers to strengthen / callous?When playing a fret the guitar sounds mutedPlaying (Barre) chords up the guitar neckI think my guitar strings are wound too tight and I can't play barre chordsF barre chord on an SG guitarHow to find to the right strings of a barre chord by feel?High action on higher fret on my steel acoustic guitar

          香港授勳及嘉獎制度 目录 勳章及獎狀類別 嘉獎等級 授勳及嘉獎提名 統計數字 多次獲頒勳章或獎狀的人士 爭議 褫奪機制 参考文献 外部連結 参见 导航菜单統計數字一九九七年七月二日(星期三)香港特別行政區的授勳制度六七暴動領袖獲大紫荊勳章 董建華被斥為肯定殺人放火董建華授勳楊光 議員窮追猛打蘋論:顛倒是非黑白的大紫荊董讚楊光有貢獻避談暴動董拒答授勳楊光原因撤除勳銜撤除勳銜撤除勳銜特首掌「搣柴」生殺權行為失當罪 隨時「搣柴」失長糧政府刊憲 許仕仁郭炳江遭「搣柴」去年中終極上訴失敗 許仕仁郭炳江撤勳章太平紳士猛料阿Sir講古—— 「搣柴」有故一九九八年授勳名單一九九九年授勳名單二○○三年授勳名單二○○八年授勳名單二○○七年授勳名單政府總部禮賓處 - 授勳及嘉獎香港特別行政區勳章綬帶一覽(PDF)(非官方)