The 20th chapter of the project--responsive carousel diagram [2]

Learning Essentials:

1. Responsive Carousel Diagram

Keynote Teacher: Li Tinghui

In this lesson we need to make a carousel below the navigation bar to automatically play the latest important developments.

A Responsive Carousel Diagram
Responsive Carousel Diagram

<DivID= "Mycarousel"class= "Carousel Slide">    <olclass= "Carousel-indicators">        <LiData-target= "#myCarousel"data-slide-to= "0"class= "Active"></Li>        <LiData-target= "#myCarousel"data-slide-to= "1"></Li>        <LiData-target= "#myCarousel"data-slide-to= "2"></Li>    </ol>    <Divclass= "Carousel-inner">        <Divclass= "Item Active"style= "background: #223240;">            <ahref="#"><imgsrc= "Img/slide1.png"alt= "First piece"></a>        </Div>        <Divclass= "Item"style= "background: #F5E4DC;">            <ahref="#"><imgsrc= "Img/slide2.png"alt= "Second Piece"></a>        </Div>        <Divclass= "Item"style= "background: #DE2A2D;">            <ahref="#"><imgsrc= "Img/slide3.png"alt= "Third piece"></a>        </Div>    </Div>    <ahref= "#myCarousel"Data-slide= "Prev"class= "Carousel-controlleft">&lsaquo;</a>    <ahref= "#myCarousel"Data-slide= "Next"class= "Carousel-controlright">&rsaquo;</a></Div>

The required JQuery control

$ (' #myCarousel '). Carousel ({    // Set auto Play/2 sec    interval:3000

Adjust the position of the carousel arrows

$ ('. Carousel-control '). CSS (' Line-height ', $ ('. Carousel-innerimg '). Height () + ' px '); $ (window). Resize (  function() {    var $height = $ ('. Carousel-inner img '). EQ (0). Height () | | $ ('. Carousel-inner img '). EQ (1). Height () | | $ ('. Carousel-inner img '). EQ (2). Height ();    $ ('. Carousel-control '). CSS (' line-height ', $height + ' px '

The CSS you need

{    outline: none;}  {    padding: 0;}  {    margin: 50px 0 0 0;}  {    margin: 0 auto;}  {    font-size: 100px;}

The 20th chapter of the project--responsive carousel diagram [2]