Announcement

Collapse
No announcement yet.

Roundabout (carousel) changing the number of images advancing

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Roundabout (carousel) changing the number of images advancing

    With the Slick Slide that is used in other ReadyThemes you are able to set the number of slides to scroll when advancing through the images.

    Code:
    slidesToShow: 4,
    slidesToScroll: 1,
    How is this done with the roundabout?
    Leslie Kirk
    Miva Merchant Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

  • Hey Leslie,

    For me, it's in that same scripts.js file settings for slidesToShow and slidesToScroll in the productCarousels function under "sharedFunctions".

    Code:
    sharedFunctions: {
    // ---- Product Carousels ---- //
    productsCarousels: function (carousel, append) {
    var carousel = $(carousel);
    if (append === true) {
    var appendArrowsTo = $(carousel.selector).parent();
    }
    else if (append === 'undefined') {
    var appendArrowsTo = $(carousel.selector);
    };
    
    $.ajax({
    cache: true,
    crossDomain: true,
    dataType: 'script',
    url: '../js/jquery.slick.min.js'
    }).done(function () {
    carousel.slick({
    appendArrows: appendArrowsTo,
    draggable: false,
    slidesToScroll: 4,
    slidesToShow: 4,




    Is this the carousel you mention?

    Hope that helps!
    Jaime Veronda
    Last edited by jaime.v; 06-14-18, 06:33 AM.

    Comment


    • Hi Jamie - in the Elements/Shadows ReadyTheme? I followed these instructions to get it going (along with a bit of help) https://docs.miva.com/elements/exten...oduct-carousel
      Leslie Kirk
      Miva Merchant Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


      • Oh no, Suivant, my apologies! I'm in the wrong thread, haha!

        Comment


        • Hi Leslie,

          Roundabout take a different approach with displaying items. You can set the grouping of items by break point, however Roundabout will always slide one group at a time. So if you set groupWide to 3, each group of 3 will slide with each click of a directional arrow, swipe, or automated scroll.

          Code:
          /**
          * You can also pass the following settings to change the elements being called by the function:
          *
          * autoStart: false \\ [Boolean] - Set to `true` for automatic cycling
          * carouselDelay: 5000 \\ [Integer] - Set delay between slide display for automatic cycling
          * group: false \\ [Boolean] - Set to `true` to create grouping of elements based on breakpoint
          * groupClass: 'x-carousel__item' \\ [String} - Set the class to be used for element groups
          * groupTiny: 2 \\ [Integer] - Set number of elements to show on screens < 640px
          * groupSmall: 2 \\ [Integer] - Set number of elements to show on screens between 640px and 767px
          * groupMedium: 4 \\ [Integer] - Set number of elements to show on screens between 768px and 959px
          * groupLarge: 4 \\ [Integer] - Set number of elements to show on screens between 960px and 1439px
          * groupWide: 4 \\ [Integer] - Set number of elements to show on screens >= 1440px
          * groupWrapper: 'figure' \\ [String} - Set element to wrap groups with
          */
          $.hook('carousel').roundabout({
              autoStart: false,
              carouselDelay: 5000,
              group: false,
              groupClass: 'x-carousel__item',
              groupTiny: 2,
              groupSmall: 2,
              groupMedium: 4,
              groupLarge: 4,
              groupWide: 4,
              groupWrapper: 'figure'
          });
          Matt Zimmermann
          Director of UI/UX Standards and Theme Development
          / Miva, Inc.

          Comment


          • Originally posted by Matt Zimmermann View Post
            Hi Leslie,

            Roundabout take a different approach with displaying items. You can set the grouping of items by break point, however Roundabout will always slide one group at a time. So if you set groupWide to 3, each group of 3 will slide with each click of a directional arrow, swipe, or automated scroll.

            So are you saying if I set groupWide to 3 then only 3 images will display and they will slide as a group?


            Leslie Kirk
            Miva Merchant Certified Developer
            Miva Merchant Specialist since 1997
            Previously of Webs Your Way
            (aka Leslie Nord leslienord)

            Email me: [email protected]
            www.lesliekirk.com

            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

            Comment


            • Correct
              Matt Zimmermann
              Director of UI/UX Standards and Theme Development
              / Miva, Inc.

              Comment

              Working...
              X

              This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

              This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

              Accept