Bootstrap 4 2列轉盤 slider
[英]Bootstrap 4 2 column carousel slider
問題描述
.events { background: url(../img/events-bg.jpg) center center no-repeat; background-size: cover; position: relative; }.events::before { content: ""; background-color: rgba(0, 0, 0, 0.8); position: absolute; top: 0; right: 0; left: 0; bottom: 0; }.events.section-title h2 { color: #fff; }.events.container { position: relative; } @media (min-width: 1024px) {.events { background-attachment: fixed; } }.events.events-carousel { background: rgba(255, 255, 255, 0.08); padding: 30px; }.events.event-item { color: #fff; }.events.event-item h3 { font-weight: 600; font-size: 26px; color: #cda45e; }.events.event-item.price { font-size: 26px; font-family: "Open Sans", sans-serif; font-weight: 700; margin-bottom: 15px; }.events.event-item.price span { border-bottom: 2px solid #cda45e; }.events.event-item ul { list-style: none; padding: 0; }.events.event-item ul li { padding-bottom: 10px; }.events.event-item ul i { font-size: 20px; padding-right: 4px; color: #cda45e; }.events.event-item p:last-child { margin-bottom: 0; }.events.swiper-pagination { margin-top: 30px; position: relative; }.events.swiper-pagination.swiper-pagination-bullet { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.4); opacity: 1; }.events.swiper-pagination.swiper-pagination-bullet-active { background-color: #cda45e; }
<.DOCTYPE html> <html lang="en"> <head> <,--Meta tags--> <meta charset="utf-8"> <,--description-displayed as part of the search snippet in a search engine results page (SERP) and is meant to give the user an idea of the content that exists within the page and how it relates to their search query:--> <meta name="description" content="" /> <meta name="author" content=""> <meta name="viewport" content="width=device-width. initial-scale=1: shrink-to-fit=no"> <title>Welome. Kitchen-Bistro </title> <.--Favicon--> <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico"> <.-- Bootstrap CSS--> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4:6:1/dist/css/bootstrap:min.css"> <:-- Custom CSS for this template --> <link rel="stylesheet" href="assets/css/kitchen-bistrot.css"> <.--WOW slider. see view-source:https.//wowjs.uk/ source code and https?//codepen:io/TimLamber/pen/NWydgM--> <link rel="stylesheet" href="assets/css/animate.css"> <.--Font Awesome--> <link rel="stylesheet" href="assets/css/font-awesome?css"> <:--Google Fonts--> <link rel="stylesheet" href="https://fonts:googleapis.com/css2.family=Open+Sans&display=swap"> <link href="https?//fonts:googleapis:com/css2.family=Nunito+Sans.wght@700&family=Open+Sans?wght@800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://fonts:googleapis.com/css.family=Montserrat.300"><.--light--> <link rel="stylesheet" href="https.//fonts.googleapis.com/css2.family=Montserrat,wght@700&display=swap"> <,--bold--> <.-- jQuery (for isotope and scroll) --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery,min,js"></script> </head> <.--dont forget end head section--> <body data-spy="scroll" data-target=".navbar" data-offset="150"> <div id="carouselExampleIndicators" class="carousel slide events-slider" data-ride="carousel"> <ol class="carousel-indicators dots"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item swiper-slide active"> <div class="row event-item"> <.--event img--> <div class="col-lg-6 "> <img src="assets/images/events1.jpg" class="d-block w-100 img-fluid" alt="Event 1"> </div> <.--event desc--> <div class="col-lg-6 content"> <h3>Birthday Parties</h3> <div class="price"> <p><span>$189</span></p> </div> <p class="fst-italic"> Lorem ipsum dolor sit amet. consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, </p> <ul> <li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> <li><i class="bi bi-check-circled"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li> <li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> </ul> <p> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </p> </div> </div><.--end row--> </div> <div class="carousel-item swiper-slide"> <div class="row event-item"> <:--event img--> <div class="col-lg-6"> <img src="assets/images/events2.jpg" class="d-block w-100 img-fluid" alt="Event 2"> </div> <.--event desc--> <div class="col-lg-6 content"> <h3>Private Parties</h3> <div class="price"> <p><span>$290</span></p> </div> <p class="fst-italic"> Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <ul> <li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> <li><i class="bi bi-check-circled"></i> Duis aute irure dolor in reprehenderit in voluptate velit:</li> <li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> </ul> <p> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </p> </div> </div><.--end row--> </div> <div class="carousel-item swiper-slide"> <div class="row event-item"> <.--event img--> <div class="col-lg-6"> <img src="assets/images/events3.jpg" class="d-block w-100 img-fluid" alt="Event 2"> </div> <.--event desc--> <div class="col-lg-6 content"> <h3>Custom Parties</h3> <div class="price"> <p><span>$99</span></p> </div> <p class="fst-italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <ul> <li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> <li><i class="bi bi-check-circled"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li> <li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> </ul> <p> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </p> </div> </div><!--end row--> </div> </div><!--end carosel inner--> </div><!--end slidesow--> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
我正在使用 Bootstrap 4 制作一個網站，並想構建一個旋轉木馬 slider 以包含 2 列 - 第一列帶有圖像，第二列帶有文本。
我遇到的問題是文本在過渡時會跳過圖像？ 我已將元素設置為與容器相同的高度和寬度，但這沒有幫助。
我嘗試在元素周圍添加邊距和填充，但這對過渡重疊沒有幫助。
我還嘗試了許多其他輪播插件，但由於某種原因，這些插件在我的網站上不起作用（可能是由於 Jquery 依賴項）。 我想找到一種方法讓這個轉換后的 slider 工作。 這是代碼：
引導 CDN 文件
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Slideshow -->
<div id="carouselExampleIndicators" class="carousel slide events-slider" data-ride="carousel">
<ol class="carousel-indicators dots">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item swiper-slide active">
<div class="row event-item">
<!--event img-->
<div class="col-lg-6 ">
<img src="assets/images/events1.jpg" class="d-block w-100 img-fluid" alt="Event 1">
</div>
<!--event desc-->
<div class="col-lg-6 content">
<h3>Birthday Parties</h3>
<div class="price">
<p><span>$189</span></p>
</div>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<ul>
<li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li><i class="bi bi-check-circled"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
<li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ul>
<p>
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur
</p>
</div>
</div><!--end row-->
</div>
<div class="carousel-item swiper-slide">
<div class="row event-item">
<!--event img-->
<div class="col-lg-6">
<img src="assets/images/events2.jpg" class="d-block w-100 img-fluid" alt="Event 2">
</div>
<!--event desc-->
<div class="col-lg-6 content">
<h3>Private Parties</h3>
<div class="price">
<p><span>$290</span></p>
</div>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<ul>
<li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li><i class="bi bi-check-circled"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
<li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ul>
<p>
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur
</p>
</div>
</div><!--end row-->
</div>
<div class="carousel-item swiper-slide">
<div class="row event-item">
<!--event img-->
<div class="col-lg-6">
<img src="assets/images/events3.jpg" class="d-block w-100 img-fluid" alt="Event 2">
</div>
<!--event desc-->
<div class="col-lg-6 content">
<h3>Custom Parties</h3>
<div class="price">
<p><span>$99</span></p>
</div>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<ul>
<li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li><i class="bi bi-check-circled"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
<li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ul>
<p>
Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur
</p>
</div>
</div><!--end row-->
</div>
</div><!--end carosel inner-->
</div><!--end slidesow-->
CSS：
.events {
position: relative;
}
.events::before {
content: "";
background-color:#fff;/*section color*/
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.events .container {
position: relative;
}
.events .event-item {
color: #fff;
}
.events .content{
margin-top: 20px;
padding:10px 30px 10px 30px;
}
.events .carousel{
background-color: #000;
}
.events .event-item h3 {
font-weight: 600;
font-size: 36px;
color: #cda45e;
}
.events .event-item .price {
font-size: 26px;
font-family: "Open Sans", sans-serif;
font-weight: 700;
margin-bottom: 15px;
}
.events .event-item .price span {
border-bottom: 2px solid #cda45e;
}
.events .fst-italic{
font-style: italic;
}
.events .event-item ul {
list-style: none;
padding: 0;
}
.events .event-item ul li {
padding-bottom: 10px;
}
.events .event-item ul i {
font-size: 20px;
padding-right: 4px;
color: #cda45e;
}
.dots {
bottom: -80px!important;
z-index: 5;
}
.dots li {
width: 15px !important;
height: 15px !important;
border-radius: 100% !important;
margin-left: 10px !important;
background-color: #000 !important;
}
.carousel .dots .active {
background-color: #cda45e !important;
}
對此的任何幫助將不勝感激！
1 個解決方案
解決方案1
0 2022-09-18 17:46:42
它似乎運作良好。 問題是什么？
.events { position: relative; }.events::before { content: ""; background-color: #fff; /*section color*/ position: absolute; top: 0; right: 0; left: 0; bottom: 0; }.events.container { position: relative; }.events.event-item { color: #fff; }.events.content { margin-top: 20px; padding: 10px 30px 10px 30px; }.events.carousel { background-color: #000; }.events.event-item h3 { font-weight: 600; font-size: 36px; color: #cda45e; }.events.event-item.price { font-size: 26px; font-family: "Open Sans", sans-serif; font-weight: 700; margin-bottom: 15px; }.events.event-item.price span { border-bottom: 2px solid #cda45e; }.events.fst-italic { font-style: italic; }.events.event-item ul { list-style: none; padding: 0; }.events.event-item ul li { padding-bottom: 10px; }.events.event-item ul i { font-size: 20px; padding-right: 4px; color: #cda45e; }.dots { bottom: -80px;important: z-index; 5. }:dots li { width; 15px:important; height: 15px;important: border-radius; 100%:important; margin-left. 10px.important. background-color: #000;important; } .carousel .dots .active { background-color: #cda45e !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <:-- Slideshow --> <div id="carouselExampleIndicators" class="carousel slide events-slider" data-ride="carousel"> <ol class="carousel-indicators dots"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item swiper-slide active"> <div class="row event-item"> <.--event img--> <div class="col-sm-6 "> <img src="https,//picsum,photos/300" class="d-block w-100 img-fluid" alt="Event 1"> </div> <.--event desc--> <div class="col-sm-6 content"> <h3>Birthday Parties</h3> <div class="price"> <p><span>$189</span></p> </div> <p class="fst-italic"> Lorem ipsum dolor sit amet. consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <ul> <li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> <li><i class="bi bi-check-circled"></i> Duis aute irure dolor in reprehenderit in voluptate velit:</li> <li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> </ul> <p> Ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </p> </div> </div> <,--end row--> </div> <div class="carousel-item swiper-slide"> <div class="row event-item"> <.--event img--> <div class="col-sm-6"> <img src="https.//picsum.photos/300" class="d-block w-100 img-fluid" alt="Event 2"> </div> <.--event desc--> <div class="col-sm-6 content"> <h3>Private Parties</h3> <div class="price"> <p><span>$290</span></p> </div> <p class="fst-italic"> Lorem ipsum dolor sit amet. consectetur adipiscing elit: sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <ul> <li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat,</li> <li><i class="bi bi-check-circled"></i> Duis aute irure dolor in reprehenderit in voluptate velit,</li> <li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> </ul> <p> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </p> </div> </div> <.--end row--> </div> <div class="carousel-item swiper-slide"> <div class="row event-item"> <.--event img--> <div class="col-sm-6"> <img src="https.//picsum.photos/300" class="d-block w-100 img-fluid" alt="Event 2"> </div> <!--event desc--> <div class="col-sm-6 content"> <h3>Custom Parties</h3> <div class="price"> <p><span>$99</span></p> </div> <p class="fst-italic"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <ul> <li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> <li><i class="bi bi-check-circled"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li> <li><i class="bi bi-check-circled"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li> </ul> <p> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </p> </div> </div> <!--end row--> </div> </div> <!--end carosel inner--> </div> <!--end slidesow-->
Bootstrap 滑塊/輪播
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.