Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
<script>
const carouselPhotos = [
'https://picsum.photos/300/200?random=1',
'https://picsum.photos/300/200?random=2',
'https://picsum.photos/300/200?random=3',
'https://picsum.photos/300/200?random=4'
]
let firstIndex = 0
let secondIndex = 1
let showFirst = true
const next = () => {
showFirst = !showFirst
setTimeout(() => {
if (showFirst) {
secondIndex = (secondIndex + 1) % carouselPhotos.length
} else {
firstIndex = (firstIndex + 1) % carouselPhotos.length
}
}, 500)
}
</script>

<style>
img, button {
position: absolute;
}
p {
margin-top: 300px;
}
img {
opacity: 0;
transition: opacity 0.5s;
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';

var root = $.template(`<img alt=""> <img alt=""> <button class="svelte-zakrkd">Next!</button> <p class="svelte-zakrkd"> </p> <p class="svelte-zakrkd"> </p> <p class="svelte-zakrkd"> </p>`, 1);

export default function App($$anchor) {
const carouselPhotos = [
'https://picsum.photos/300/200?random=1',
'https://picsum.photos/300/200?random=2',
'https://picsum.photos/300/200?random=3',
'https://picsum.photos/300/200?random=4'
];

let firstIndex = $.mutable_state(0);
let secondIndex = $.mutable_state(1);
let showFirst = $.mutable_state(true);

const next = () => {
$.set(showFirst, !$.get(showFirst));

setTimeout(
() => {
if ($.get(showFirst)) {
$.set(secondIndex, ($.get(secondIndex) + 1) % carouselPhotos.length);
} else {
$.set(firstIndex, ($.get(firstIndex) + 1) % carouselPhotos.length);
}
},
500
);
};

var fragment = root();
var img = $.first_child(fragment);
var img_1 = $.sibling(img, 2);
result = svelte.compile(source, {
generate: ,
});

img.svelte-zakrkd, button.svelte-zakrkd {
position: absolute;
}
p.svelte-zakrkd {
margin-top: 300px;
}
img.svelte-zakrkd {
opacity: 0;
transition: opacity 0.5s;
}
.visible.svelte-zakrkd {
opacity: 1;
}

		
			
				
  • Root {
    • css: StyleSheet {...}
      • type: "StyleSheet"
      • start: 528
      • end: 700
      • attributes: []
      • children: [...] (4)
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 537
            • end: 548
            • children: [...] (2)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 537
                • end: 540
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "img"
                        • start: 537
                        • end: 540
                        }
                      ]
                    • start: 537
                    • end: 540
                    }
                  ]
                }
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 542
                • end: 548
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "button"
                        • start: 542
                        • end: 548
                        }
                      ]
                    • start: 542
                    • end: 548
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 549
            • end: 575
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 553
                • end: 571
                • property: "position"
                • value: "absolute"
                }
              ]
            }
          • start: 537
          • end: 575
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 579
            • end: 580
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 579
                • end: 580
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "p"
                        • start: 579
                        • end: 580
                        }
                      ]
                    • start: 579
                    • end: 580
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 581
            • end: 606
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 585
                • end: 602
                • property: "margin-top"
                • value: "300px"
                }
              ]
            }
          • start: 579
          • end: 606
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 610
            • end: 613
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 610
                • end: 613
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • TypeSelector {...}
                        • type: "TypeSelector"
                        • name: "img"
                        • start: 610
                        • end: 613
                        }
                      ]
                    • start: 610
                    • end: 613
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 614
            • end: 660
            • children: [...] (2)
              • Declaration {...}
                • type: "Declaration"
                • start: 618
                • end: 628
                • property: "opacity"
                • value: "0"
                }
              • Declaration {...}
                • type: "Declaration"
                • start: 632
                • end: 656
                • property: "transition"
                • value: "opacity 0.5s"
                }
              ]
            }
          • start: 610
          • end: 660
          }
        • Rule {...}
          • type: "Rule"
          • prelude: SelectorList {...}
            • type: "SelectorList"
            • start: 664
            • end: 672
            • children: [...] (1)
              • ComplexSelector {...}
                • type: "ComplexSelector"
                • start: 664
                • end: 672
                • children: [...] (1)
                  • RelativeSelector {...}
                    • type: "RelativeSelector"
                    • combinator: null
                    • selectors: [...] (1)
                      • ClassSelector {...}
                        • type: "ClassSelector"
                        • name: "visible"
                        • start: 664
                        • end: 672
                        }
                      ]
                    • start: 664
                    • end: 672
                    }
                  ]
                }
              ]
            }
          • block: Block {...}
            • type: "Block"
            • start: 673
            • end: 691
            • children: [...] (1)
              • Declaration {...}
                • type: "Declaration"
                • start: 677
                • end: 687
                • property: "opacity"
                • value: "1"
                }
              ]
            }
          • start: 664
          • end: 691
          }
        ]
      • content: {...}
        • start: 535
        • end: 692
        • styles: "\n\timg, button {\n\t\tposition: absolute;\n\t}\n\t\n\tp {\n\t\tmargin-top: 300px;\n\t}\n\t\n\timg {\n\t\topacity: 0;\n\t\ttransition: opacity 0.5s;\n\t}\n\t\n\t.visible {\n\t\topacity: 1;\n\t}\n"
        • comment: null
        }
      }
    • js: []
    • start: 528
    • end: 977
    • type: "Root"
    • fragment: Fragment {...}
      • type: "Fragment"
      • nodes: [...] (13)
        • Text {...}
          • type: "Text"
          • start: 526
          • end: 528
          • raw: "\n\n"
          • data: "\n\n"
          }
        • Text {...}
          • type: "Text"
          • start: 700
          • end: 702
          • raw: "\n\n"
          • data: "\n\n"
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 702
          • end: 784
          • name: "img"
          • attributes: [...] (3)
            • Attribute {...}
              • type: "Attribute"
              • start: 707
              • end: 741
              • name: "class"
              • value: ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 713
                • end: 741
                • expression: ConditionalExpression {...}
                  • type: "ConditionalExpression"
                  • start: 714
                  • end: 740
                  • loc: {...}
                    • start: {...}
                      • line: 44
                      • column: 12
                      }
                    • end: {...}
                      • line: 44
                      • column: 38
                      }
                    }
                  • test: Identifier {...}
                    • type: "Identifier"
                    • start: 714
                    • end: 723
                    • loc: {...}
                      • start: {...}
                        • line: 44
                        • column: 12
                        }
                      • end: {...}
                        • line: 44
                        • column: 21
                        }
                      }
                    • name: "showFirst"
                    }
                  • consequent: Literal {...}
                    • type: "Literal"
                    • start: 726
                    • end: 735
                    • loc: {...}
                      • start: {...}
                        • line: 44
                        • column: 24
                        }
                      • end: {...}
                        • line: 44
                        • column: 33
                        }
                      }
                    • value: "visible"
                    • raw: "'visible'"
                    }
                  • alternate: Literal {...}
                    • type: "Literal"
                    • start: 738
                    • end: 740
                    • loc: {...}
                      • start: {...}
                        • line: 44
                        • column: 36
                        }
                      • end: {...}
                        • line: 44
                        • column: 38
                        }
                      }
                    • value: ""
                    • raw: "''"
                    }
                  }
                }
              }
            • Attribute {...}
              • type: "Attribute"
              • start: 742
              • end: 774
              • name: "src"
              • value: ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 746
                • end: 774
                • expression: MemberExpression {...}
                  • type: "MemberExpression"
                  • start: 747
                  • end: 773
                  • loc: {...}
                    • start: {...}
                      • line: 44
                      • column: 45
                      }
                    • end: {...}
                      • line: 44
                      • column: 71
                      }
                    }
                  • object: Identifier {...}
                    • type: "Identifier"
                    • start: 747
                    • end: 761
                    • loc: {...}
                      • start: {...}
                        • line: 44
                        • column: 45
                        }
                      • end: {...}
                        • line: 44
                        • column: 59
                        }
                      }
                    • name: "carouselPhotos"
                    }
                  • property: Identifier {...}
                    • type: "Identifier"
                    • start: 762
                    • end: 772
                    • loc: {...}
                      • start: {...}
                        • line: 44
                        • column: 60
                        }
                      • end: {...}
                        • line: 44
                        • column: 70
                        }
                      }
                    • name: "firstIndex"
                    }
                  • computed: true
                  • optional: false
                  }
                }
              }
            • Attribute {...}
              • type: "Attribute"
              • start: 775
              • end: 781
              • name: "alt"
              • value: [...] (1)
                • Text {...}
                  • start: 780
                  • end: 780
                  • type: "Text"
                  • raw: ""
                  • data: ""
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: []
            }
          }
        • Text {...}
          • type: "Text"
          • start: 784
          • end: 785
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 785
          • end: 869
          • name: "img"
          • attributes: [...] (3)
            • Attribute {...}
              • type: "Attribute"
              • start: 790
              • end: 825
              • name: "class"
              • value: ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 796
                • end: 825
                • expression: ConditionalExpression {...}
                  • type: "ConditionalExpression"
                  • start: 797
                  • end: 824
                  • loc: {...}
                    • start: {...}
                      • line: 45
                      • column: 12
                      }
                    • end: {...}
                      • line: 45
                      • column: 39
                      }
                    }
                  • test: UnaryExpression {...}
                    • type: "UnaryExpression"
                    • start: 797
                    • end: 807
                    • loc: {...}
                      • start: {...}
                        • line: 45
                        • column: 12
                        }
                      • end: {...}
                        • line: 45
                        • column: 22
                        }
                      }
                    • operator: "!"
                    • prefix: true
                    • argument: Identifier {...}
                      • type: "Identifier"
                      • start: 798
                      • end: 807
                      • loc: {...}
                        • start: {...}
                          • line: 45
                          • column: 13
                          }
                        • end: {...}
                          • line: 45
                          • column: 22
                          }
                        }
                      • name: "showFirst"
                      }
                    }
                  • consequent: Literal {...}
                    • type: "Literal"
                    • start: 810
                    • end: 819
                    • loc: {...}
                      • start: {...}
                        • line: 45
                        • column: 25
                        }
                      • end: {...}
                        • line: 45
                        • column: 34
                        }
                      }
                    • value: "visible"
                    • raw: "'visible'"
                    }
                  • alternate: Literal {...}
                    • type: "Literal"
                    • start: 822
                    • end: 824
                    • loc: {...}
                      • start: {...}
                        • line: 45
                        • column: 37
                        }
                      • end: {...}
                        • line: 45
                        • column: 39
                        }
                      }
                    • value: ""
                    • raw: "''"
                    }
                  }
                }
              }
            • Attribute {...}
              • type: "Attribute"
              • start: 826
              • end: 859
              • name: "src"
              • value: ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 830
                • end: 859
                • expression: MemberExpression {...}
                  • type: "MemberExpression"
                  • start: 831
                  • end: 858
                  • loc: {...}
                    • start: {...}
                      • line: 45
                      • column: 46
                      }
                    • end: {...}
                      • line: 45
                      • column: 73
                      }
                    }
                  • object: Identifier {...}
                    • type: "Identifier"
                    • start: 831
                    • end: 845
                    • loc: {...}
                      • start: {...}
                        • line: 45
                        • column: 46
                        }
                      • end: {...}
                        • line: 45
                        • column: 60
                        }
                      }
                    • name: "carouselPhotos"
                    }
                  • property: Identifier {...}
                    • type: "Identifier"
                    • start: 846
                    • end: 857
                    • loc: {...}
                      • start: {...}
                        • line: 45
                        • column: 61
                        }
                      • end: {...}
                        • line: 45
                        • column: 72
                        }
                      }
                    • name: "secondIndex"
                    }
                  • computed: true
                  • optional: false
                  }
                }
              }
            • Attribute {...}
              • type: "Attribute"
              • start: 860
              • end: 866
              • name: "alt"
              • value: [...] (1)
                • Text {...}
                  • start: 865
                  • end: 865
                  • type: "Text"
                  • raw: ""
                  • data: ""
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: []
            }
          }
        • Text {...}
          • type: "Text"
          • start: 869
          • end: 870
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 870
          • end: 908
          • name: "button"
          • attributes: [...] (2)
            • OnDirective {...}
              • start: 878
              • end: 893
              • type: "OnDirective"
              • name: "click"
              • expression: Identifier {...}
                • type: "Identifier"
                • start: 888
                • end: 892
                • loc: {...}
                  • start: {...}
                    • line: 46
                    • column: 18
                    }
                  • end: {...}
                    • line: 46
                    • column: 22
                    }
                  }
                • name: "next"
                }
              • modifiers: []
              }
            • Attribute {...}
              • type: "Attribute"
              • start: -1
              • end: -1
              • name: "class"
              • value: [...] (1)
                • Text {...}
                  • type: "Text"
                  • data: ""
                  • raw: ""
                  • start: -1
                  • end: -1
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (1)
              • Text {...}
                • type: "Text"
                • start: 894
                • end: 899
                • raw: "Next!"
                • data: "Next!"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 908
          • end: 909
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 909
          • end: 931
          • name: "p"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: -1
              • end: -1
              • name: "class"
              • value: [...] (1)
                • Text {...}
                  • type: "Text"
                  • data: ""
                  • raw: ""
                  • start: -1
                  • end: -1
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (3)
              • Text {...}
                • type: "Text"
                • start: 912
                • end: 914
                • raw: "\n\t"
                • data: "\n\t"
                }
              • ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 914
                • end: 926
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 915
                  • end: 925
                  • loc: {...}
                    • start: {...}
                      • line: 48
                      • column: 2
                      }
                    • end: {...}
                      • line: 48
                      • column: 12
                      }
                    }
                  • name: "firstIndex"
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 926
                • end: 927
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 931
          • end: 932
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 932
          • end: 955
          • name: "p"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: -1
              • end: -1
              • name: "class"
              • value: [...] (1)
                • Text {...}
                  • type: "Text"
                  • data: ""
                  • raw: ""
                  • start: -1
                  • end: -1
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (3)
              • Text {...}
                • type: "Text"
                • start: 935
                • end: 937
                • raw: "\n\t"
                • data: "\n\t"
                }
              • ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 937
                • end: 950
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 938
                  • end: 949
                  • loc: {...}
                    • start: {...}
                      • line: 51
                      • column: 2
                      }
                    • end: {...}
                      • line: 51
                      • column: 13
                      }
                    }
                  • name: "secondIndex"
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 950
                • end: 951
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        • Text {...}
          • type: "Text"
          • start: 955
          • end: 956
          • raw: " "
          • data: " "
          }
        • RegularElement {...}
          • type: "RegularElement"
          • start: 956
          • end: 977
          • name: "p"
          • attributes: [...] (1)
            • Attribute {...}
              • type: "Attribute"
              • start: -1
              • end: -1
              • name: "class"
              • value: [...] (1)
                • Text {...}
                  • type: "Text"
                  • data: ""
                  • raw: ""
                  • start: -1
                  • end: -1
                  }
                ]
              }
            ]
          • fragment: Fragment {...}
            • type: "Fragment"
            • nodes: [...] (3)
              • Text {...}
                • type: "Text"
                • start: 959
                • end: 961
                • raw: "\n\t"
                • data: "\n\t"
                }
              • ExpressionTag {...}
                • type: "ExpressionTag"
                • start: 961
                • end: 972
                • expression: Identifier {...}
                  • type: "Identifier"
                  • start: 962
                  • end: 971
                  • loc: {...}
                    • start: {...}
                      • line: 54
                      • column: 2
                      }
                    • end: {...}
                      • line: 54
                      • column: 11
                      }
                    }
                  • name: "showFirst"
                  }
                }
              • Text {...}
                • type: "Text"
                • start: 972
                • end: 973
                • raw: "\n"
                • data: "\n"
                }
              ]
            }
          }
        ]
      }
    • options: null
    • instance: Script {...}
      • type: "Script"
      • start: 0
      • end: 526
      • context: "default"
      • content: Program {...}
        • type: "Program"
        • start: 8
        • end: 517
        • loc: {...}
          • start: {...}
            • line: 1
            • column: 0
            }
          • end: {...}
            • line: 23
            • column: 0
            }
          }
        • body: [...] (5)
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 10
            • end: 212
            • loc: {...}
              • start: {...}
                • line: 2
                • column: 1
                }
              • end: {...}
                • line: 7
                • column: 2
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 16
                • end: 212
                • loc: {...}
                  • start: {...}
                    • line: 2
                    • column: 7
                    }
                  • end: {...}
                    • line: 7
                    • column: 2
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 16
                  • end: 30
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 7
                      }
                    • end: {...}
                      • line: 2
                      • column: 21
                      }
                    }
                  • name: "carouselPhotos"
                  }
                • init: ArrayExpression {...}
                  • type: "ArrayExpression"
                  • start: 33
                  • end: 212
                  • loc: {...}
                    • start: {...}
                      • line: 2
                      • column: 24
                      }
                    • end: {...}
                      • line: 7
                      • column: 2
                      }
                    }
                  • elements: [...] (4)
                    • Literal {...}
                      • type: "Literal"
                      • start: 37
                      • end: 77
                      • loc: {...}
                        • start: {...}
                          • line: 3
                          • column: 2
                          }
                        • end: {...}
                          • line: 3
                          • column: 42
                          }
                        }
                      • value: "https://picsum.photos/300/200?random=1"
                      • raw: "'https://picsum.photos/300/200?random=1'"
                      }
                    • Literal {...}
                      • type: "Literal"
                      • start: 81
                      • end: 121
                      • loc: {...}
                        • start: {...}
                          • line: 4
                          • column: 2
                          }
                        • end: {...}
                          • line: 4
                          • column: 42
                          }
                        }
                      • value: "https://picsum.photos/300/200?random=2"
                      • raw: "'https://picsum.photos/300/200?random=2'"
                      }
                    • Literal {...}
                      • type: "Literal"
                      • start: 125
                      • end: 165
                      • loc: {...}
                        • start: {...}
                          • line: 5
                          • column: 2
                          }
                        • end: {...}
                          • line: 5
                          • column: 42
                          }
                        }
                      • value: "https://picsum.photos/300/200?random=3"
                      • raw: "'https://picsum.photos/300/200?random=3'"
                      }
                    • Literal {...}
                      • type: "Literal"
                      • start: 169
                      • end: 209
                      • loc: {...}
                        • start: {...}
                          • line: 6
                          • column: 2
                          }
                        • end: {...}
                          • line: 6
                          • column: 42
                          }
                        }
                      • value: "https://picsum.photos/300/200?random=4"
                      • raw: "'https://picsum.photos/300/200?random=4'"
                      }
                    ]
                  }
                }
              ]
            • kind: "const"
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 216
            • end: 234
            • loc: {...}
              • start: {...}
                • line: 9
                • column: 1
                }
              • end: {...}
                • line: 9
                • column: 19
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 220
                • end: 234
                • loc: {...}
                  • start: {...}
                    • line: 9
                    • column: 5
                    }
                  • end: {...}
                    • line: 9
                    • column: 19
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 220
                  • end: 230
                  • loc: {...}
                    • start: {...}
                      • line: 9
                      • column: 5
                      }
                    • end: {...}
                      • line: 9
                      • column: 15
                      }
                    }
                  • name: "firstIndex"
                  }
                • init: Literal {...}
                  • type: "Literal"
                  • start: 233
                  • end: 234
                  • loc: {...}
                    • start: {...}
                      • line: 9
                      • column: 18
                      }
                    • end: {...}
                      • line: 9
                      • column: 19
                      }
                    }
                  • value: 0
                  • raw: "0"
                  }
                }
              ]
            • kind: "let"
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 236
            • end: 255
            • loc: {...}
              • start: {...}
                • line: 10
                • column: 1
                }
              • end: {...}
                • line: 10
                • column: 20
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 240
                • end: 255
                • loc: {...}
                  • start: {...}
                    • line: 10
                    • column: 5
                    }
                  • end: {...}
                    • line: 10
                    • column: 20
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 240
                  • end: 251
                  • loc: {...}
                    • start: {...}
                      • line: 10
                      • column: 5
                      }
                    • end: {...}
                      • line: 10
                      • column: 16
                      }
                    }
                  • name: "secondIndex"
                  }
                • init: Literal {...}
                  • type: "Literal"
                  • start: 254
                  • end: 255
                  • loc: {...}
                    • start: {...}
                      • line: 10
                      • column: 19
                      }
                    • end: {...}
                      • line: 10
                      • column: 20
                      }
                    }
                  • value: 1
                  • raw: "1"
                  }
                }
              ]
            • kind: "let"
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 257
            • end: 277
            • loc: {...}
              • start: {...}
                • line: 11
                • column: 1
                }
              • end: {...}
                • line: 11
                • column: 21
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 261
                • end: 277
                • loc: {...}
                  • start: {...}
                    • line: 11
                    • column: 5
                    }
                  • end: {...}
                    • line: 11
                    • column: 21
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 261
                  • end: 270
                  • loc: {...}
                    • start: {...}
                      • line: 11
                      • column: 5
                      }
                    • end: {...}
                      • line: 11
                      • column: 14
                      }
                    }
                  • name: "showFirst"
                  }
                • init: Literal {...}
                  • type: "Literal"
                  • start: 273
                  • end: 277
                  • loc: {...}
                    • start: {...}
                      • line: 11
                      • column: 17
                      }
                    • end: {...}
                      • line: 11
                      • column: 21
                      }
                    }
                  • value: true
                  • raw: "true"
                  }
                }
              ]
            • kind: "let"
            }
          • VariableDeclaration {...}
            • type: "VariableDeclaration"
            • start: 281
            • end: 516
            • loc: {...}
              • start: {...}
                • line: 13
                • column: 1
                }
              • end: {...}
                • line: 22
                • column: 2
                }
              }
            • declarations: [...] (1)
              • VariableDeclarator {...}
                • type: "VariableDeclarator"
                • start: 287
                • end: 516
                • loc: {...}
                  • start: {...}
                    • line: 13
                    • column: 7
                    }
                  • end: {...}
                    • line: 22
                    • column: 2
                    }
                  }
                • id: Identifier {...}
                  • type: "Identifier"
                  • start: 287
                  • end: 291
                  • loc: {...}
                    • start: {...}
                      • line: 13
                      • column: 7
                      }
                    • end: {...}
                      • line: 13
                      • column: 11
                      }
                    }
                  • name: "next"
                  }
                • init: ArrowFunctionExpression {...}
                  • type: "ArrowFunctionExpression"
                  • start: 294
                  • end: 516
                  • loc: {...}
                    • start: {...}
                      • line: 13
                      • column: 14
                      }
                    • end: {...}
                      • line: 22
                      • column: 2
                      }
                    }
                  • id: null
                  • expression: false
                  • generator: false
                  • async: false
                  • params: []
                  • body: BlockStatement {...}
                    • type: "BlockStatement"
                    • start: 300
                    • end: 516
                    • loc: {...}
                      • start: {...}
                        • line: 13
                        • column: 20
                        }
                      • end: {...}
                        • line: 22
                        • column: 2
                        }
                      }
                    • body: [...] (2)
                      • ExpressionStatement {...}
                        • type: "ExpressionStatement"
                        • start: 304
                        • end: 326
                        • loc: {...}
                          • start: {...}
                            • line: 14
                            • column: 2
                            }
                          • end: {...}
                            • line: 14
                            • column: 24
                            }
                          }
                        • expression: AssignmentExpression {...}
                          • type: "AssignmentExpression"
                          • start: 304
                          • end: 326
                          • loc: {...}
                            • start: {...}
                              • line: 14
                              • column: 2
                              }
                            • end: {...}
                              • line: 14
                              • column: 24
                              }
                            }
                          • operator: "="
                          • left: Identifier {...}
                            • type: "Identifier"
                            • start: 304
                            • end: 313
                            • loc: {...}
                              • start: {...}
                                • line: 14
                                • column: 2
                                }
                              • end: {...}
                                • line: 14
                                • column: 11
                                }
                              }
                            • name: "showFirst"
                            }
                          • right: UnaryExpression {...}
                            • type: "UnaryExpression"
                            • start: 316
                            • end: 326
                            • loc: {...}
                              • start: {...}
                                • line: 14
                                • column: 14
                                }
                              • end: {...}
                                • line: 14
                                • column: 24
                                }
                              }
                            • operator: "!"
                            • prefix: true
                            • argument: Identifier {...}
                              • type: "Identifier"
                              • start: 317
                              • end: 326
                              • loc: {...}
                                • start: {...}
                                  • line: 14
                                  • column: 15
                                  }
                                • end: {...}
                                  • line: 14
                                  • column: 24
                                  }
                                }
                              • name: "showFirst"
                              }
                            }
                          }
                        }
                      • ExpressionStatement {...}
                        • type: "ExpressionStatement"
                        • start: 329
                        • end: 513
                        • loc: {...}
                          • start: {...}
                            • line: 15
                            • column: 2
                            }
                          • end: {...}
                            • line: 21
                            • column: 9
                            }
                          }
                        • expression: CallExpression {...}
                          • type: "CallExpression"
                          • start: 329
                          • end: 513
                          • loc: {...}
                            • start: {...}
                              • line: 15
                              • column: 2
                              }
                            • end: {...}
                              • line: 21
                              • column: 9
                              }
                            }
                          • callee: Identifier {...}
                            • type: "Identifier"
                            • start: 329
                            • end: 339
                            • loc: {...}
                              • start: {...}
                                • line: 15
                                • column: 2
                                }
                              • end: {...}
                                • line: 15
                                • column: 12
                                }
                              }
                            • name: "setTimeout"
                            }
                          • arguments: [...] (2)
                            • ArrowFunctionExpression {...}
                              • type: "ArrowFunctionExpression"
                              • start: 340
                              • end: 507
                              • loc: {...}
                                • start: {...}
                                  • line: 15
                                  • column: 13
                                  }
                                • end: {...}
                                  • line: 21
                                  • column: 3
                                  }
                                }
                              • id: null
                              • expression: false
                              • generator: false
                              • async: false
                              • params: []
                              • body: BlockStatement {...}
                                • type: "BlockStatement"
                                • start: 346
                                • end: 507
                                • loc: {...}
                                  • start: {...}
                                    • line: 15
                                    • column: 19
                                    }
                                  • end: {...}
                                    • line: 21
                                    • column: 3
                                    }
                                  }
                                • body: [...] (1)
                                  • IfStatement {...}
                                    • type: "IfStatement"
                                    • start: 351
                                    • end: 503
                                    • loc: {...}
                                      • start: {...}
                                        • line: 16
                                        • column: 3
                                        }
                                      • end: {...}
                                        • line: 20
                                        • column: 4
                                        }
                                      }
                                    • test: Identifier {...}
                                      • type: "Identifier"
                                      • start: 355
                                      • end: 364
                                      • loc: {...}
                                        • start: {...}
                                          • line: 16
                                          • column: 7
                                          }
                                        • end: {...}
                                          • line: 16
                                          • column: 16
                                          }
                                        }
                                      • name: "showFirst"
                                      }
                                    • consequent: BlockStatement {...}
                                      • type: "BlockStatement"
                                      • start: 366
                                      • end: 432
                                      • loc: {...}
                                        • start: {...}
                                          • line: 16
                                          • column: 18
                                          }
                                        • end: {...}
                                          • line: 18
                                          • column: 4
                                          }
                                        }
                                      • body: [...] (1)
                                        • ExpressionStatement {...}
                                          • type: "ExpressionStatement"
                                          • start: 372
                                          • end: 427
                                          • loc: {...}
                                            • start: {...}
                                              • line: 17
                                              • column: 4
                                              }
                                            • end: {...}
                                              • line: 17
                                              • column: 59
                                              }
                                            }
                                          • expression: AssignmentExpression {...}
                                            • type: "AssignmentExpression"
                                            • start: 372
                                            • end: 427
                                            • loc: {...}
                                              • start: {...}
                                                • line: 17
                                                • column: 4
                                                }
                                              • end: {...}
                                                • line: 17
                                                • column: 59
                                                }
                                              }
                                            • operator: "="
                                            • left: Identifier {...}
                                              • type: "Identifier"
                                              • start: 372
                                              • end: 383
                                              • loc: {...}
                                                • start: {...}
                                                  • line: 17
                                                  • column: 4
                                                  }
                                                • end: {...}
                                                  • line: 17
                                                  • column: 15
                                                  }
                                                }
                                              • name: "secondIndex"
                                              }
                                            • right: BinaryExpression {...}
                                              • type: "BinaryExpression"
                                              • start: 386
                                              • end: 427
                                              • loc: {...}
                                                • start: {...}
                                                  • line: 17
                                                  • column: 18
                                                  }
                                                • end: {...}
                                                  • line: 17
                                                  • column: 59
                                                  }
                                                }
                                              • left: BinaryExpression {...}
                                                • type: "BinaryExpression"
                                                • start: 387
                                                • end: 402
                                                • loc: {...}
                                                  • start: {...}
                                                    • line: 17
                                                    • column: 19
                                                    }
                                                  • end: {...}
                                                    • line: 17
                                                    • column: 34
                                                    }
                                                  }
                                                • left: Identifier {...}
                                                  • type: "Identifier"
                                                  • start: 387
                                                  • end: 398
                                                  • loc: {...}
                                                    • start: {...}
                                                      • line: 17
                                                      • column: 19
                                                      }
                                                    • end: {...}
                                                      • line: 17
                                                      • column: 30
                                                      }
                                                    }
                                                  • name: "secondIndex"
                                                  }
                                                • operator: "+"
                                                • right: Literal {...}
                                                  • type: "Literal"
                                                  • start: 401
                                                  • end: 402
                                                  • loc: {...}
                                                    • start: {...}
                                                      • line: 17
                                                      • column: 33
                                                      }
                                                    • end: {...}
                                                      • line: 17
                                                      • column: 34
                                                      }
                                                    }
                                                  • value: 1
                                                  • raw: "1"
                                                  }
                                                }
                                              • operator: "%"
                                              • right: MemberExpression {...}
                                                • type: "MemberExpression"
                                                • start: 406
                                                • end: 427
                                                • loc: {...}
                                                  • start: {...}
                                                    • line: 17
                                                    • column: 38
                                                    }
                                                  • end: {...}
                                                    • line: 17
                                                    • column: 59
                                                    }
                                                  }
                                                • object: Identifier {...}
                                                  • type: "Identifier"
                                                  • start: 406
                                                  • end: 420
                                                  • loc: {...}
                                                    • start: {...}
                                                      • line: 17
                                                      • column: 38
                                                      }
                                                    • end: {...}
                                                      • line: 17
                                                      • column: 52
                                                      }
                                                    }
                                                  • name: "carouselPhotos"
                                                  }
                                                • property: Identifier {...}
                                                  • type: "Identifier"
                                                  • start: 421
                                                  • end: 427
                                                  • loc: {...}
                                                    • start: {...}
                                                      • line: 17
                                                      • column: 53
                                                      }
                                                    • end: {...}
                                                      • line: 17
                                                      • column: 59
                                                      }
                                                    }
                                                  • name: "length"
                                                  }
                                                • computed: false
                                                • optional: false
                                                }
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    • alternate: BlockStatement {...}
                                      • type: "BlockStatement"
                                      • start: 438
                                      • end: 503
                                      • loc: {...}
                                        • start: {...}
                                          • line: 18
                                          • column: 10
                                          }
                                        • end: {...}
                                          • line: 20
                                          • column: 4
                                          }
                                        }
                                      • body: [...] (1)
                                        • ExpressionStatement {...}
                                          • type: "ExpressionStatement"
                                          • start: 444
                                          • end: 497
                                          • loc: {...}
                                            • start: {...}
                                              • line: 19
                                              • column: 4
                                              }
                                            • end: {...}
                                              • line: 19
                                              • column: 57
                                              }
                                            }
                                          • expression: AssignmentExpression {...}
                                            • type: "AssignmentExpression"
                                            • start: 444
                                            • end: 497
                                            • loc: {...}
                                              • start: {...}
                                                • line: 19
                                                • column: 4
                                                }
                                              • end: {...}
                                                • line: 19
                                                • column: 57
                                                }
                                              }
                                            • operator: "="
                                            • left: Identifier {...}
                                              • type: "Identifier"
                                              • start: 444
                                              • end: 454
                                              • loc: {...}
                                                • start: {...}
                                                  • line: 19
                                                  • column: 4
                                                  }
                                                • end: {...}
                                                  • line: 19
                                                  • column: 14
                                                  }
                                                }
                                              • name: "firstIndex"
                                              }
                                            • right: BinaryExpression {...}
                                              • type: "BinaryExpression"
                                              • start: 457
                                              • end: 497
                                              • loc: {...}
                                                • start: {...}
                                                  • line: 19
                                                  • column: 17
                                                  }
                                                • end: {...}
                                                  • line: 19
                                                  • column: 57
                                                  }
                                                }
                                              • left: BinaryExpression {...}
                                                • type: "BinaryExpression"
                                                • start: 458
                                                • end: 472
                                                • loc: {...}
                                                  • start: {...}
                                                    • line: 19
                                                    • column: 18
                                                    }
                                                  • end: {...}
                                                    • line: 19
                                                    • column: 32
                                                    }
                                                  }
                                                • left: Identifier {...}
                                                  • type: "Identifier"
                                                  • start: 458
                                                  • end: 468
                                                  • loc: {...}
                                                    • start: {...}
                                                      • line: 19
                                                      • column: 18
                                                      }
                                                    • end: {...}
                                                      • line: 19
                                                      • column: 28
                                                      }
                                                    }
                                                  • name: "firstIndex"
                                                  }
                                                • operator: "+"
                                                • right: Literal {...}
                                                  • type: "Literal"
                                                  • start: 471
                                                  • end: 472
                                                  • loc: {...}
                                                    • start: {...}
                                                      • line: 19
                                                      • column: 31
                                                      }
                                                    • end: {...}
                                                      • line: 19
                                                      • column: 32
                                                      }
                                                    }
                                                  • value: 1
                                                  • raw: "1"
                                                  }
                                                }
                                              • operator: "%"
                                              • right: MemberExpression {...}
                                                • type: "MemberExpression"
                                                • start: 476
                                                • end: 497
                                                • loc: {...}
                                                  • start: {...}
                                                    • line: 19
                                                    • column: 36
                                                    }
                                                  • end: {...}
                                                    • line: 19
                                                    • column: 57
                                                    }
                                                  }
                                                • object: Identifier {...}
                                                  • type: "Identifier"
                                                  • start: 476
                                                  • end: 490
                                                  • loc: {...}
                                                    • start: {...}
                                                      • line: 19
                                                      • column: 36
                                                      }
                                                    • end: {...}
                                                      • line: 19
                                                      • column: 50
                                                      }
                                                    }
                                                  • name: "carouselPhotos"
                                                  }
                                                • property: Identifier {...}
                                                  • type: "Identifier"
                                                  • start: 491
                                                  • end: 497
                                                  • loc: {...}
                                                    • start: {...}
                                                      • line: 19
                                                      • column: 51
                                                      }
                                                    • end: {...}
                                                      • line: 19
                                                      • column: 57
                                                      }
                                                    }
                                                  • name: "length"
                                                  }
                                                • computed: false
                                                • optional: false
                                                }
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    }
                                  ]
                                }
                              }
                            • Literal {...}
                              • type: "Literal"
                              • start: 509
                              • end: 512
                              • loc: {...}
                                • start: {...}
                                  • line: 21
                                  • column: 5
                                  }
                                • end: {...}
                                  • line: 21
                                  • column: 8
                                  }
                                }
                              • value: 500
                              • raw: "500"
                              }
                            ]
                          • optional: false
                          }
                        }
                      ]
                    }
                  }
                }
              ]
            • kind: "const"
            }
          ]
        • sourceType: "module"
        }
      • attributes: []
      }
    }
The AST is not public API and may change at any point in time
Image flip-flop • Playground • Svelte