如何解决反应滑块显示空白
我使用幻灯片轮播制作了一个滑块,使用了 react-polygon,但是当我播放滑块时,在下一张幻灯片之前会显示一个空白页面screenshot here。我的反应代码和 CSS 附加。我尝试在幻灯片图像上使用多边形显示。我不知道是多边形导致问题还是我的 CSS 错误。提前致谢。
import React from "react";
import "../css/Slider.css";
import { FaStar,FaStarHalf } from "react-icons/fa";
import polygon from "react-polygon";
import { IoMdplay } from "react-icons/io";
export const Slider = () => {
return (
<div
id="carouselExampleCaptions"
class="carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-indicators p-0 ">
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div
class="slick-bg d-block"
alt="..."
style={{
backgroundImage: `url(
"https://images2.alphacoders.com/851/thumb-1920-85182.jpg"
)`,}}
></div>
<div class="carousel-caption d-block">
<a href="javascript:void(0);" tabindex="0">
<div
class="channel-logo fadeInLeft animated"
data-animation-in="fadeInLeft"
data-delay-in="0.5"
style={{ opacity: "1 animation-delay: 0.5s" }}
>
<img
src="https://vinzator.com/movieProject/logo1.png"
class="c-logo"
alt="streamit"
/>
</div>
</a>
<h5
className="animated fadeInLeft"
style={{ animationDelay: 0.6 + "s" }}
>
Inception
</h5>
<div className="d-flex flex-wrap align-items-center fadeInLeft animated">
<div className="slider-ratting d-flex align-items-center me-4 mt-2 my-md-3">
<ul className="ratting-start p-0 m-0 list-inline d-flex align-items-center justify-content-left">
<li>
<FaStar className="fa" />
</li>
<li>
<FaStar className="fa" />
</li>
<li>
<FaStar className="fa" />
</li>
<li>
<FaStar className="fa" />
</li>
<li>
<FaStarHalf className="fa" />
</li>
</ul>
<span className="text-white ml-2">4.7(Imbd)</span>
</div>
<div className="d-flex align-items-center my-2">
<span className="badge badge-secondary p-2">+18</span>
<span className="ms-3">Movie</span>
</div>
</div>
<p
className="animated fadeInUp info-p"
style={{ animationDelay: 1.2 + "s" }}
>
A thief who steals corporate secrets through the use of
dream-sharing technology is given the inverse task of planting an
idea into the mind of a C.E.O.
</p>
<div className="trending-list">
<div className="title starring">
Starring:{" "}
<span className="text-white">
Leonardo DiCaprio,Marion Cotillard,Elliot Page
</span>
</div>
<div className="title starring">
Genres:{" "}
<span className="text-white">Action,Adventure,Sci-Fi</span>
</div>
<div className="title starring">
Director: <span className="text-white">Christopher Nolan</span>
</div>
</div>
<div
className="d-flex align-items-center r-mb-23 fadeInUp animated "
style={{ animationDelay: 1.2 + "s" }}
>
<a href="" className="play-Now">
PLAY Now
</a>
<a href="" className="more-details">
More Details
</a>
<a
href="video/trailer.mp4"
class="video-open playBut"
tabindex="0"
>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="80px"
height="80px"
viewBox="0 0 213.7 213.7"
enable-background="new 0 0 213.7 213.7"
xmlSpace="preserve"
>
<polygon
class="triangle"
fill="none"
stroke-width="7"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
points="73.5,62.5 148.5,105.8 73.5,149.1 "
></polygon>
<circle
class="circle"
fill="none"
stroke-width="7"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="10"
cx="106.8"
cy="106.8"
r="103.3"
></circle>
</svg>
<span class="w-trailor">Watch Trailer</span>
</a>
</div>
</div>
</div>
<div class="carousel-item ">
<img
src="https://picsum.photos/1920/1050?random=2"
class="slick-bg d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item ">
<img
src="https://picsum.photos/1920/1050?random=3"
class="slick-bg d-block w-100"
alt="..."
/>
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the Third slide.</p>
</div>
</div>
</div>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="next"
>
<span
class="carousel-control-next-icon arrow-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">Next</span>
</button>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleCaptions"
data-bs-slide="prev"
>
<span
class="carousel-control-prev-icon arrow-icon"
aria-hidden="true"
></span>
<span class="visually-hidden">PrevIoUs</span>
</button>
</div>
);
};
/* Slider ArkaPlan */
.slick-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 100%;
background: linear-gradient(
90deg,rgba(0,1) 0%,rgba(20,20,1) 35%,rgba(83,100,141,0) 100%
);
z-index: 1;
}
.slick-bg {
width: 100%;
/* background: url("https://images2.alphacoders.com/851/thumb-1920-85182.jpg"); */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100vh;
position: relative;
z-index: -1;
}
/* Carusel Uzerindeki Yazilar */
.carousel-item {
height: 100vh;
min-height: 300px;
}
.carousel-caption {
bottom: initial;
top: 60%;
transform: translateY(-50%);
text-align: start;
padding: 0 100px !important;
position: absolute;
padding: right 2px;
right: 0;
left: 0;
font-family: "Roboto",sans-serif;
font-style: normal;
font-size: 16px;
line-height: 1.5;
}
.carousel-caption h5 {
font-size: 4vw;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 25px;
font-weight: 900;
right: 0;
}
.carousel-caption p {
font-size: 16px;
/* margin: auto; */
width: 30% !important;
font-family: "Roboto",sans-serif;
color: #bbbab9;
/* margin-top: 25px; */
line-height: 1.9;
}
/* Film Puani */
.slider-ratting {
position: relative;
display: block;
Box-sizing: border-Box;
}
.star-style {
list-style: none;
}
.slider-ratting ul li {
margin-right: 5px;
}
.fa {
font-size: 16px !important;
color: #e50914;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-play:before {
content: "\f144";
position: absolute;
border: 1px indigo;
}
.info-p {
margin: 20px 0;
width: 600px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-Box;
-webkit-line-clamp: 3;
-webkit-Box-orient: vertical;
}
.badge {
display: inline-block;
padding: 0.5rem !important;
font-size: 80%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: Nowrap;
vertical-align: baseline;
border-radius: 0rem;
}
.badge-secondary {
color: #fff;
background-color: #6c757d;
}
/* Cast Style */
.trending-list {
margin: 0 0 30px 0;
}
.trending-list .title {
color: #e50914;
font-size: 18px;
font-weight: 500;
}
.trending-list .title span {
font-size: 16px;
font-weight: 400;
}
/* Play Now and more details */
.carousel-caption .play-Now {
text-transform: uppercase;
background-color: #e50914;
padding: 10px 40px;
display: inline-block;
color: #fff;
text-decoration: none;
}
.more-details {
color: #fff;
padding: 10px 30px;
position: relative;
display: inline-block;
border-radius: 0 !important;
cursor: pointer;
z-index: 4;
text-decoration: none;
}
.more-details:hover {
color: #e50914 !important;
transition: all 0.3s ease-in-out;
}
.carousel-control-next,.carousel-control-prev {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 4% !important;
padding: 0;
color: #fff;
text-align: center;
background: 0 0;
border: 0;
opacity: 0.5;
transition: opacity 0.15s ease;
}
.btn-hover {
/* background: transparent linear-gradient(270deg,rgba(11,1,2,0) 0%,rgba(255,55,65,0.3) 100%); */
background: #e50914;
/* border: 1px solid #c5616c; */
color: white !important;
transition: color 0.3s ease;
display: inline-block;
vertical-align: middle;
/* -webkit-transform: perspective(1px) translateZ(0); */
transform: perspective(1px) translateZ(0);
Box-shadow: 0 0 1px rgb(0 0 0 / 0%);
position: relative;
border-radius: 5px;
}
.iq-button.btn {
padding: 12px 24px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
a,.btn {
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: Nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.5s ease-in-out,Box-shadow 0.15s ease-in-out;
}
.btn-hover:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
/* background: #e50914; */
border: 1px solid transparent
linear-gradient(270deg,0.3) 100%);
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
transition: transform 0.5s ease-out;
-webkit-transition: transform 0.3s ease-out;
background: transparent
linear-gradient(270deg,0.3) 100%);
}
.w-trailor {
font-size: 17px;
letter-spacing: 3.5px;
font-weight: 600;
color: white;
margin-left: 5px;
}
a {
color: white;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
.trailor-video {
position: absolute;
bottom: 0;
right: 0;
z-index: 999;
text-align: center;
}
.triangle {
width: 0px;
height: 0px;
background: black;
border: 20px solid;
border-top-color: red;
border-left-color: green;
border-right-color: blue;
border-bottom-color: purple;
}
.triangle:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 100%;
border-top: solid 10px #e15915;
border-left: solid 50px transparent;
border-right: solid 50px transparent;
border-bottom: solid 10px transparent;
}
.channel-logo {
border-left: 5px solid #e50914;
background: transparent
linear-gradient(270deg,0.3) 100%);
padding: 10px 10px 10px 15px;
width: 255px;
position: relative;
overflow: hidden;
}
.circle {
stroke: #e50914;
stroke-dasharray: 650;
stroke-dashoffset: 650;
-webkit-transition: all 0.5s ease-in-out;
opacity: 0.3;
}
.playBut {
/* border: 1px solid red;*/
display: inline-block;
-webkit-transition: all 0.5s ease;
font-family: "Roboto",sans-serif;
font-style: normal;
font-size: 16px;
vertical-align: middle;
position: absolute;
left: 900px;
}
.playBut .triangle {
-webkit-transition: all 0.7s ease-in-out;
stroke-dasharray: 240;
stroke-dashoffset: 480;
stroke: #fff;
transform: translateY(0);
}
.playBut:hover .triangle {
stroke-dashoffset: 0;
opacity: 1;
stroke: #e50914;
animation: nudge 0.7s ease-in-out;
}
@keyframes nudge {
0% {
transform: translateX(0);
}
30% {
transform: translateX(-5px);
}
50% {
transform: translateX(5px);
}
70% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
}
}
.playBut:hover .circle {
stroke-dashoffset: 0;
opacity: 1;
}
@media screen and (max-width: 425px) {
.carousel-caption {
bottom: initial;
top: 50%;
transform: translateY(-50%);
text-align: start;
padding: 0 30px !important;
}
.carousel-caption p {
font-size: 16px;
/* margin: auto; */
width: 90% !important;
/* margin-top: 25px; */
}
.carousel-caption h5 {
font-size: 35px;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 25px;
font-weight: 900;
right: 0;
line-height: 62px;
margin: 0px;
}
.playBut {
/* border: 1px solid red;*/
display: inline-block;
-webkit-transition: all 0.5s ease;
font-family: "Roboto",sans-serif;
font-style: normal;
font-size: 16px;
vertical-align: middle;
position: absolute;
left: 100px;
}
}
@media (max-width: 991px) {
.carousel-caption h5 {
font-size: 35px;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 25px;
font-weight: 900;
right: 0;
line-height: 62px;
margin: 15px 0;
}
.playBut {
/* border: 1px solid red;*/
display: inline-block;
-webkit-transition: all 0.5s ease;
font-family: "Roboto",sans-serif;
font-style: normal;
font-size: 16px;
vertical-align: middle;
position: absolute;
left: 400px;
}
}
@media screen and (min-width: 1024px) {
.carousel-caption {
bottom: initial;
top: 50%;
transform: translateY(-50%);
text-align: start;
padding: 0 100px !important;
}
.carousel-caption p {
font-size: 16px;
/* margin: auto; */
width: 70% !important;
/* margin-top: 25px; */
}
.carousel-caption h5 {
font-size: 80px;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 25px;
font-weight: 900;
right: 0;
line-height: 62px;
margin: 15px 0;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。