Pricing slider (modern sliders) - Initiate at 2nd, 3rd or 4th slide?

[TristanP]

Hi there,

I am considering a use case where i would like to use a slider type very much like the modern sliders Pricing Slider example. I am a Max customer, I’ve watched the videos but i can’t find a solution for my use case:

My issue with the Pricing Slider is that it always opens with the first slide being the one in focus / active. However, for my use case i will have pages where it needs to be the 2nd, 3rd or maybe 4th that needs to be the one in focus when the page opens.

Is there a way to achieve this? Natively, or maybe with Javascript?

[ruenel]

Hello Tristan,

Thanks for writing in!

With the Slider element, the first slide will always be in focus. If you want the “Pro” or “Team” slide to focus on page load, you will have to rearrange the slides. You can do all that by editing the Looper Provider JSON and swap the data over:

[
  {
    "name"        : "Starter",
    "description" : "Perfect for hobbyists or bootstrapping a project.",
    "accent"      : "#2196f3",
    "price"       : "20",
    "link"        : "#starter",
    "linkCta"     : "Choose",
    "features"    : [
      "1 instance",
      "25,000 visits",
      "10 GB of storage",
      "Free SSL and CDN"
    ]
  },
  {
    "name"        : "Growth",
    "description" : "For those who find themselves helping a friend or two.",
    "accent"      : "#2196f3",
    "price"       : "60",
    "link"        : "#growth",
    "linkCta"     : "Choose",
    "features"    : [
      "3 instances",
      "50,000 visits",
      "20 GB of storage",
      "Free SSL and CDN"
    ]
  },
  {
    "name"        : "Pro",
    "description" : "Business is booming and you're the talk of the town.",
    "price"       : "150",
    "accent"      : "#2196f3",
    "link"        : "#pro",
    "linkCta"     : "Choose",
    "features"    : [
      "5 instances",
      "100,000 visits",
      "30 GB of storage",
      "Free SSL and CDN"
    ]
  },
  {
    "name"        : "Team",
    "description" : "Now you've got employees and health insurance to fund (gulp).",
    "price"       : "400",
    "accent"      : "#2196f3",
    "link"        : "#team",
    "linkCta"     : "Choose",
    "features"    : [
      "10 instances",
      "250,000 visits",
      "40 GB of storage",
      "Free SSL and CDN"
    ]
  },
  {
    "name"        : "Organization",
    "description" : "For those with advanced needs and ever-increasing operations.",
    "price"       : "800",
    "accent"      : "#2196f3",
    "link"        : "#organization",
    "linkCta"     : "Choose",
    "features"    : [
      "20 instances",
      "400,000 visits",
      "50 GB of storage",
      "Free SSL and CDN",
      "Priority support"
    ]
  },
  {
    "name"        : "Enterprise",
    "description" : "If you can dream it, our Solution Architects can build it.",
    "price"       : "1,600",
    "accent"      : "#2196f3",
    "link"        : "#enterprise",
    "linkCta"     : "Choose",
    "features"    : [
      "60 instances",
      "1,000,000 visits",
      "100 GB of storage",
      "Free SSL and CDN",
      "Priority support"
    ]
  },
  {
    "name"        : "Elite",
    "description" : "For this amount of money, we're happy to just do the work.",
    "price"       : "3,200",
    "accent"      : "#2196f3",
    "link"        : "#elite",
    "linkCta"     : "Choose",
    "features"    : [
      "150 instances",
      "3,000,000 visits",
      "250 GB of storage",
      "Free SSL and CDN",
      "Priority support",
      "We basically just do your job"
    ]
  }
]

Best Regards.

[TristanP]

Thanks! That is helpful

[tristup]

Hi Tristan,

Glad that we are able to help you.

Thanks