The sixteenth lesson completes the rendering of the homepage carousel and the basic structure of navigation


1. Complete the rendering of the homepage carousel

 

picture

 

picture

 

picture

 

picture

 

picture


( 1 ) swiper/indicator-dots , whether to display panel indicator dots:

 

picture

 

picture

(2) swiper/circular , whether to use the connection sliding, that is, to return to the beginning after playing to the end, (that is, to realize circular rotation):

 

picture

 

picture

 

picture

 

picture

 

picture

 

picture

 

picture

The effect of adding the mode="widthFix" attribute to the image :

 

picture

The effect of not adding the mode="widthFix" attribute to the image :

 

picture

1.1 The data obtained by using the interface , the first picture cannot be obtained:

 

picture

 

picture

1.2 Using the data obtained from static data , all four pictures are obtained:

 

picture

 

picture

2. Implement the basic structure of navigation

 

picture

 

picture

 

picture

 

picture

 

3. Perfect style:

 

picture

 

picture

 

picture

 

picture

 

picture

 

picture

 

picture

 

picture

 

 

picture