Embracing Bootstrap - Large-screen slideshow carousel_html/css

Pinned article: "Build a Silver MacBook Air with Pure CSS (Full Version)" Previous article: "Embrace Bootstrap? Navigation Bar"

Author: myvin

Written in front

In this blog post, I still talk about the use of Bootstrap based on the landscape webpage I made. The screenshot of the webpage is as follows:

You can click here to view the effect and code of the complete webpage or go to View it on CodePen. Let’s repeat here some of the main effects that this webpage wants to achieve. Handsome guys and beauties who have read the previous blog post can skip this section directly:

Navigation bar login After clicking the registration button, the login and registration modal boxes will pop up, and the login and registration windows can be switched. The menu bar is responsive
The landscape option in the navigation bar can be pulled down, click on the drop-down Jiuzhaigou `` Lijiang `` Shuiliandong will locate the corresponding tab
Slideshow large screen carousel
Click to switch the tab page

In the last blog post, we briefly talked about the navigation bar. If you want to know more or review it, you can click here to view the previous blog post. Today we will talk about the large-screen carousel of slides. If you want to see the large-screen carousel effect first, you can click here to view it.

Large-screen carousel of slides

First, the nearly complete code of the large-screen carousel is given:

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">          <!-- Indicators -->          <ol class="carousel-indicators">            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>            <li data-target="#carousel-example-generic" data-slide-to="1"></li>            <li data-target="#carousel-example-generic" data-slide-to="2"></li>          </ol>        <div class="carousel-inner" role="listbox">            <div class="item active">              <img src="C:/Users/Lenovo/Desktop/Test/bootstrap/images/pic1.jpg" alt="九寨沟">              <div class="carousel-caption">                <h1>九寨沟</h1>                <p>九寨沟国家级自然保护区位于四川省阿坝藏族羌族自治州九寨沟县境内，是中国第一个以保护自然风景为主要目的的自然保护区，同时，也是中国著名风景名胜区和全国文明风景旅游区示范点。</p>              </div>            </div>            <div class="item">              <img src="C:/Users/Lenovo/Desktop/Test/bootstrap/images/pic1.jpg" alt="丽江">              <div class="carousel-caption">                <h1>丽江</h1>                <p>丽江古城，又名“大研古镇”，海拔2,400米（旅游要防内源氧缺乏症），是丽江纳西族自治县的中心城市，是中国历史文化名城之一，世界文化遗产，国家5A级旅游景区，全国文明风景旅游区示范点。</p>              </div>            </div>            <div class="item">              <img src="C:/Users/Lenovo/Desktop/Test/bootstrap/images/pic1.jpg" alt="水帘洞">              <div class="carousel-caption">                <h1>水帘洞</h1>                <p>桐柏山水帘洞位于河南省南阳市桐柏县城西5公里处，是国家级风景名胜区桐柏山淮源风景名胜区著名景点之一。</p>              </div>            </div>          </div>          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>            <span class="sr-only">Previous</span>          </a>          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>            <span class="sr-only">Next</span>          </a>        </div>

Copy after login

Among them, this code is below the carousel image Three small dots for quick switching:

          <ol class="carousel-indicators">            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>            <li data-target="#carousel-example-generic" data-slide-to="1"></li>            <li data-target="#carousel-example-generic" data-slide-to="2"></li>          </ol>

Copy after login

This code is the two arrows before and after the carousel switch:

          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>            <span class="sr-only">Previous</span>          </a>          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>            <span class="sr-only">Next</span>          </a>

Copy after login

The large screen carousel has a landscape under it The three paragraph introduction of the circle diagram:

        <div class="container col-md-10 col-md-offset-1" id="container-produce">          <div class="row" id="threecols">            <div class="col-md-4">              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_jiuzhaigou.jpg" alt="scenery1" class="img-circle">              <h1>九寨沟</h1>              <p>九寨沟国家级自然保护区位于四川省阿坝藏族羌族自治州九寨沟县境内，是中国第一个以保护自然风景为主要目的的自然保护区。</p>              <a type="button" class="btn btn-default">更多..</a>            </div>            <div class="col-md-4">              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_lijiang.jpg" alt="scenery2" class="img-circle">              <h1>丽江</h1>              <p>丽江古城，又名“大研古镇”，海拔2,400米（旅游要防内源氧缺乏症），是丽江纳西族自治县的中心城市，是中国历史文化名城之一，世界文化遗产。</p>              <a type="button" class="btn btn-default">更多..</a>            </div>            <div class="col-md-4">              <img src="http://images.cnblogs.com/cnblogs_com/myvin/710118/o_shuiliandong.jpg" alt="scenery3" class="img-circle">              <h1>水帘洞</h1>              <p>桐柏山水帘洞位于河南省南阳市桐柏县城西5公里处，风景宜人，是国家级风景名胜区桐柏山淮源风景名胜区著名景点之一。</p>              <a type="button" class="btn btn-default">更多..</a>            </div>          </div>

Copy after login

Among them, the col-md-10 category makes the three paragraphs of introduction below occupy a total of 10 columns, and the col-md-4 category makes each introduction occupy 4 columns.

After running the above code, what we face is actually not the effect we want. The carousel image is next to the three paragraphs of introduction. The image is large and somewhat deformed, and there are still unfilled edges. , so the above is quasi code, so we still need to fill in some codes to improve it.

First we add code to the carousel class to limit the size of the entire carousel area. For the sake of visual beauty, we space it 70px from the three paragraphs of introduction below:

      .carousel{        height:500px;        margin-bottom: 70px;      }

Copy after login

Also give Add styles to the item class under the carousel class:

      .carousel .item{        height:500px;      }

Copy after login

Finally, in order to fill the blank space on the side, the carousel pictures fill 100% of the browser width:

      .carousel .item img{        width:100%;      }

Copy after login

Self-intentional After adding these three pieces of code and running it, there seems to be no bug, but if you shrink the browser and then shrink it again, a "gratifying" situation finally appears:

Let's look at the following That strip of excessive black and white. Because we have limited the height of the carousel image container to 500px, when the page shrinks and adapts, due to the 500px height limit of the container, although the image is shrinking, the container remains unchanged. Now that we understand the reason, of course the modification method is also very simple. We can replace the height attribute with the max-height attribute:

      .carousel .item{        max-height:500px;      }

Copy after login

In this way, the image container can also adapt accordingly.

As for the three paragraphs of brief introduction, you can simply read it.

It’s over now

Let’s talk about tab switching next time.

I wish you all the best.

Please remember to indicate the author and source when reprinting -.-
Author: myvin
Original source:

Previous article: "Embrace Bootstrap?? Navigation Column article" Pinned article: "Build a silver MacBook Air with pure CSS (full version)"

Embracing Bootstrap - Large-screen slideshow carousel_html/css_WEB-ITnose