찾다
웹 프론트엔드부트스트랩 튜토리얼부트스트랩 이미지 캐러셀은 어떤 세 부분으로 구성되어 있나요?

부트스트랩 이미지 캐러셀은 어떤 세 부분으로 구성되어 있나요?

캐러셀 이미지는 주로 다음 세 부분으로 구성됩니다.

xml 캐러셀 이미지

xml 캐러셀 이미지 카운터

xml 캐러셀 이미지 컨트롤러

1단계: 캐러셀 이미지 컨테이너 디자인 . Bootstrap 프레임워크에서 캐러셀 스타일을 사용하고 이 컨테이너에 대한 ID 값을 정의하면 나중에 데이터 속성을 사용하여 트리거를 선언할 수 있습니다.

코드는 다음과 같습니다.

<div id="slidershow" class="carousel"></div>

2단계: 캐러셀 이미지 카운터를 디자인합니다. carousel-indicators 스타일을 사용하여 컨테이너 div.carousel 내에 회전식 그림 계산기를 추가합니다. 주요 기능은 현재 그림의 재생 순서를 표시하는 것입니다(그림이 여러 개인 경우 여러 개의 li을 배치). 순차 목록:

<div id="slidershow" class="carousel">
<!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li></ol>
</div>

3단계: 캐러셀 이미지 재생 영역을 디자인합니다. 캐러셀 이미지의 전체 효과에서 재생 영역은 가장 중요한 영역입니다. 이 영역은 주로 회전해야 하는 이미지를 배치하는 데 사용됩니다. 이 영역은 캐러셀 내부 스타일을 사용하여 제어되며 캐러셀 컨테이너에도 배치되며 각 캐러셀 이미지는 항목 컨테이너를 통해 배치됩니다.

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy"   alt=""></a>
 </div>
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg"  class="lazy"   alt=""></a>
 </div>
 …
 <div class="item">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/dj/201408/zqgq_580145.jpg"  class="lazy"   alt=""></a>
 </div>
 </div>
</div> 

관련 권장 사항: "BootStrap 시작 튜토리얼"

4단계 : 회전판 이미지 설명을 설정합니다. 많은 회전판 이미지 효과에는 각 이미지에 해당하는 자체 제목과 설명이 있습니다. 실제로 Bootstrap 프레임워크의 Carousel도 비슷한 효과를 제공합니다. 항목의 이미지 하단에 해당 코드를 추가하기만 하면 됩니다.

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 <li class="active">1</li>
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 <div class="item active">
 <a href="##"><img src="/static/imghwm/default1.png"  data-src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg"  class="lazy"   alt=""></a>
 <!-- 图片对应标题和描述内容 -->
 <div class="carousel-caption">
 <h3 id="图片标题">图片标题</h3>
 <p>描述内容...</p>
 </div>
 </div>
 …
 </div>
</div>

5단계: 캐러셀 이미지 컨트롤러를 디자인합니다. 캐러셀에는 정방향 및 역방향 컨트롤러도 있는 경우가 많습니다. 이는 왼쪽과 오른쪽이 결합된 캐러셀 제어 스타일을 통해 캐러셀에서 달성됩니다. 그 중 왼쪽은 앞으로 재생을 의미하고 오른쪽은 뒤로 재생을 의미합니다. 캐러셀 컨테이너에도 배치됩니다:

<div id="slidershow" class="carousel">
 <!-- 设置图片轮播的顺序 -->
 <ol class="carousel-indicators">
 …
 </ol>
 <!-- 设置轮播图片 -->
 <div class="carousel-inner">
 …
 </div>
 <!-- 设置轮播图片控制器 -->
 <a class="left carousel-control" href="" >
 <span class="glyphicon glyphicon-chevron-left"></span>
 </a>
 <a class="right carousel-control" href="">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </a> 
</div>

위 내용은 부트스트랩 이미지 캐러셀은 어떤 세 부분으로 구성되어 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
10款好看又实用的Bootstrap后台管理系统模板(快来下载)10款好看又实用的Bootstrap后台管理系统模板(快来下载)Aug 06, 2021 pm 01:55 PM

一个好的网站,不能只看外表,网站后台同样很重要。本篇文章给大家分享10款好看又实用的Bootstrap后台管理系统模板,可以帮助大家快速建立强大有美观的网站后台,欢迎下载使用!如果想要获取更多后端模板,请关注php中文网后端模板栏目!

bootstrap与jquery是什么关系bootstrap与jquery是什么关系Aug 01, 2022 pm 06:02 PM

bootstrap与jquery的关系是:bootstrap是基于jquery结合了其他技术的前端框架。bootstrap用于快速开发Web应用程序和网站,jquery是一个兼容多浏览器的javascript库,bootstrap是基于HTML、CSS、JAVASCRIPT的。

7款实用响应式Bootstrap电商源码模板(快来下载)7款实用响应式Bootstrap电商源码模板(快来下载)Aug 31, 2021 pm 02:13 PM

好看又实用的Bootstrap电商源码模板可以提高建站效率,下面本文给大家分享7款实用响应式Bootstrap电商源码,均可免费下载,欢迎大家使用!更多电商源码模板,请关注php中文网电商源码​栏目!

8款Bootstrap企业公司网站模板(源码免费下载)8款Bootstrap企业公司网站模板(源码免费下载)Aug 24, 2021 pm 04:35 PM

好看又实用的企业公司网站模板可以提高您的建站效率,下面PHP中文网为大家分享8款Bootstrap企业公司网站模板,均可免费下载,欢迎大家使用!更多企业站源码模板,请关注php中文网企业站源码栏目!

bootstrap中sm是什么意思bootstrap中sm是什么意思May 06, 2022 pm 06:35 PM

在bootstrap中,sm是“小”的意思,是small的缩写;sm常用于表示栅格类“.col-sm-*”,是小屏幕设备类的意思,表示显示大小大于等于768px并且小于992px的屏幕设备,类似平板设备。

bootstrap modal 如何关闭bootstrap modal 如何关闭Dec 07, 2020 am 09:41 AM

bootstrap modal关闭的方法:1、连接好bootstrap的插件;2、给按钮绑定模态框事件;3、通过“ $('#myModal').modal('hide');”方法手动关闭模态框即可。

bootstrap默认字体大小是多少bootstrap默认字体大小是多少Aug 22, 2022 pm 04:34 PM

bootstrap默认字体大小是“14px”;Bootstrap是一个基于HTML、CSS、JavaScript的开源框架,用于快速构建基于PC端和移动端设备的响应式web页面,并且默认的行高为“20px”,p元素行高为“10px”。

bootstrap是免费的吗bootstrap是免费的吗Jun 21, 2022 pm 05:31 PM

bootstrap是免费的;bootstrap是美国Twitter公司的设计师“Mark Otto”和“Jacob Thornton”合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,开发完成后在2011年8月就在GitHub上发布了,并且开源免费。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전