Using bootstrap 3 to develop responsive site practice 02, Carousel

Source: Internet
Author: User

This experience pictures carousel. The HTML section is:

        class= "Carousel slide" id= "mycarousel"  >
            <!--indicators-->
            class= "carousel-indicators" >
                class= "active" data-slide-to= "0" data-target= "#myCarousel" ></li>
                <li data-slide-to= "1" data-target= "#myCarousel" ></li>
                <li data-slide-to= "2" data-target= "#myCarousel" ></li>
            </ol>
             for Slides-->
            class= "carousel-inner" >
                class= "Item active" id= "slide1" >
                    images/25.jpg"/>
                    class= "carousel-caption" >
                        
                        <P>2014/15 season, the 2nd round of the English Premier League, a focus battle in the light of the stadium to compete </p>
                    </div>
                </div>
                
                class= "item" id= "slide2" >
                    images/26.jpg"/>
                    class= "carousel-caption" >
                        
                        <p> away by Sunderland 1-1, Manchester United despite a point, but apparently the Reds from top to bottom no one will be satisfied with the dismal results of the 2 War 1 points. </p>
                    </div>
                </div>
                
                class= "item" id= "slide3" >
                    images/27.jpg"/>
                    class= "carousel-caption" >
                        
                        <p> Manchester United's introduction of Di Maria's deal has only been announced by the official, which is undoubtedly for the Red Devils officially announced the deal. </p>
                    </div>
                </div>
            </div>
            <!--controller-->
 <a class  =" left Carousel-control  "data-slide=" prev  "href="  #myCarousel  "><span class  =" icon-prev  "></SPAN></A> 
            class= "rightcarousel-control" data-slide= "next" href= "#myCarouselclass = "icon-next" ></span></a>
        </div><!--Photo Show area End--

0 Carousel All content is wrapped in a div with class= "Carousel Slide"
0 Carousel 3 parts: Dot indication, with OL implementation; picture, title, description with Div implementation; left and right 2 arrows are implemented with a


Resources:
Code a responsive Website with Bootstrap 3--by Brad Hussey
http://getbootstrap.com/
http://bootswatch.com/
http://www.tutorialspoint.com/
http://www.placehold.it/

The "Develop responsive site practices with Bootstrap 3" series includes:

Using bootstrap 3 to develop responsive site practices 01, pre-preparation, navigation areas, etc. using bootstrap 3 developing responsive site practice 02, Carousel

Using bootstrap 3 to develop responsive site practice 02, Carousel

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.