Add animation player (#1877)

* Add auto slide controller.

* Fix the animation blocks.

* renamed as animation_player

* Bug fixes

* Refine animation player controls

en/docs/chapter_stack_and_queue/deque.md

@@ -399,19 +399,19 @@ For a deque, both the front and rear can perform enqueue and dequeue operations.
 
 As shown in the figure below, we treat the head and tail nodes of the doubly linked list as the front and rear of the deque, implementing functionality to add and remove nodes at both ends.
 
-=== "LinkedListDeque"
+=== "<1>"
     ![Enqueue and dequeue operations in linked list implementation of deque](deque.assets/linkedlist_deque_step1.png)
 
-=== "push_last()"
+=== "<2>"
     ![linkedlist_deque_push_last](deque.assets/linkedlist_deque_step2_push_last.png)
 
-=== "push_first()"
+=== "<3>"
     ![linkedlist_deque_push_first](deque.assets/linkedlist_deque_step3_push_first.png)
 
-=== "pop_last()"
+=== "<4>"
     ![linkedlist_deque_pop_last](deque.assets/linkedlist_deque_step4_pop_last.png)
 
-=== "pop_first()"
+=== "<5>"
     ![linkedlist_deque_pop_first](deque.assets/linkedlist_deque_step5_pop_first.png)
 
 The implementation code is shown below:
@@ -424,19 +424,19 @@ The implementation code is shown below:
 
 As shown in the figure below, similar to implementing a queue based on an array, we can also use a circular array to implement a deque.
 
-=== "ArrayDeque"
+=== "<1>"
     ![Enqueue and dequeue operations in array implementation of deque](deque.assets/array_deque_step1.png)
 
-=== "push_last()"
+=== "<2>"
     ![array_deque_push_last](deque.assets/array_deque_step2_push_last.png)
 
-=== "push_first()"
+=== "<3>"
     ![array_deque_push_first](deque.assets/array_deque_step3_push_first.png)
 
-=== "pop_last()"
+=== "<4>"
     ![array_deque_pop_last](deque.assets/array_deque_step4_pop_last.png)
 
-=== "pop_first()"
+=== "<5>"
     ![array_deque_pop_first](deque.assets/array_deque_step5_pop_first.png)
 
 Based on the queue implementation, we only need to add methods for "enqueue at front" and "dequeue from rear":

en/docs/chapter_stack_and_queue/queue.md

@@ -368,13 +368,13 @@ To implement a queue, we need a data structure that allows adding elements at on
 
 As shown in the figure below, we can treat the "head node" and "tail node" of a linked list as the "front" and "rear" of the queue, respectively, with the rule that nodes can only be added at the rear and removed from the front.
 
-=== "LinkedListQueue"
+=== "<1>"
     ![Enqueue and dequeue operations in linked list implementation of queue](queue.assets/linkedlist_queue_step1.png)
 
-=== "push()"
+=== "<2>"
     ![linkedlist_queue_push](queue.assets/linkedlist_queue_step2_push.png)
 
-=== "pop()"
+=== "<3>"
     ![linkedlist_queue_pop](queue.assets/linkedlist_queue_step3_pop.png)
 
 Below is the code for implementing a queue using a linked list:
@@ -396,13 +396,13 @@ Based on this design, **the valid interval containing elements in the array is `
 
 As you can see, both enqueue and dequeue operations require only one operation, with a time complexity of $O(1)$.
 
-=== "ArrayQueue"
+=== "<1>"
     ![Enqueue and dequeue operations in array implementation of queue](queue.assets/array_queue_step1.png)
 
-=== "push()"
+=== "<2>"
     ![array_queue_push](queue.assets/array_queue_step2_push.png)
 
-=== "pop()"
+=== "<3>"
     ![array_queue_pop](queue.assets/array_queue_step3_pop.png)
 
 You may notice a problem: as we continuously enqueue and dequeue, both `front` and `rear` move to the right. **When they reach the end of the array, they cannot continue moving**. To solve this problem, we can treat the array as a "circular array" with head and tail connected.

en/docs/chapter_stack_and_queue/stack.md

@@ -365,13 +365,13 @@ When implementing a stack using a linked list, we can treat the head node of the
 
 As shown in the figure below, for the push operation, we simply insert an element at the head of the linked list. This node insertion method is called the "head insertion method." For the pop operation, we just need to remove the head node from the linked list.
 
-=== "LinkedListStack"
+=== "<1>"
     ![Push and pop operations in linked list implementation of stack](stack.assets/linkedlist_stack_step1.png)
 
-=== "push()"
+=== "<2>"
     ![linkedlist_stack_push](stack.assets/linkedlist_stack_step2_push.png)
 
-=== "pop()"
+=== "<3>"
     ![linkedlist_stack_pop](stack.assets/linkedlist_stack_step3_pop.png)
 
 Below is sample code for implementing a stack based on a linked list:
@@ -384,13 +384,13 @@ Below is sample code for implementing a stack based on a linked list:
 
 When implementing a stack using an array, we can treat the end of the array as the top of the stack. As shown in the figure below, push and pop operations correspond to adding and removing elements at the end of the array, both with a time complexity of $O(1)$.
 
-=== "ArrayStack"
+=== "<1>"
     ![Push and pop operations in array implementation of stack](stack.assets/array_stack_step1.png)
 
-=== "push()"
+=== "<2>"
     ![array_stack_push](stack.assets/array_stack_step2_push.png)
 
-=== "pop()"
+=== "<3>"
     ![array_stack_pop](stack.assets/array_stack_step3_pop.png)
 
 Since elements pushed onto the stack may increase continuously, we can use a dynamic array, which eliminates the need to handle array expansion ourselves. Here is the sample code: